Jquery的树插件jqxTreeGrid的使用小结（实现基本的增删查改操作）

一、引入相应的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链接

https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtreegrid/jquery-treegrid-getting-started.htm?search=