一、引入相应的js
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
二、页面
<div id="treeTable">
</div>
三、js代码
$(document).ready(function () {
var source =
{
dataType: "json",
//设置字段名称，name和后台实体对应
dataFields: [
{ name: "id", type: "string" },
{ name: "pid", type: "string" },
{ name: "name", type: "string" },
{ name: "value", type: "string" },
{ name: "title", type: "string" },
{ name: "type", type: "string" },
{ name: "children", type: "array" },
],
hierarchy:
{
root: "children" //设置孩子节点？
},
url : "getFullTree.shtml?time="+getTimestamp, //数据请求链接
id: "id" //设置主键
};
var dataAdapter = new $.jqx.dataAdapter(source);//加载source
function loadTable(){
var averageW=parseInt($("#treeTable").width()*0.2);//定义表格树每列的宽度
$("#treeTable").jqxTreeGrid(
//设置一些基本的属性
{
source: dataAdapter,
altRows: true,
autoRowHeight: false,
editable: true,
/*checkboxes: true,
hierarchicalCheckboxes: true,*/
editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: false, editOnF2: false },
//表头（每列显示的名称，与上文中source中的dataField对应）
columns:[
{
text:"Name",
dataField:'name',
align: "center",
width:averageW
},
{
text:"Value",
dataField:"value",
align:"center",
cellsAlign: 'center',
width:averageW,
},
{
text:"Title",
dataField:"title",
align:"center",
cellsAlign: 'center',
width:averageW,
},
{
text:"Type",
dataField:"type",
align:"center",
cellsAlign: 'center',
width:averageW,
},
{
text:"操作",
dataField:'toolBar',
cellsAlign: 'center',
align: "center",
width:averageW,
cellsRenderer:function(row,clomun,value){
var toolBtn= '<div class="custom-btn-group">'+
'<button class="custom-btn-small add-btn" title="添加" data-toggle="modal" data-target=".add-modal">'+
'<i class="fa fa-plus" aria-hidden="true"></i>'+
'</button>'+
'<button class="custom-btn-small edit-btn" title="编辑" data-toggle="modal" data-target=".edit-modal">'+
'<i class="fa fa-pencil" aria-hidden="true"></i>'+
'</button>'+
'<button class="custom-btn-small del-btn" title="删除">'+
'<i class="fa fa-trash" aria-hidden="true"></i>'+
'</button>'+
'</div>';
return toolBtn;
}
}
]
});
}
loadTable();
$(window).resize(function(){
loadTable();
})
});
四、主要介绍对表格树的CRUD。
4.1、首先要获取所选中的行（很重要）
//rowSelect 当行被点击时执行的事件
$("#treeTable").on('rowSelect', function (event) {
var args = event.args;
//获取选中行的数据
rowData = args.row;
//获取选中行的主键（id）
rowKey = args.key;
});
4.2、增加子节点（官方api没说清楚，坑了我好久）
$("#treeTable").jqxTreeGrid('addRow', message.id, message, 'last', rowKey);//参数解释：'addRow' ——>表明这是一个增加行的方法。
//message.id ——>要增加数据的主键id（如果这个参数设置为null，则新加数据的主键id就会调用jqxTreeGrid默认的方法把父id（选中行的id）加1后作为增加数据的主键id!
//message ——> 要增加的数据。
//'last' ——> 设置新增的数据在表格中显示的位置（last:将新增的数据放在所选节点下的最后一行。first：将新增的数据放在所选节点下的第一行）
//rowKey ——> 所选节点的id（父节点的id，主要是判断新增的数据该放在哪个节点（行）下）
4.3、修改节点
$("#treeTable").jqxTreeGrid('updateRow', rowKey, message);//参数解释：updateRow ——> 表明这是一个更新方法
//rowKey ——> 所选行的主键id
//message ——> 更新的数据
4.4、删除节点
$("#treeTable").jqxTreeGrid('deleteRow',rowKey);//参数解释：
//deleteRow ——> 表明这是一个删除方法
//rowKey —— > 要删除节点（行）的主键id
4.5、效果图
五、官方API链接