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 相关文章推荐
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
vue实现文字加密功能
Sep 27 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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打印输出函数汇总
2016/08/28 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
python删除列表内容
2015/08/04 Python
python入门教程之识别验证码
2017/03/04 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
python中字符串内置函数的用法总结
2018/09/13 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
考试违纪检讨书
2014/02/02 职场文书
丑小鸭教学反思
2014/02/03 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
2015年基层党建工作总结
2015/05/14 职场文书