首先load和reload的區別就是一個是整個數據一個是當前頁面的數據,其余的用法一樣
js:
var user = {total:6,rows:[ {no:1,name:'用戶1',addr:'山東濟南',email:'user1@163.com',birthday:'1/1/1980'}, {no:2,name:'用戶2',addr:'山東濟南',email:'user2@163.com',birthday:'1/1/1980'}, {no:3,name:'用戶3',addr:'山東濟南',email:'user3@163.com',birthday:'1/1/1980'}, {no:4,name:'用戶4',addr:'山東濟南',email:'user4@163.com',birthday:'1/1/1980'}, {no:5,name:'用戶5',addr:'山東濟南',email:'user5@163.com',birthday:'1/1/1980'}, {no:6,name:'用戶6',addr:'山東濟南',email:'user6@163.com',birthday:'1/1/1980'} ]}; $(function(){ $('#tt').datagrid({ title:'Editable DataGrid', iconCls:'icon-edit', width:530, height:250, singleSelect:true, columns:[[ {field:'no',title:'編號',width:50,editor:'numberbox'}, {field:'name',title:'名稱',width:60,editor:'text'}, {field:'addr',title:'地址',width:100,editor:'text'}, {field:'email',title:'電子郵件',width:100, editor:{ type:'validatebox', options:{ validType:'email' } } }, {field:'birthday',title:'生日',width:80,editor:'datebox'}, {field:'action',title:'操作',width:70,align:'center', formatter:function(value,row,index){//單元格的格式化函數,需要三個參數:value:字段的值; rowData:行的記錄數據; rowIndex:行的索引。 if (row.editing){ var s = '<a href="#" onclick="saverow('+index+')">保存</a> '; var c = '<a href="#" onclick="cancelrow('+index+')">取消</a>'; return s+c; } else { var e = '<a href="#" onclick="editrow('+index+')">編輯</a> '; var d = '<a href="#" onclick="deleterow('+index+')">刪除</a>'; return e+d; } } } ]], toolbar:[{ text:'增加', iconCls:'icon-add', handler:addrow },{ text:'保存', iconCls:'icon-save', handler:saveall },{ text:'取消', iconCls:'icon-cancel', handler:cancelall },{ text:'刷新', iconCls:'icon-reload', handler:reloads }], onBeforeEdit:function(index,row){ row.editing = true; $('#tt').datagrid('refreshRow', index);//刷新一行 editcount++; }, onAfterEdit:function(index,row){ row.editing = false; $('#tt').datagrid('refreshRow', index); editcount--; }, onCancelEdit:function(index,row){ row.editing = false; $('#tt').datagrid('refreshRow', index); editcount--; } }).datagrid('loadData',user).datagrid('acceptChanges'); }); var editcount = 0; function editrow(index){ $('#tt').datagrid('beginEdit', index);//開始對一行進行編輯 } function deleterow(index){ $.messager.confirm('確認','是否真的刪除?',function(r){ if (r){ $('#tt').datagrid('deleteRow', index);//刪除一行 } }); } function saverow(index){ $('#tt').datagrid('endEdit', index);//結束對一行進行編輯 } function cancelrow(index){ $('#tt').datagrid('cancelEdit', index);//取消對一行進行編輯 } function addrow(){ if (editcount > 0){ $.messager.alert('警告','當前還有'+editcount+'記錄正在編輯,不能增加記錄。'); return; } $('#tt').datagrid('appendRow',{ no:'', name:'', addr:'', email:'', birthday:'' }); } function saveall(){ $('#tt').datagrid('acceptChanges');//提交自從被加載以來或最后一次調用acceptChanges以來所有更改的數據 } function cancelall(){ $('#tt').datagrid('rejectChanges');//回滾自從創建以來或最后一次調用acceptChanges以來所有更改的數據 } function reloads(){ $('#tt').datagrid('reload');//刷新 }
html:
<body> <table id="tt"></table> </body>
試了好多遍,開始姐理解錯了。以為是會把頁面上修改后的數據重新變回原來的數據,后來才發現其實是將user替換為當前頁面的內容。