当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery easyui datagird编辑行删除行功能的实现代码

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

2018年10月07日  | 移动技术网IT编程  | 我要评论

神马是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编辑行删除行功能的实现代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网