jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】


Posted in Javascript onDecember 19, 2016

前几天项目中遇到一个需求用到了Easyui datagrd行内添加和编辑数据,同时对行内数据上移下移,所以对这几个功能做个总结。

1、首先大概说下这几个功能里用到的主要方法,行内添加数据主要是添加列的editor属性, 行内编辑主要使用beginEdit(), endEdit(),同时一个关键就是拿到当前的操作行索引editIndex.

2、撤销用到了rejectChanges().

3、保存时使用getRows()或者getChanges(). getChanges()主要是获取添加或编辑的数据,getRows()获取到本页所有数据,主要是配合【上移】【下移】方法使用。

4、在做这个功能中我使用了一个序列化前台对象组件【json.js】,这个组件可以很方便的把前台的对象转化成json字符串,然后传到后台,实在是方便至极让我眼前一亮,要知道就在这个功能前面我还手动处理数组,使用join()拼字符串,当找到这个组件时速度效率一下几提起来了,实在是相见恨晚。

5、在做这个功能,用到这些方法时遇到的问题,刚开始时我是看easyui的官方demo,我发现添加数据后点保存,再点获取数据时就获取不到了,后经过测试发现好像是调用了acceptChanges()引起的问题。

function GetTable() {

  var editRow = undefined;

 

  $("#Student_Table").datagrid({

    height: 300,

    width: 450,

    title: '学生表',

    collapsible: true,

    singleSelect: true,

    url: '/Home/StuList',

    idField: 'ID',

    columns: [[

     { field: 'ID', title: 'ID', width: 100 },

      { field: 'Name', title: '姓名', width: 100, editor: { type: 'text', options: { required: true } } },

      { field: 'Age', title: '年龄', width: 100, align: 'center', editor: { type: 'text', options: { required: true } } },

      { field: 'Address', title: '地址', width: 100, align: 'center', editor: { type: 'text', options: { required: true } } }

    ]],

    toolbar: [{

      text: '添加', iconCls: 'icon-add', handler: function () {

        if (editRow != undefined) {

          $("#Student_Table").datagrid('endEdit', editRow);

        }

        if (editRow == undefined) {

          $("#Student_Table").datagrid('insertRow', {

            index: 0,

            row: {}

          });

          $("#Student_Table").datagrid('beginEdit', 0);

          editRow = 0;

        }

      }

    }, '-', {

      text: '保存', iconCls: 'icon-save', handler: function () {

        $("#Student_Table").datagrid('endEdit', editRow);

        //如果调用acceptChanges(),使用getChanges()则获取不到编辑和新增的数据。

        //使用JSON序列化datarow对象,发送到后台。

        var rows = $("#Student_Table").datagrid('getChanges');

        var rowstr = JSON.stringify(rows);

        $.post('/Home/Create', rowstr, function (data) {         

        });

      }

    }, '-', {

      text: '撤销', iconCls: 'icon-redo', handler: function () {

        editRow = undefined;

        $("#Student_Table").datagrid('rejectChanges');

        $("#Student_Table").datagrid('unselectAll');

      }

    }, '-', {

      text: '删除', iconCls: 'icon-remove', handler: function () {

        var row = $("#Student_Table").datagrid('getSelections');      

      }

    }, '-', {

      text: '修改', iconCls: 'icon-edit', handler: function () {

        var row = $("#Student_Table").datagrid('getSelected');

        if (row !=null) {

          if (editRow != undefined) {

            $("#Student_Table").datagrid('endEdit', editRow);

          }

          if (editRow == undefined) {

            var index = $("#Student_Table").datagrid('getRowIndex', row);

            $("#Student_Table").datagrid('beginEdit', index);

            editRow = index;

            $("#Student_Table").datagrid('unselectAll');

          }

        } else {         

        }

      }

    }, '-', {

      text: '上移', iconCls: 'icon-up', handler: function () {

        MoveUp();

      }

    }, '-', {

      text: '下移', iconCls: 'icon-down', handler: function () {

        MoveDown();

      }

    }],

    onAfterEdit: function (rowIndex, rowData, changes) {

      editRow = undefined;

    },

    onDblClickRow:function (rowIndex, rowData) {

      if (editRow != undefined) {

        $("#Student_Table").datagrid('endEdit', editRow);

      } 

      if (editRow == undefined) {

        $("#Student_Table").datagrid('beginEdit', rowIndex);

        editRow = rowIndex;

      }

    },

    onClickRow:function(rowIndex,rowData){

      if (editRow != undefined) {

        $("#Student_Table").datagrid('endEdit', editRow);

      }      

    }    

  }); 

}
<br><br>//上移

function MoveUp() {

  var row = $("#Student_Table").datagrid('getSelected'); 

  var index = $("#Student_Table").datagrid('getRowIndex', row);

  mysort(index, 'up', 'Student_Table');  

}

 
//下移

function MoveDown() {

  var row = $("#Student_Table").datagrid('getSelected');

  var index = $("#Student_Table").datagrid('getRowIndex', row);

  mysort(index, 'down', 'Student_Table');

}

function mysort(index, type, gridname) {

  if ("up" == type) {

    if (index != 0) {

      var toup = $('#' + gridname).datagrid('getData').rows[index];

      var todown = $('#' + gridname).datagrid('getData').rows[index - 1];

      $('#' + gridname).datagrid('getData').rows[index] = todown;

      $('#' + gridname).datagrid('getData').rows[index - 1] = toup;

      $('#' + gridname).datagrid('refreshRow', index);

      $('#' + gridname).datagrid('refreshRow', index - 1);

      $('#' + gridname).datagrid('selectRow', index - 1);

    }

  } else if ("down" == type) {

    var rows = $('#' + gridname).datagrid('getRows').length;

    if (index != rows - 1) {

      var todown = $('#' + gridname).datagrid('getData').rows[index];

      var toup = $('#' + gridname).datagrid('getData').rows[index + 1];

      $('#' + gridname).datagrid('getData').rows[index + 1] = todown;

      $('#' + gridname).datagrid('getData').rows[index] = toup;

      $('#' + gridname).datagrid('refreshRow', index);

      $('#' + gridname).datagrid('refreshRow', index + 1);

      $('#' + gridname).datagrid('selectRow', index + 1);

    }

  }

}
[HttpPost]

 public ActionResult Create()

 {

   string result = Request.Form[0];

    

   //后台拿到字符串时直接反序列化。根据需要自己处理

   var list = JsonConvert.DeserializeObject<List<Student>>(result);

 

   return Json(true);

 }

截图:

jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】

jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 #Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 #Javascript
Bootstrap的基本应用要点浅析
Dec 19 #Javascript
详解javascript获取url信息的常见方法
Dec 19 #Javascript
js封装tab标签页实例分享
Dec 19 #Javascript
jQuery焦点图轮播效果实现方法
Dec 19 #Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 #Javascript
You might like
php json_encode值中大括号与花括号区别
2013/09/30 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
Python如何访问字符串中的值
2020/02/09 Python
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
临床医学大学生求职信
2013/09/28 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
优秀大学生自荐信
2015/03/26 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
消防安全培训工作总结
2015/10/23 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP
mysql自增长id用完了该怎么办
2022/02/12 MySQL