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 相关文章推荐
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
js电话号码验证方法
Sep 28 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
详解Node.js中的Async和Await函数
Feb 22 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
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
重置版游戏视频
2020/04/09 魔兽争霸
php中$this-&amp;gt;含义分析
2009/11/29 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
JQuery中getJSON的使用方法
2010/12/13 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
讲解Python中的标识运算符
2015/05/14 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python实现感知机(PLA)算法
2017/12/20 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
pycharm显示远程图片的实现
2019/11/04 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
印度购物网站:TATA CLiQ
2017/11/23 全球购物
会展中心部门工作职责
2013/11/27 职场文书
副总经理工作职责
2013/11/28 职场文书
办理房产过户的委托书
2014/09/14 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
Python基础之Socket通信原理
2021/04/22 Python
python中的None与NULL用法说明
2021/05/25 Python