easyui数据表格datagrid，树形表格treegrid使用总结

前言：

       最近在开发后台系统时用到easyui，现在用这个框架的应该很少了吧，在网上查找方法案列的时候，总是找不到想要的答案，所以对最近开发做一个简单小结，希望可以帮助到你。

       常用组件当然离不开datagrid和tree树及treegrid树形表格，两者基本上原理一样，easyui组件会有相互依赖继承关系，包括方法事件的继承，大家在开发的时候，注意阅读官方文档，这里简单介绍datagrid，可以在这里下载官方API中文版https://pan.baidu.com/s/1xWqTw7h4t-kzuvCr7-ccMQ，不过我这个版本是1.3.5的。有什么不懂的，可以在评论下方说明。

废话不多说，先上代码

HTML代码：

<div id="ListData" class="datagrid-wrap panel-body panel-body-noheader" style="width: 1120px; height: auto;"></div>

JS代码：

//loadListData这个方法主要是对获取数据表格进行封装；点击查询的时候需要获取输入框的信息，进行筛选查询。也可以在datagrid里面直接写url。

function loadListData(that,params) {

    var list = $(that);

    if(!params) {

      var options = list.datagrid('getPager').data("pagination").options;

      params = {};

      params.page = options.pageNumber;

      params.rows = options.pageSize;

    }



    var param = $("#searchForm").serializeObject(); //serializeObject封装的这个方法用来获取表单输入框信息。

    if(params) {

      param.pageNo = params.page;

      param.pageSize = params.rows;

      param.sort = params.sort;

      param.order = params.order;

      param.taskId = $("#taskLogId").val();

    }

    $.http({    //对请求做了一个小的封装，发起的时候有loading状态，你们也可以按照自己的方法进行请求传参。

      url : ' ',

      contentType: "application/x-www-form-urlencoded; charset=utf-8",

      data : param,

      onSuccess : function(data) {

        if(data.data) {

          list.datagrid("loadData", { "total":data.data.page.totalRecord,"rows":data.data.list }); //这里返回的数据一定要是数组，将数据写入到页面

        } else {

          list.datagrid("loadData", {

            rows:[],

            total:0

          });

        }

      },

      type:"get",

      dataType : 'json'

    });

  }



$("#ListData").datagrid({

    fitColumns: true, //自动展开收缩列，适应网格的宽度

    pageSize: 20, 

    pagination: true, //DataGrid控件底部显示分页工具栏

    singleSelect: false,  // 如果为true，则只允许选择一行。

    width:1050,

    striped:true,   //是否显示斑马线效果。

    columns:[[    //DataGrid列配置对象

      {field:'id',title:'ID',width:10},

      {field:'operateType',title:'操作类型',width:30, formatter: function (value, row, index) {      

     //单元格formatter(格式化器)函数，带3个参数： value：字段值。 rowData：行记录数据。 rowIndex: 行索引。

        if(value == 0){

          return '新建'

        }

        if(value == 1){

          return '修改'

        }

        if(value == 2){

          return '发送'

        }

        if(value == 3){

          return '终止'

        }

        if(value == 4){

          return '删除'

        }

      }},

      {field:'operateInfo',title:'操作信息',width:80},

      {field:'createUser',title:'操作者',width:20},

      {field:'gmtCreate',title:'操作时间',width:50,sortable:true, formatter: function (value, row, index) {

        return value == null ? "" : $.dateFormat('yyyy-MM-dd HH:mm', value);

      }},

    ]],

    onBeforeLoad:function(param) {  

     //关键点，onBeforeLoad在载入请求数据数据之前触发，如果返回false可终止载入数据操作。这里我们对数据获取进行了筛选查询。如果进入页面首次不加载数据，这里也可以加入条件判断。

      var that = this;

      loadListData(that,param);

      return false;

    },

//点击每一行的时候触发
//onClickRow: function (rowIndex, rowData) {
//    alert(rowData["createUser"]);
//}

})

还有很多方法，可以通过上面的下载链接自己去找。

方法

很多方法都使用'id'命名参数，而'id'参数代表树节点的值。

 

方法

 

方法名	参数	描述
options	none	返回属性对象。
getPager	none	返回页面对象。
getPanel	none	返回面板对象。
getColumnFields	frozen	返回列字段。如果设置了frozen属性为true，将返回固定列的字段名。 代码示例： var opts = $('#dg').datagrid('getColumnFields');               // 获取解冻列 var opts = $('#dg').datagrid('getColumnFields', true);       // 获取冻结列
getColumnOption	field	返回指定列属性。
resize	param	做调整和布局。
load	param	加载和显示第一页的所有行。如果指定了'param'，它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询，通过调用这个方法从服务器加载新数据。 $('#dg').datagrid('load',{ code: '01', name: 'name01' });
reload	param	重载行。等同于'load'方法，但是它将保持在当前页。
reloadFooter	footer	重载页脚行。代码示例： // 更新页脚行的值并刷新 var rows = $('#dg').datagrid('getFooterRows'); rows[0]['name'] = 'new name'; rows[0]['salary'] = 60000; $('#dg').datagrid('reloadFooter'); // 更新页脚行并载入新数据 $('#dg').datagrid('reloadFooter',[ {name: 'name1', salary: 60000}, {name: 'name2', salary: 65000} ]);
loading	none	显示载入状态。
loaded	none	隐藏载入状态。
fitColumns	none	使列自动展开/收缩到合适的DataGrid宽度。
fixColumnSize	field	固定列大小。如果'field'参数未配置，所有列大小将都是固定的。 代码示例： $('#dg').datagrid('fixColumnSize', 'name');        // 固定'name'列大小 $('#dg').datagrid('fixColumnSize');                    // 固定所有列大小
fixRowHeight	index	固定指定列高度。如果'index'参数未配置，所有行高度都是固定的。
freezeRow	index	冻结指定行，当DataGrid表格向下滚动的时候始终保持被冻结的行显示在顶部。（该方法自1.3.2版开始可用）
autoSizeColumn	field	自动调整列宽度以适应内容。（该方法自1.3版开始可用）
loadData	data	加载本地数据，旧的行将被移除。
getData	none	返回加载完毕后的数据。
getRows	none	返回当前页的所有行。
getFooterRows	none	返回页脚行。
getRowIndex	row	返回指定行的索引号，该行的参数可以是一行记录或一个ID字段值。
getChecked	none	在复选框呗选中的时候返回所有行。（该方法自1.3版开始可用）
getSelected	none	返回第一个被选中的行或如果没有选中的行则返回null。
getSelections	none	返回所有被选中的行，当没有记录被选中的时候将返回一个空数组。
clearSelections	none	清除所有选择的行。
clearChecked	none	清除所有勾选的行。（该方法自1.3.2版开始可用）
scrollTo	index	滚动到指定的行。（该方法自1.3.3版开始可用）
highlightRow	index	高亮一行。（该方法自1.3.3版开始可用）
selectAll	none	选择当前页中所有的行。
unselectAll	none	取消选择所有当前页中所有的行。
selectRow	index	选择一行，行索引从0开始。
selectRecord	idValue	通过ID值参数选择一行。
unselectRow	index	取消选择一行。
checkAll	none	勾选当前页中的所有行。（该方法自1.3版开始可用）
uncheckAll	none	取消勾选当前页中的所有行。（该方法自1.3版开始可用）
checkRow	index	勾选一行，行索引从0开始。（该方法自1.3版开始可用）
uncheckRow	index	取消勾选一行，行索引从0开始。（该方法自1.3版开始可用）
beginEdit	index	开始编辑行。
endEdit	index	结束编辑行。
cancelEdit	index	取消编辑行。
getEditors	index	获取指定行的编辑器。每个编辑器都有以下属性： actions：编辑器可以执行的动作，同编辑器定义。 target：目标编辑器的jQuery对象。 field：字段名称。 type：编辑器类型，比如：'text','combobox','datebox'等。
getEditor	options	获取指定编辑器，options包含2个属性： index：行索引。 field：字段名称。 代码示例： // 获取日期输入框编辑器并更改它的值 var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'}); $(ed.target).datebox('setValue', '5/4/2012');
refreshRow	index	刷新行。
validateRow	index	验证指定的行，当验证有效的时候返回true。
updateRow	param	更新指定行，参数包含下列属性： index：执行更新操作的行索引。 row：更新行的新数据。 代码示例： $('#dg').datagrid('updateRow',{ index: 2, row: { name: '新名称', note: '新消息' } });
appendRow	row	追加一个新行。新行将被添加到最后的位置。 $('#dg').datagrid('appendRow',{ name: '新名称', age: 30, note: '新消息' });
insertRow	param	插入一个新行，参数包括一下属性： index：要插入的行索引，如果该索引值未定义，则追加新行。 row：行数据。 代码示例： // 在第二行的位置插入一个新行 $('#dg').datagrid('insertRow',{ index: 1, // 索引从0开始 row: { name: '新名称', age: 30, note: '新消息' } });
deleteRow	index	删除行。
getChanges	type	从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行，可以使用的值有：inserted,deleted,updated等。当类型参数未配置的时候返回所有改变的行。
acceptChanges	none	提交所有从加载或者上一次调用acceptChanges函数后更改的数据。
rejectChanges	none	回滚所有从创建或者上一次调用acceptChanges函数后更改的数据。
mergeCells	options	合并单元格，options包含以下属性： index：行索引。 field：字段名称。 rowspan：合并的行数。 colspan：合并的列数。
showColumn	field	显示指定的列。
hideColumn	field	隐藏指定的列。