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]点出统计器
Oct 11 Javascript
JQuery 学习技巧总结
May 21 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
详解vue路由
Aug 05 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
jQuery中调用WebService方法小结
2011/03/28 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
Django model反向关联名称的方法
2018/12/15 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
python如何代码集体右移
2020/07/20 Python
用Python进行websocket接口测试
2020/10/16 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
四年大学生活的自我评价范文
2014/02/07 职场文书
个人函授自我鉴定
2014/03/25 职场文书
班级出游活动计划书
2014/08/15 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
python 实现的截屏工具
2021/05/08 Python
pytorch Dropout过拟合的操作
2021/05/27 Python
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python