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=