<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>

$(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();

    })

});

 //rowSelect  当行被点击时执行的事件

$("#treeTable").on('rowSelect', function (event) {

      var args = event.args;

      //获取选中行的数据

      rowData = args.row;

      //获取选中行的主键（id）

      rowKey = args.key;

  });

$("#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，主要是判断新增的数据该放在哪个节点（行）下）

$("#treeTable").jqxTreeGrid('updateRow', rowKey, message);//参数解释：updateRow ——> 表明这是一个更新方法

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//rowKey ——> 所选行的主键id

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //message ——> 更新的数据

$("#treeTable").jqxTreeGrid('deleteRow',rowKey);//参数解释：
　　　　　　　　　　　　　　　　　　　　　　　　　　　　//deleteRow ——> 表明这是一个删除方法

　　　　　　　　　　　　　　　　　　　　　　　　　　　　//rowKey —— > 要删除节点（行）的主键id