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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jQuery实现本地存储
Dec 22 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
jquery图片切换插件
2015/03/16 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
js实现下一页页码效果
2017/03/07 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
python统计日志ip访问数的方法
2015/07/06 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
Python中Threading用法详解
2017/12/27 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
python字符串与url编码的转换实例
2018/05/10 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
pycharm导入源码的具体步骤
2020/08/04 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
小学六年级学生评语
2014/04/22 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android