EasyUI中的dataGrid的行内编辑


Posted in Javascript onJune 22, 2017

这个js代码是别人写的,可能不是最好的,但我个人觉得首先能帮助别人解决功能问题的话就特别好。我稍加修改后用在了自己的项目上了,这里贴出来分享一下。后台用的TinkPHP因为都是查增删改比较简单,这里就不贴了。前台效果图因为比较懒,也不贴了。

$(function () {
    var datagrid; //定义全局变量datagrid
    var editRow = undefined; //定义全局变量:当前编辑的行
    datagrid = TskupluAddPacket.datagrid({
        url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //请求的数据源
        iconCls: 'icon-save', //图标
        pagination: true, //显示分页
        pageSize: 15, //页大小
        pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数
        fit: true, //datagrid自适应宽度
        fitColumn: false, //列自适应宽度
        striped: true, //行背景交换
        nowap: true, //列内容多时自动折至第二行
        border: false,
        idField: 'packetid', //主键
        sortName : 'packetid',                                  //排序字段
        sortOrder : 'desc',                  //排序方式
        columns: [[//显示的列
            {field: 'packetid', title: 'ID', width: 100, sortable: true, checkbox: true },
            { field: 'packunit', title: '包装单位', width: 100, sortable: true,
                editor: { type: 'validatebox', options: { required: true} }
            },
            { field: 'packqty', title: '包装细数', width: 100,
                editor: { type: 'validatebox', options: { required: true} }
            },
            { field: 'packspec', title: '包装规格', width: 100,
                editor: { type: 'validatebox', options: { required: true} }
            }
        ]],
        queryParams: { 
          pluid: $('#addpluid').val()
        }, //查询参数
        toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加,修改,删除等
            //添加时如果没有正在编辑的行,则在datagrid的第一行插入一行
            if (editRow == undefined) {                     
                datagrid.datagrid("insertRow", {
                    index: 0, // index start with 0
                    row: {}
                });          
                //将新插入的那一行开户编辑状态
                datagrid.datagrid("beginEdit", 0);
                //给当前编辑的行赋值
                editRow = 0;
            }
        }
        }, '-',
        { text: '删除', iconCls: 'icon-remove', 
          handler: function () {
             //删除时先获取选择行
             var rows = datagrid.datagrid("getSelections");
             //选择要删除的行
             if (rows.length > 0) {
                $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                  if (r) {
                    var ids = [];
                    for (var i = 0; i < rows.length; i++) {
                      ids.push(rows[i].packetid);
                    }
                    //将选择到的行存入数组并用,分隔转换成字符串,
                    //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id
                    //alert(ids.join(','));
                    $.ajax({
                      url : ThinkPHP['MODULE'] + '/Tskuplu/deletePacket',
                      type : 'POST',
                      data : {
                        ids : ids.join(',')
                      },
                      beforeSend : function (){
                        $.messager.progress({
                          text : '正在处理中...'
                        });  
                      },
                      success : function (data){
                        $.messager.progress('close');
                        if (data >0){
                          datagrid.datagrid('reload');
                          $.messager.show({
                            title : '操作提醒',
                            msg  : data + '条数据被成功删除!'
                          })
                        } else if( data == -999 ) {
                          $.messager.alert('删除失败', '对不起,您没有权限!', 'warning');
                        } else {
                          $.messager.alert('删除失败', '没有删除任何数据!', 'warning');
                        }
                      }
                    });                  
                  }
                });
             } else {
                $.messager.alert("提示", "请选择要删除的行", "error");
             } 
          }
        }, '-',
        { text: '修改', iconCls: 'icon-edit', 
          handler: function () {
            //修改时要获取选择到的行
            var rows = datagrid.datagrid("getSelections");
            //如果只选择了一行则可以进行修改,否则不操作
            if (rows.length == 1) {
              //当无编辑行时
              if (editRow == undefined) {
                //获取到当前选择行的下标
                var index = datagrid.datagrid("getRowIndex", rows[0]);
                //开启编辑
                datagrid.datagrid("beginEdit", index);
                //把当前开启编辑的行赋值给全局变量editRow
                editRow = index;
                //当开启了当前选择行的编辑状态之后,
                //应该取消当前列表的所有选择行,要不然双击之后无法再选择其他行进行编辑
                datagrid.datagrid("unselectAll");
              }
            }
          }
        }, '-',
        { text: '保存', iconCls: 'icon-save', 
          handler: function () {
             //保存时结束当前编辑的行,自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
             datagrid.datagrid("endEdit", editRow); 
             editRow = undefined;
          }
        }, '-',
        { text: '取消编辑', iconCls: 'icon-redo', 
          handler: function () {
             //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
             editRow = undefined;
             datagrid.datagrid("rejectChanges");
             datagrid.datagrid("unselectAll");
          }
        }, '-'],
        onAfterEdit: function (rowIndex, rowData, changes) {
          //endEdit该方法触发此事件           
          //var row = datagrid.datagrid("getData").rows[rowIndex]; //获取某一行的值 
          var inserted = datagrid.datagrid('getChanges','inserted');
          var updated = datagrid.datagrid('getChanges','updated');
          if(inserted.length < 1 && updated.length <1){
            editRow = undefined;
            datagrid.datagrid('unselectAll');
            return;
          }
          var url = '';
          if(inserted.length>0){
            url=ThinkPHP['MODULE'] + '/Tskuplu/addPacket';
          }
          if(updated.length>0){
            url=ThinkPHP['MODULE'] + '/Tskuplu/updatePacket';
          }
          $.ajax({
            url : url,
            type : 'POST',
            data : {
              'pluid': $('#addpluid').val(),
              'packetid':rowData.packetid,
              'packunit':rowData.packunit,
              'packqty' :rowData.packqty,
              'packspec':rowData.packspec
            },
            beforeSend : function (){
              $.messager.progress({
                text : '正在处理中...'
              })
            },
            success : function (data){
              $.messager.progress('close');
              if (data > 0){ 
                datagrid.datagrid("acceptChanges"); 
                $.messager.show({
                  title : '操作提示',
                  msg : '添加成功'
                });      
                editRow = undefined;
                datagrid.datagrid("reload"); 
                $('#addcheck').val(1);
              } else if (data == -999) {
                $.messager.alert('添加失败', '抱歉!您没有权限!', 'warning');
              } else {
                datagrid.datagrid("beginEdit",editRow); 
                $.messager.alert('警告操作', '未知错误!请重新刷新后提交!', 'warning');
              }
              datagrid.datagrid("unselectAll"); 
            }
          });
          //////////////////                         
        },
        onDblClickRow: function (rowIndex, rowData) {
        //双击开启编辑行
          if (editRow == undefined) {
              datagrid.datagrid("beginEdit", rowIndex);
              editRow = rowIndex;
          }
        }
    });   
  });

以上所述是小编给大家介绍的EasyUI中的dataGrid的行内编辑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
XENON基于JSON变种
Jul 27 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 #Javascript
vue 请求后台数据的实例代码
Jun 22 #Javascript
深入理解vue.js中的v-if和v-show
Jun 22 #Javascript
vue如何从接口请求数据
Jun 22 #Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 #Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 #Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 #Javascript
You might like
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
php向js函数传参的几种方法
2014/08/10 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
Javascript的this详解
2019/03/23 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
python实现堆栈与队列的方法
2015/01/15 Python
详解python eval函数的妙用
2017/11/16 Python
Python3解释器知识点总结
2019/02/19 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
英国综合网上购物商城:The Hut
2018/07/03 全球购物
青年创业培训欢迎词
2014/01/08 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
关于颐和园的导游词
2015/01/30 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
tomcat下部署jenkins的方法
2022/05/06 Servers