欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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