EasyUI中的dataGrid的行内编辑
这个js代码是别人写的,可能不是最好的,但我个人觉得首先能帮助别人解决功能问题的话就特别好。我稍加修改后用在了自己的项目上了,这里贴出来分享一下。后台用的TinkPHP因为都是查增删改比较简单,这里就不贴了。前台效果图因为比较懒,也不贴了。
$(function(){ vardatagrid;//定义全局变量datagrid vareditRow=undefined;//定义全局变量:当前编辑的行 datagrid=TskupluAddPacket.datagrid({ url:ThinkPHP['MODULE']+'/Tskuplu/getPacketList',//请求的数据源 iconCls:'icon-save',//图标 pagination:true,//显示分页 pageSize:15,//页大小 pageList:[15,30,45,60],//页大小下拉选项此项各value是pageSize的倍数 fit:true,//datagrid自适应宽度 fitColumn:false,//列自适应宽度 striped:true,//行背景交换 nowap:true,//列内容多时自动折至第二行 border:false, idField:'packetid',//主键 sortName:'packetid',//排序字段 sortOrder:'desc',//排序方式 columns:[[//显示的列 {field:'packetid',title:'ID',width:100,sortable:true,checkbox:true}, {field:'packunit',title:'包装单位',width:100,sortable:true, editor:{type:'validatebox',options:{required:true}} }, {field:'packqty',title:'包装细数',width:100, editor:{type:'validatebox',options:{required:true}} }, {field:'packspec',title:'包装规格',width:100, editor:{type:'validatebox',options:{required:true}} } ]], queryParams:{ pluid:$('#addpluid').val() },//查询参数 toolbar:[{text:'添加',iconCls:'icon-add',handler:function(){//添加列表的操作按钮添加,修改,删除等 //添加时如果没有正在编辑的行,则在datagrid的第一行插入一行 if(editRow==undefined){ datagrid.datagrid("insertRow",{ index:0,//indexstartwith0 row:{} }); //将新插入的那一行开户编辑状态 datagrid.datagrid("beginEdit",0); //给当前编辑的行赋值 editRow=0; } } },'-', {text:'删除',iconCls:'icon-remove', handler:function(){ //删除时先获取选择行 varrows=datagrid.datagrid("getSelections"); //选择要删除的行 if(rows.length>0){ $.messager.confirm("提示","你确定要删除吗?",function(r){ if(r){ varids=[]; for(vari=0;i0){ datagrid.datagrid('reload'); $.messager.show({ title:'操作提醒', msg:data+'条数据被成功删除!' }) }elseif(data==-999){ $.messager.alert('删除失败','对不起,您没有权限!','warning'); }else{ $.messager.alert('删除失败','没有删除任何数据!','warning'); } } }); } }); }else{ $.messager.alert("提示","请选择要删除的行","error"); } } },'-', {text:'修改',iconCls:'icon-edit', handler:function(){ //修改时要获取选择到的行 varrows=datagrid.datagrid("getSelections"); //如果只选择了一行则可以进行修改,否则不操作 if(rows.length==1){ //当无编辑行时 if(editRow==undefined){ //获取到当前选择行的下标 varindex=datagrid.datagrid("getRowIndex",rows[0]); //开启编辑 datagrid.datagrid("beginEdit",index); //把当前开启编辑的行赋值给全局变量editRow editRow=index; //当开启了当前选择行的编辑状态之后, //应该取消当前列表的所有选择行,要不然双击之后无法再选择其他行进行编辑 datagrid.datagrid("unselectAll"); } } } },'-', {text:'保存',iconCls:'icon-save', handler:function(){ //保存时结束当前编辑的行,自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台 datagrid.datagrid("endEdit",editRow); editRow=undefined; } },'-', {text:'取消编辑',iconCls:'icon-redo', handler:function(){ //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行 editRow=undefined; datagrid.datagrid("rejectChanges"); datagrid.datagrid("unselectAll"); } },'-'], onAfterEdit:function(rowIndex,rowData,changes){ //endEdit该方法触发此事件 //varrow=datagrid.datagrid("getData").rows[rowIndex];//获取某一行的值 varinserted=datagrid.datagrid('getChanges','inserted'); varupdated=datagrid.datagrid('getChanges','updated'); if(inserted.length<1&&updated.length<1){ editRow=undefined; datagrid.datagrid('unselectAll'); return; } varurl=''; if(inserted.length>0){ url=ThinkPHP['MODULE']+'/Tskuplu/addPacket'; } if(updated.length>0){ url=ThinkPHP['MODULE']+'/Tskuplu/updatePacket'; } $.ajax({ url:url, type:'POST', data:{ 'pluid':$('#addpluid').val(), 'packetid':rowData.packetid, 'packunit':rowData.packunit, 'packqty':rowData.packqty, 'packspec':rowData.packspec }, beforeSend:function(){ $.messager.progress({ text:'正在处理中...' }) }, success:function(data){ $.messager.progress('close'); if(data>0){ datagrid.datagrid("acceptChanges"); $.messager.show({ title:'操作提示', msg:'添加成功' }); editRow=undefined; datagrid.datagrid("reload"); $('#addcheck').val(1); }elseif(data==-999){ $.messager.alert('添加失败','抱歉!您没有权限!','warning'); }else{ datagrid.datagrid("beginEdit",editRow); $.messager.alert('警告操作','未知错误!请重新刷新后提交!','warning'); } datagrid.datagrid("unselectAll"); } }); ////////////////// }, onDblClickRow:function(rowIndex,rowData){ //双击开启编辑行 if(editRow==undefined){ datagrid.datagrid("beginEdit",rowIndex); editRow=rowIndex; } } }); });
以上所述是小编给大家介绍的EasyUI中的dataGrid的行内编辑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!