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

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