首页 > 编程 > JavaScript > 正文

jQuery easyui datagird编辑行删除行功能的实现代码

2019-11-19 12:53:18
字体:
来源:转载
供稿:网友

神马是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编辑行删除行功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表