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

网络编程 2024/9/24 佚名

3 1 2

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

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

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

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

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') "" src="/UploadFiles/2021-04-02/2017022014043936.gif">
第二：删除事件（点击顶部菜单Remove删除选中的行，点击列表的-号，删除减号行）


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

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




第三：添加事件，点击菜单的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'}
    });
  }



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


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);





总结：
最后完整代码：（替换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="/UploadFiles/2021-04-02/jquery.min.js">

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

Easyui,Datagrid批量操作,easyui,批量添加,easyui,批量编辑

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

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

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年09月24日

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

Webpack+Vue如何导入Jquery和Jquery的第三方插件

原生node.js案例--前后台交互

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接