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


Posted in jQuery onSeptember 20, 2018

神马是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 相关文章推荐
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 #jQuery
jQuery使用each遍历循环的方法
Sep 19 #jQuery
jquery 动态遍历select 赋值的实例
Sep 12 #jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 #jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 #jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 #jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 #jQuery
You might like
php cli 方式 在crotab中运行解决
2010/02/08 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
js表单序列化判断空值的实例
2017/09/22 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Python实现拼接多张图片的方法
2014/12/01 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
python装饰器代码深入讲解
2021/03/01 Python
小学教师自我鉴定
2013/11/07 职场文书
会计专业自我鉴定
2014/02/10 职场文书
如何写求职信
2014/05/24 职场文书
升学宴学生致辞
2015/07/27 职场文书
思想工作总结范文
2015/08/12 职场文书
四年级数学教学反思
2016/02/16 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
asyncio异步编程之Task对象详解
2022/03/13 Python
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python