首页
所有分类
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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 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) EventBus(1) B+树(2) ICF-5900W(2) TcpServer(1) Fragment(1) instantclient(1) muduo(1) pt-archiver(1) 存储过程(3)
You might like
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
谈谈PHP语法(2)
2006/10/09 PHP
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
python实现求最长回文子串长度
2018/01/22 Python
python爬虫爬取淘宝商品信息（selenum+phontomjs）
2018/02/24 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
法国足球商店：Footcenter
2019/07/06 全球购物
一套.net面试题及答案
2016/11/02 面试题
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
2015年元旦标语大全
2014/12/09 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
课程设计感想范文
2015/08/11 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
Spring 使用注解开发
2022/05/20 Java/Android
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL