EasyUI中的dataGrid的行内编辑

前端之家收集整理的这篇文章主要介绍了EasyUI中的dataGrid的行内编辑前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这个js代码是别人写的,可能不是最好的,但我个人觉得首先能帮助别人解决功能问题的话就特别好。我稍加修改后用在了自己的项目上了,这里贴出来分享一下。后台用的TinkPHP因为都是查增删改比较简单,这里就不贴了。前台效果图因为比较懒,也不贴了。

0) { $.messager.confirm("提示","你确定要删除吗?",function (r) { if (r) { var ids = []; for (var i = 0; i < rows.length; i++) { ids.push(rows[i].packetid); } //将选择到的行存入数组并用,分隔转换成字符串, //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id //alert(ids.join(',')); $.ajax({ url : ThinkPHP['MODULE'] + '/Tskuplu/deletePacket',type : 'POST',data : { ids : ids.join(',') },beforeSend : function (){ $.messager.progress({ text : '正在处理中...' }); },success : function (data){ $.messager.progress('close'); if (data >0){ datagrid.datagrid('reload'); $.messager.show({ title : '操作提醒',msg : data + '条数据被成功删除!' }) } else if( data == -999 ) { $.messager.alert('删除失败','对不起,您没有权限!','warning'); } else { $.messager.alert('删除失败','没有删除任何数据!','warning'); } } }); } }); } else { $.messager.alert("提示","请选择要删除的行","error"); } } },{ text: '修改',iconCls: 'icon-edit',handler: function () { //修改时要获取选择到的行 var rows = datagrid.datagrid("getSelections"); //如果只选择了一行则可以进行修改,否则不操作 if (rows.length == 1) { //当无编辑行时 if (editRow == undefined) { //获取到当前选择行的下标 var index = 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该方法触发此事件 //var row = datagrid.datagrid("getData").rows[rowIndex]; //获取某一行的值 var inserted = datagrid.datagrid('getChanges','inserted'); var updated = datagrid.datagrid('getChanges','updated'); if(inserted.length < 1 && updated.length <1){ editRow = undefined; datagrid.datagrid('unselectAll'); return; } var url = ''; if(inserted.length>0){ url=ThinkPHP['MODULE'] + '/Tskuplu/addPacket'; } if(updated.length>0){ url=ThinkPHP['MODULE'] + '/Tskuplu/updatePacket'; } $.ajax({ url : url,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); } else if (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的行内编辑。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章