datagrid的修改和删除功能的实现
1.修改
双击，进入一行的编辑状态的功能的实现
2.删除
3.扩展easyui的datagrid，添加动态增加或删除Editor的方法
（1）背景要求：
对于某一列，比如密码，动态增加时候，是可以编辑的，但是如果保存之后，再对那一行编辑的时候，是不能修改的。
（2）解决方案
扩展代码：
//扩展datagrid，添加动态增加或删除editor的方法 $.extend($.fn.datagrid.methods,{ addEditor:function(jq,param){ if(param instanceof Array){ $.each(param,function(index,item){ var e=$(jq).datagrid('getColumnOption',item.field); e.editor=item.editor; }); }else{ var e = $(jq).datagrid('getColumnOption', param.field); e.editor = param.editor; } }, removeEditor:function(jq,param){ if(param instanceof Array ){ $.each(param, function(index, item) { var e = $(jq).datagrid('getColumnOption', item); e.editor = {}; }); }else { var e = $(jq).datagrid('getColumnOption', param); e.editor = {}; } } });
代码：
<script charset=UTF-8"> $(function(){ //扩展datetimebox，由于editors里面没有datetimebox，所以要进行扩展 $.extend($.fn.datagrid.defaults.editors, { datetimebox: { init: function(container, options){ var editor = $('<input />').appendTo(container); options.editable=false; //在datetimebox 设置editable="false"，这样用户就不能填写时间，只能选择时间 editor.datetimebox(options); return editor; }, destroy: function(target){//结束编辑行的时候销毁datetimebox $(target).datetimebox('destroy'); }, getValue: function(target){ return $(target).datetimebox('getValue'); }, setValue: function(target, value){ $(target).datetimebox('setValue',value); }, resize: function(target, width){ $(target).datetimebox('resize',width); } } }); //扩展datagrid，添加动态增加或删除editor的方法 $.extend($.fn.datagrid.methods,{ addEditor:function(jq,param){ if(param instanceof Array){ $.each(param,function(index,item){ var e=$(jq).datagrid('getColumnOption',item.field); e.editor=item.editor; }); }else{ var e = $(jq).datagrid('getColumnOption', param.field); e.editor = param.editor; } }, removeEditor:function(jq,param){ if(param instanceof Array ){ $.each(param, function(index, item) { var e = $(jq).datagrid('getColumnOption', item); e.editor = {}; }); }else { var e = $(jq).datagrid('getColumnOption', param); e.editor = {}; } } }); var editRow=undefined; //用editRow存储开启编辑状态行的索引 var usersearchForm=$("#admin_user_searchForm").form();//获取表单元素的值 var userDatagrid=$("#admin_user_datagrid").datagrid({ //给datagrid初始化 url:'', title:'用户列表', iconCls:'icon-save', pagination:true, //分页 pagesize:10, //每页有10行数据 pageList:[10,20,30,40], //注意这些数值是pagesize的倍数 fit:true, fitColumns:false, //false,表示会出现横向滚动条；true,则表示不能出现横向滚动条(列少的时候用) nowarp:false, //当表格中某一行的一个列内容较多时，就会自动折行（换下一行显示） border:false, //去掉datagrid的边框 idField:'id', //自动标记选中的行，换页后，前面所选中的行依然保留 columns:[[ { title:'编号', field:'id', width:100, //宽度一定要给出，不给出会报错 sortable:true, checkbox:true, //选中框 },{ title:'姓名', field:'name', width:100, sortable:true, editor:{ type:'validatebox', options:{ required:true } } },{ title:'密码', field:'password', width:100, editor:{ type:'validatebox', options:{ required:true } } },{ title:'创建时间', field:'createdatetime', width:200, editor:{ type:'datetimebox', options:{ required:true } } },{ title:'最后修改时间', field:'modifydatetime', width:200, editor:{ type:'datetimebox', options:{ required:true } } } ]], toolbar:[{ text:'增加', iconCls:'icon-add', handler:function(){ if(editRow != undefined){//如果有一行处在编辑状态，那么点击增加按钮时候，就要关闭它的行编辑状态 userDatagrid.datagrid('endEdit',editRow); } if(editRow == undefined){//保持只有一行处在编辑状态，即==undefined的时候，才让其进行添加新的一行 //***动态添加editor userDatagrid.datagrid('addEditor',{ field:'password', editor:{ type:'validatebox', options:{ required:true } } }); //添加到第一行 userDatagrid.datagrid('insertRow',{ index:0,//插入在第一行，index是从0开始的 row:{ id:'123', name:'请输入姓名', password:'请输入密码' } }); userDatagrid.datagrid('beginEdit',0);//开启行编辑状态,index是从0开始的，从第0行开始编辑 editRow=0; //记录开启编辑行的索引 } } },'-',{ text:'删除', iconCls:'icon-remove', handler:function(){ var rows=userDatagrid.datagrid('getSelections');//记录选中的行数 if(rows.length>0){ $.messager.confirm('请确认','您确定要删除当前所有选择的项目么？',function(b){//当点击提示框的确定按钮的时候，b就是true if(b){ var ids=[];//将要删除的行的id存放在ids中 for(var i=0;i<row.length;i++){ ids.push(rows[i].id); } /*此处与后台交互删除*/ console.info(ids.join(',')); } }); }else{ $.messager.alert('提示','请选择要删除的记录！','error'); } } },'-',{ text:'修改', iconCls:'icon-edit', handler:function(){ var rows=userDatagrid.datagrid('getSelections');//记录选中的行数 if(rows.length==1){ //***动态修改editor userDatagrid.datagrid('removeEditor','password'); if(editRow != undefined){//如果有一行处在编辑状态，那么点击增加按钮时候，就要关闭它的行编辑状态 userDatagrid.datagrid('endEdit',editRow); } if(editRow == undefined){//保持只有一行处在编辑状态，即==undefined的时候，才让其进行添加新的一行 var index=userDatagrid.datagrid('getRowIndex',rows[0]);//记录所选择行的索引，rows[0]表示一行 userDatagrid.datagrid('beginEdit',index);//开启行编辑状态 editRow=index; //记录开启编辑行的索引 userDatagrid.datagrid('unselectAll'); //取消选中当前页所有的行 } } } },'-',{ text:'保存', iconCls:'icon-save', handler:function(){ userDatagrid.datagrid('endEdit',editRow);//点击保存按钮，调用endEdit方法之后，就会自动触发调用onAfterEdit函数 } },'-',{ text:'取消编辑', iconCls:'icon-redo', handler:function(){ editRow=undefined; userDatagrid.datagrid('rejectChanges'); //rejectChanges回滚 userDatagrid.datagrid('unselectAll'); //取消选中当前页所有的行 } },'-', ], onAfterEdit:function(rowIndex,rowData,changes){//关闭编辑状态,rowData是编辑行所对应的记录 console.info(rowData); editRow=undefined; //将editRow置空，让其恢复原来的状态，因为在点击增加的时候，editRow就不为空了 //*****与后台交互的位置**** /* $.ajax(); success:function(rowData){}*/ }, //****双击，进入一行的行编辑状态*** onDblClickRow:function(rowIndex,rowData){ if(editRow != undefined){//如果有一行处在编辑状态，那么点击增加按钮时候，就要关闭它的行编辑状态 userDatagrid.datagrid('endEdit',editRow); } if(editRow == undefined){//保持只有一行处在编辑状态，即==undefined的时候，才让其进行添加新的一行 userDatagrid.datagrid('beginEdit',rowIndex);//开启行编辑状态 editRow=rowIndex; //记录开启编辑行的索引 } } }); $("#searchForm").click(function(){//查询 userDatagrid.datagrid('load',serializeObject(usersearchForm)); }); $("#cleanForm").click(function(){ userDatagrid.datagrid('load',{});//就是查询所有的内容了，相当于恢复到初始的界面 usersearchForm.find('input').val('');//将input输入框里面的值清空了 }); }); function serializeObject(form){//将form表单元素的值序列化成对象 var o={}; $.each(form.serializeArray(),function(index){ if(o[this['name']]){ o[this['name']]=o[this['name']]+","+this['value']; }else{ o[this['name']]=this['value']; } }); return o; }; </script> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <div class="easyui-layout" fit="true" border="false"> <div region="north" border="false" title="过滤" style="height:120px;overflow:hidden;"> <form id="admin_user_searchForm"> <table class="tableForm datagrid-toolbar" style="height:100%;width:100%"> <tr> <th>用户名：</th> <td><input name="name" style="width:315px;"></td> </tr> <tr> <th>创建时间：</th> <td><input name="createdatetimeStart" class="easyui-datetimebox" editable="false" style="width:155px;">至<input name="createdatetimeEnd" class="easyui-datetimebox" editable="false" style="width:155px;"></td> </tr> <tr> <th>最后修改时间：</th> <td><input name="madifydatetimeStart" class="easyui-datetimebox" editable="false" style="width:155px;">至<input name="madifydatetimeEnd" class="easyui-datetimebox" editable="false" style="width:155px;"> <a href="javascript:void(0);" class="easyui-linkbutton" id="searchForm">查询</a> <a href="javascript:void(0);" class="easyui-linkbutton" id="cleanForm">清空</a> </td> </tr> </table> </form> </div> <div region="center" border="false"> <table id="admin_user_datagrid"></table> </div> </div>
