最近学了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看了很多遍。俗话说：勤能补拙。自己不是很聪明的类型，但想要的功能会找办法把他实现的。
网友评论