首页
所有分类
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 相关文章推荐
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
Vue 列表页带参数进详情页的操作(router-link)
Nov 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
YH-R296(1) 德劲1107(1) 德生1994(1) 华普R-96(1) PR-D3L(1) SRF-40W(1) 上海永华(1) SRF-22W(1) ICF-SW100(1) A254(1)
You might like
业余方法DIY电子管FM收音机
2021/03/02 无线电
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
深入理解JavaScript系列（44）：设计模式之桥接模式详解
2015/03/04 Javascript
详解nodejs 文本操作模块-fs模块（四）
2016/12/22 NodeJs
JavaScript中String对象的方法介绍
2017/01/04 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
layui自定义工具栏的方法
2019/09/19 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
使用python画个小猪佩奇的示例代码
2018/06/06 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
布里斯班女装时尚品牌：Adrift
2017/12/28 全球购物
中专生自我鉴定范文
2013/12/19 职场文书
网上书店创业计划书
2014/01/12 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
导师评语大全
2014/04/26 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python