jQuery易用户界面中对表格进行编辑的实现代码

效果图：

复制代码代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML头元http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 ' title jquery Easyui/title link rel='样式表type='text/css' href='./主题/默认/测量。CSS ' link rel='样式表type='text/css' href='./主题/图标。CSS '脚本类型=' text/JavaScript ' src=' http :/jquery-1。4 .2 .量滴js/'脚本脚本类型=' text/JavaScript ' src=' http :/jquery。苏西。量滴js/script脚本var users={ total :6，row : [{ no :1，name: '用户1 ',地址： '山东济南，email :“[email protected]”，生日：'1/1/1980'}，{no:2，name: '用户2 ',地址： '山东济南，email :“[email protected]”，生日：'1/1/1980'}，{no:3，name: '用户3 ',地址： '山东济南，email :“[email protected]”，生日：'1/1/1980'}，{no:4，name: '用户4 ',地址： '山东济南，email :“[email protected]”，生日：'1/1/1980'}，{no:5，name: '用户5 ',地址： '山东济南，email :“[email protected]”，生日：'1/1/1980'}，{no:6，name: '用户6 ',地址： '山东济南，email:'[emailprotected]'，生日： ' 1/1/1980 ' }]}；$(函数(){ $('#tt ')).数据网格({ title: '可编辑数据网格，iconCls: '图标-编辑，宽度：530，高度：250，单行选择：第3360列[{字段： '否'，标题： '编号，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 : ' validate box '，options : { validate type : ' email ' } } }，{field: '生日，标题： '生日，width:80，editor:'datebox'}，{field:'action '，title: '操作，width:70，align:'center '，formatter:function(value，row，index){ if(row。编辑){ var s=' a href=' # ' onclick=' save row '(索引)保存/a '；var c=' a href=' # ' onclick='取消行('索引')取消/a '；返回s c；} else { var e=' a href=' # ' onclick=' editrow '(' index ')编辑/a '；var d=' a href=' # ' onclick=' delete row '(索引)删除/a '；返回e d；} } } ]]，toolbar:[{ text: '增加，iconcl : ' icon-add '，handler:addrow }，{ text: '保存，iconcl : ' icon-save '，handler:saveall }，{ text: '取消，iconcl : ' icon-cancel '，handler:cancelall，onBeforeEdit:function(索引，行){ row.editing=true$('#tt ').datagrid('refreshRow '，index)；editcount}，onAfterEdit:function(索引，行){ row.editing=false$('#tt ').datagrid('refreshRow '，index)；编辑计数-；}，onCancelEdit:function(索引，行){ row.editing=false$('#tt ').datagrid('refreshRow '，index)；编辑计数-；} }).datagrid('loadData '，用户)。datagrid('接受更改')；});var编辑计数=0；函数editrow(index){ $('#tt ').datagrid('beginEdit '，索引);}函数删除行(索引){ $。信使。确认('确认','是否真的删除？',函数(r){ if (r){ $('#tt ').datagrid('deleteRow '，索引);} });}函数保存行(索引){ $('#tt ').datagrid('endEdit '，index)；}函数cancel row(index){ $(“# TT”).datagrid('cancelEdit '，索引);}函数addrow(){ if(编辑计数0){ $。信使。警报('警告','当前还有'编辑计数'记录正在编辑，不能增加记录。');返回；} $('#tt ').datagrid('appendRow '，{ no: ' '，name: ' '，addr: ' '，email: ' '，生日： ' ' })；}函数saveall(){ $('#tt ').datagrid('接受更改')；}函数cancel(){ $(' # TT ').datagrid(' rejectChanges ')；}/脚本/头体氕可编辑的DataGrid/h1表id=' TT '/表/体/html