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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
javascript的对话框详解与参数
Mar 08 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
js闭包的9个使用场景
Dec 29 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+mysql一个名片库程序
2006/10/09 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
关于尾递归的使用详解
2013/05/02 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
js实现登录与注册界面
2017/11/01 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
Python常用的日期时间处理方法示例
2015/02/08 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
python进行TCP端口扫描的实现
2018/12/21 Python
python lxml中etree的简单应用
2019/05/10 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
python 字段拆分详解
2019/12/17 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
Android笔试题总结
2014/11/29 面试题
简单的JAVA编程面试题
2013/03/19 面试题
竞选副班长演讲稿
2014/04/24 职场文书
踏青活动策划方案
2014/08/19 职场文书
党校毕业个人总结
2015/02/28 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
信仰观后感
2015/06/03 职场文书
酒桌上的祝酒词
2015/08/12 职场文书