最近學了easyui把數(shù)據(jù)網(wǎng)格好好看了一下，根據(jù)項目做了一下頁面墅冷。
廢話不多說上效果圖和代碼
頁面上有標注知識點：
1.首先是數(shù)據(jù)網(wǎng)格的行凍結功能：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:'加盟商貸方發(fā)生額',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綁定的數(shù)據(jù)字段里月弛，增加如下代碼弦叶，后直接引用easyui的數(shù)據(jù)網(wǎng)格里的“數(shù)據(jù)表格的單元編輯”代碼尊沸。
5.設置編輯之后的單元框樣式變化威沫，數(shù)據(jù)字段的代碼如上。在js里面設置一個全局數(shù)組變量rowname[]椒丧，在編輯的代碼里記錄編輯之后的行索引。如下截取部分代碼：加粗代碼字段是把編輯過的索引放數(shù)組里救巷。
vared=$(this).datagrid('getEditor', param);
if(ed){
//編輯過的行的索引放到數(shù)組里
rowname.push(param.index);
if($(ed.target).hasClass('textbox-f')){
$(ed.target).textbox('textbox').focus();
}else{
$(ed.target).focus();
}
}
6.點擊保存的數(shù)據(jù)壶熏，根據(jù)索引的數(shù)組。更新相應的行浦译，注：行序號是索引序號+1棒假，清除編輯完的樣式溯职，只要把數(shù)組清空，數(shù)據(jù)重新加載一下就可以了帽哑。
雖然寫的時候感覺知識點很少谜酒，但是做的時候也花了我兩天的時間，把easyui的demo看了很多遍妻枕。俗話說：勤能補拙僻族。自己不是很聰明的類型，但想要的功能會找辦法把他實現(xiàn)的屡谐。
