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 相关文章推荐
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
全面解析Vue中的$nextTick
Dec 24 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
php实现留言板功能
2017/03/05 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
Python中数字以及算数运算符的相关使用
2015/10/12 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
生态养殖创业计划书
2014/05/06 职场文书
公司年会策划方案
2014/05/17 职场文书
承诺书范文
2014/06/03 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers