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脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
javascript轮播图算法
Oct 21 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
前端面试知识点目录一览
Apr 15 Javascript
原生JavaScript实现留言板
Jan 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
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP排序算法类实例
2015/06/17 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
Python基本语法经典教程
2016/03/11 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
Python线程创建和终止实例代码
2018/01/20 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
python调用私有属性的方法总结
2020/07/24 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
20岁生日感言
2014/01/13 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
应届毕业生自荐信
2014/05/28 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
幼师个人总结范文
2015/02/28 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS