easyui设置复杂数据网格

最近学了easyui把数据网格好好看了一下，根据项目做了一下页面。

废话不多说上效果图和代码

效果界面

页面上有标注知识点：

1.首先是数据网格的行冻结功能：frozenColumns和列属性一样的用法。

frozenColumns: [[

{field:'ids',title:'序号',width:60,align:'center',sortable:true},

{field:'status',title:'部门名称',align:'center',width:60,sortable:false}

]],

2.接下来是合并单元格：colspan和rowspan

{field:'',title:'加盟商贷方发生额',align:'center',width:400,colspan:12,sortable:false},

{field:'listprice',title:'加盟商月末余额',width:240,rowspan:2,align:'center',sortable:false}

3.分页和分页上的保存功能：分页：pagination:true,

 保存：$(function() {

varpager=$('#dataList').datagrid().datagrid('getPager');// get the pager of datagrid

pager.pagination({

buttons: [{

iconCls:'icon-save',

handler:function() {

rowname=[]

}

}]

});

})

4.指定行的可编辑功能：

单击要编辑的单元格就可以进行编辑了。

columns绑定的数据字段里，增加如下代码，后直接引用easyui的数据网格里的“数据表格的单元编辑”代码。

可编辑字段代码

5.设置编辑之后的单元框样式变化，数据字段的代码如上。在js里面设置一个全局数组变量rowname[]，在编辑的代码里记录编辑之后的行索引。如下截取部分代码：加粗代码字段是把编辑过的索引放数组里。

vared=$(this).datagrid('getEditor', param);

if(ed){

//编辑过的行的索引放到数组里

rowname.push(param.index);

if($(ed.target).hasClass('textbox-f')){

$(ed.target).textbox('textbox').focus();

}else{

$(ed.target).focus();

}

}

6.点击保存的数据，根据索引的数组。更新相应的行，注：行序号是索引序号+1，清除编辑完的样式，只要把数组清空，数据重新加载一下就可以了。

虽然写的时候感觉知识点很少，但是做的时候也花了我两天的时间，把easyui的demo看了很多遍。俗话说：勤能补拙。自己不是很聪明的类型，但想要的功能会找办法把他实现的。