首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery Easyui Datagrid实现批量操作（编辑，删除，添加）

Posted in Javascript onFebruary 20, 2017

有时候我们的后台系统表单比较复杂，做过进销存或者一些销售订单的都应该有过感觉。

虽然Easyui Datagrid提供了行内编辑，但是不够灵活，但是我们稍微修改一下来达到批量编辑,批量删除,批量添加的效果。

现在我们来看看原的编辑:来自Easyui 1.5.1的Demo <demo/datagrid/rowediting.html>

jquery Easyui Datagrid实现批量操作（编辑，删除，添加）

接下来，我们主要是要高度自由的编辑实现：

1.可以同时追加多行

2.追加的行可以是任何位置

3.可以随时进行编辑任意位置的行

4.保存再统一验证

实现

在原有的rowediting.html进行修改！

第一：修改行的点击事件（点击行的时候进入编辑状态）

function onClickCell(index, field){
   if (editIndex != index) {
    if (endEditing()) {
     $('#dg').datagrid('selectRow', index)
       .datagrid('beginEdit', index);
     var ed = $('#dg').datagrid('getEditor', { index: index, field: field });
     if (ed) {
      ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
     }
     editIndex = index;
    } else {
     setTimeout(function () {
      $('#dg').datagrid('selectRow', editIndex);
     }, 0);
    }
   }
  }

jquery Easyui Datagrid实现批量操作（编辑，删除，添加）

第二：删除事件（点击顶部菜单Remove删除选中的行，点击列表的-号，删除减号行）

function removeit(){
   if (editIndex == undefined){return}
   $('#dg').datagrid('selectRow', editIndex);

    $('#dg').datagrid('cancelEdit', editIndex)
     .datagrid('deleteRow', editIndex);
   editIndex = undefined;
  }

jquery Easyui Datagrid实现批量操作（编辑，删除，添加）

第三：添加事件，点击菜单的Append和+号

function append(){
   var index = $('#dg').datagrid('getRowIndex', $('#dg').datagrid('getSelected'));
   if (index == -1)
    index = 0;
   $("#dg").datagrid("insertRow", {
    index: index+1,
    row: {oper: "<a href='javascript:append()'>+<a> <a href='javascript:removeit()'>-<a>",status:'P'}
    });
  }

jquery Easyui Datagrid实现批量操作（编辑，删除，添加）

第四：保存（获得操作的记录，包括，增加，修改，删除中的记录）

function accept(){
   if (endEditing()){
    var $dg = $('#dg');
    var rows = $dg.datagrid('getChanges');
    if (rows.length) {
     var inserted = $dg.datagrid('getChanges', "inserted");
     var deleted = $dg.datagrid('getChanges', "deleted");
     var updated = $dg.datagrid('getChanges', "updated");
     var effectRow = new Object();
     if (inserted.length) {
      effectRow["inserted"] = JSON.stringify(inserted);
     }
     if (deleted.length) {
      effectRow["deleted"] = JSON.stringify(deleted);
     }
     if (updated.length) {
      effectRow["updated"] = JSON.stringify(updated);
     }
     //alert(inserted);
     //alert(deleted);
     //alert(updated);
    }
   }
   //$.post("/Home/Commit", effectRow, function (rsp) {
   // if (rsp) {
   //  $dg.datagrid('acceptChanges');
   //  bindData();
   // }
   //}, "JSON").error(function () {
   // $.messager.alert("提示", "提交错误了！");
   //});
  }

最后我们可以获得，上面操作的，所有：添加的行，删除的行，更新的行！把数据传入到数据后台进行处理！

最后你还需要对数据进行循环校验,可以获得数据，在控制台输出：

console.log(inserted);
console.log(deleted);
console.log(updated);

jquery Easyui Datagrid实现批量操作（编辑，删除，添加）

总结：

最后完整代码：（替换Easyui的rowediting.html可运行效果）

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Row Editing in DataGrid - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../../themes/icon.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../demo.css" rel="external nofollow" >
 <script type="text/javascript" src="../../jquery.min.js"></script>
 <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>

 

 <h2>Row Editing in DataGrid</h2>
 <p>Click the row to start editing.</p>
 <div style="margin:20px 0;"></div>
 
 <table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:800px;height:auto"
   data-options="
    iconCls: 'icon-edit',
    singleSelect: true,
    toolbar: '#tb',
    url: 'datagrid_data1.json',
    method: 'get',
    onClickCell: onClickCell,
    onEndEdit: onEndEdit
   ">
  <thead>
   <tr>
    <th data-options="field:'oper',width:80">操作</th>
    <th data-options="field:'itemid',width:80">Item ID</th>
    <th data-options="field:'productid',width:100,
      formatter:function(value,row){
       return row.productname;
      },
      editor:{
       type:'combobox',
       options:{
        valueField:'productid',
        textField:'productname',
        method:'get',
        url:'products.json',

       }
      }">Product</th>
    <th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
    <th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
    <th data-options="field:'attr1',width:250,editor:'textbox'">Attribute</th>
    <th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
   </tr>
  </thead>
 </table>

 <div id="tb" style="height:auto">
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a>
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a>
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
 </div>
 
 <script type="text/javascript">
  //编辑的行
  var editIndex = undefined;
  function endEditing() {
   if (editIndex == undefined){return true}
   $('#dg').datagrid('endEdit', editIndex);
   editIndex = undefined;
   return true;
  }
  
  function onClickCell(index, field){
   if (editIndex != index) {
    if (endEditing()) {
     $('#dg').datagrid('selectRow', index)
       .datagrid('beginEdit', index);
     var ed = $('#dg').datagrid('getEditor', { index: index, field: field });
     if (ed) {
      ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
     }
     editIndex = index;
    } else {
     setTimeout(function () {
      $('#dg').datagrid('selectRow', editIndex);
     }, 0);
    }
   }
  }
  function onEndEdit(index, row){
   var ed = $(this).datagrid('getEditor', {
    index: index,
    field: 'productid'
   });
   row.productname = $(ed.target).combobox('getText');
  }
  function append(){
   var index = $('#dg').datagrid('getRowIndex', $('#dg').datagrid('getSelected'));
   if (index == -1)
    index = 0;
   $("#dg").datagrid("insertRow", {
    index: index+1,
    row: {oper: "<a href='javascript:append()'>+<a> <a href='javascript:removeit()'>-<a>",status:'P'}
    });
  }
  function removeit(){
   if (editIndex == undefined){return}
   $('#dg').datagrid('selectRow', editIndex);

    $('#dg').datagrid('cancelEdit', editIndex)
     .datagrid('deleteRow', editIndex);
   editIndex = undefined;
  }
  function accept(){
   if (endEditing()){
    var $dg = $('#dg');
    var rows = $dg.datagrid('getChanges');
    if (rows.length) {
     var inserted = $dg.datagrid('getChanges', "inserted");
     var deleted = $dg.datagrid('getChanges', "deleted");
     var updated = $dg.datagrid('getChanges', "updated");
     var effectRow = new Object();
     if (inserted.length) {
      effectRow["inserted"] = JSON.stringify(inserted);
     }
     if (deleted.length) {
      effectRow["deleted"] = JSON.stringify(deleted);
     }
     if (updated.length) {
      effectRow["updated"] = JSON.stringify(updated);
     }
     //alert(inserted);
     //alert(deleted);
     //alert(updated);
    }
   }
   //$.post("/Home/Commit", effectRow, function (rsp) {
   // if (rsp) {
   //  $dg.datagrid('acceptChanges');
   //  bindData();
   // }
   //}, "JSON").error(function () {
   // $.messager.alert("提示", "提交错误了！");
   //});
  }
  function reject(){
   $('#dg').datagrid('rejectChanges');
   editIndex = undefined;
  }
  function getChanges(){
   var rows = $('#dg').datagrid('getChanges');
   alert(rows.length+' rows are changed!');
  }

  function contains(arr, obj) {
   var i = arr.length;
   while (i--) {
    if (arr[i] === obj) {
     return true;
    }
   }
   return false;
  }
 </script>
</body>
</html>

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

jquery Easyui Datagrid实现批量操作（编辑，删除，添加）

- Author -

ymnets

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
通过url查找a元素并点击
Apr 09 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
JSON 数据格式详解
Sep 13 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
原生node.js案例--前后台交互
Feb 20 #Javascript
jQuery实现单击按钮遮罩弹出对话框效果（1）
Feb 20 #Javascript
jQuery实现链接的title快速出现的方法
Feb 20 #Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 #Javascript
原生JS实现《别踩白块》游戏（兼容IE）
Feb 20 #Javascript
javascript基础练习之翻转字符串与回文
Feb 20 #Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 #Javascript
入门基础(1) Vmware(3) plus.io(1) 触发器(3) Hash(1) html5+(1) 磁盘管理(1) RabbitMQ(3) 虚拟机(3) Geospatial(1)
You might like
PHP日期处理函数 整型日期格式
2011/01/12 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
PHP中应该避免使用同名变量（拆分临时变量）
2015/04/03 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
js图片上传前预览功能（兼容所有浏览器）
2016/08/24 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
Swiper实现轮播图效果
2017/07/03 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
Python实现简单文本字符串处理的方法
2018/01/22 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
美国婚戒购物网站：Anjays Designs
2017/06/28 全球购物
Hotels.com南非：酒店预订
2017/11/02 全球购物
如何提高MySql的安全性
2014/06/19 面试题
线程问题：wait()方法是定义在哪个类里面
2015/07/07 面试题
自动化专业本科毕业生求职信
2013/10/20 职场文书
秘书岗位职责
2013/11/18 职场文书
爱国演讲稿400字
2014/05/07 职场文书
中考标语大全
2014/06/05 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python