jQuery easyui datagird编辑行删除行功能的实现代码
程序员文章站
2022-11-13 08:12:22
神马是easyui
jquery easyui是一组基于jquery的ui插件集合,而jquery easyui的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的...
神马是easyui
jquery easyui是一组基于jquery的ui插件集合,而jquery easyui的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的ui界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。
jquery easyui为我们提供了大多数ui控件的使用,如:accordion,combobox,menu,dialog,tabs,tree,validatebox,window等等。
下面通过代码看下easyui datagird编辑行删除行功能,具体代码如下所示:
function init(){ var editrow = undefined; var oldmoney = undefined; $("#dg").datagrid({ url:"../foreignexchange/fexledgermanager.do?method=queryapplydata&parentid="+parentid, fitcolumns:false,//自适应宽度,占满,不能和冻结列同时设置成true striped:true, //斑马线效果 singleselect:false, //是否单选 pagination:false, height:140, columns:[[ {field:"id", title:"主键", width:'10', align:"center",hidden:true}, {field:"applyno", title:"申报单号", width:'250', align:"center",editor: { type: 'validatebox', options: { required: true } }}, {field:"exemoneystring", title:"执行金额", width:'200', align:"center",editor: { type: 'moneybox', options: {precision:2, required: true } }}, {field:"exchangerate", title:"执行汇率(%)", width:'210', align:"center",editor: { type: 'numberbox', options: {precision:5, required: true } }}, {field:"submitdate", title:"提交日期", width:'190', align:"center",editor: { type: 'datebox', options: { required: true } }}, {field:"executedate", title:"执行日期", width:'190', align:"center",editor: { type: 'datebox', options: { required: true } }} ]], toolbar: [{ text: '添加', iconcls: 'icon-add', handler: function () { if (editrow != undefined) { $("#dg").datagrid('endedit', editrow); } if (editrow == undefined) { var submitdate = $("#submitdate").val(); $("#dg").datagrid('insertrow', { index: 0, row: {submitdate:submitdate} }); $("#dg").datagrid('beginedit', 0); editrow = 0; } } }, /*'-', { text: '撤销', iconcls: 'icon-redo', handler: function () { editrow = undefined; $("#dg").datagrid('rejectchanges'); $("#dg").datagrid('unselectall'); } },*/ '-', { text: '删除', iconcls: 'icon-remove', handler: function () { var row = $("#dg").datagrid('getselected'); if(row){ var index = $("#dg").datagrid("getrowindex",row); $("#dg").datagrid('deleterow',index); }else{ $("#dg").datagrid('endedit', 0); $("#dg").datagrid('deleterow',0); editrow = undefined; } } }, '-', { text: '修改', iconcls: 'icon-edit', handler: function () { var row = $("#dg").datagrid('getselected'); oldmoney = row.exemoneystring; if (row !=null) { if (editrow != undefined) { $("#dg").datagrid('endedit', editrow); } if (editrow == undefined) { var index = $("#dg").datagrid('getrowindex', row); $("#dg").datagrid('beginedit', index); editrow = index; $("#dg").datagrid('unselectall'); } } else { } } }, '-', { text: '保存', iconcls: 'icon-save', handler: function () { var operow = editrow; $("#dg").datagrid('endedit', editrow); var rows = $("#dg").datagrid('getchanges'); if(!rows ||rows.length==0){ alert("无修改数据,无需保存!"); return false; } var allrows = $("#dg").datagrid('getdata'); var executemoney = $("#executemoney").val(); var sum = 0; var money = 0; $.each(allrows.rows,function(i,row){ row.parentid = parentid; money = formatmeony(row.exemoneystring); sum+=money; }); if(sum>executemoney){ alert("执行金额超出台账登记执行金额!"); if(oldmoney){ $("#dg").datagrid('updaterow', { index: operow, row: {exemoneystring:oldmoney} }); } $("#dg").datagrid('beginedit', operow); $("#dg").datagrid('unselectall'); return false; } //新增 var addrows = $("#dg").datagrid('getchanges','inserted'); //修改 var updaterows = $("#dg").datagrid('getchanges','updated'); //删除 var delrows = $("#dg").datagrid('getchanges','deleted'); var addorupdate = $.merge(addrows,updaterows); var addorupdatestr = json.stringify(addorupdate); var delrowsstr = json.stringify(delrows); $.ajax({ type:'post', url:'../foreignexchange/fexledgermanager.do', data : { "method" : $("#method").val(), "addorupdatestr" : addorupdatestr, "delrowsstr" : delrowsstr }, cache:false, datatype:'json', success:function(data){ if(data.success){ alert(data.msg); init(); }else{ alert(data.msg); } } }); } }], onafteredit: function (rowindex, rowdata, changes) { editrow = undefined; }, ondblclickrow:function (rowindex, rowdata) { if (editrow != undefined) { $("#dg").datagrid('endedit', editrow); } if (editrow == undefined) { $("#dg").datagrid('beginedit', rowindex); editrow = rowindex; var row = $("#dg").datagrid('getselected'); oldmoney = row.exemoneystring; } }, onclickrow:function(rowindex,rowdata){ if (editrow != undefined) { $("#dg").datagrid('endedit', editrow); } } }); } function formatmeony(value){ var money =value; var temp = money.split(","); var result = ""; var value = 0; var size = temp.length; for (var j = 0; j < size; j++) { result = result + temp[j]; } value = parsefloat(result); return value; }
总结
以上所述是小编给大家介绍的jquery easyui datagird编辑行删除行功能的实现代码,希望对大家有所帮助
推荐阅读
-
jQuery实现html table行Tr的复制、删除、计算功能
-
jQuery easyui datagird编辑行删除行功能的实现代码
-
jQuery实现html table行Tr的复制、删除、计算功能
-
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能的代码案例
-
jQuery easyui datagird编辑行删除行功能的实现代码
-
jQuery仅用3行代码实现的显示与隐藏功能完整实例_jquery
-
关于jQuery实现html table行Tr的复制、删除、计算功能
-
jquery-easyui中datagrid表格的行编辑功能
-
关于jQuery实现html table行Tr的复制、删除、计算功能
-
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能的代码案例