首页
所有分类
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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
vue中destroyed方法的使用说明
Jul 21 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
海燕B411(1) R601SW(1) DSP(2) 矿石收音机(1) 放大器(1) 电子管(5) 接收机(2) TECSUN(1) 车机(1) 修复(2)
You might like
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
php下统计用户在线时间的一种尝试
2010/08/26 PHP
初品cakephp 入门基础
2012/02/16 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
js实现自定义路由
2017/02/04 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
Python 中迭代器与生成器实例详解
2017/03/29 Python
Python向excel中写入数据的方法
2019/05/05 Python
基于python实现高速视频传输程序
2019/05/05 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
夜大毕业生自我鉴定
2013/10/31 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
公证委托书大全
2014/04/04 职场文书
人才市场接收函
2015/01/30 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
使用refresh_token实现无感刷新页面
2022/04/26 Javascript