这个js代码是别人写的，可能不是最好的，但我个人觉得首先能帮助别人解决功能问题的话就特别好。我稍加修改后用在了自己的项目上了，这里贴出来分享一下。后台用的TinkPHP因为都是查增删改比较简单，这里就不贴了。前台效果图因为比较懒，也不贴了。

$(function () {
    var datagrid; //定义全局变量datagrid
    var editRow = undefined; //定义全局变量：当前编辑的行
    datagrid = TskupluAddPacket.datagrid({
        url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //请求的数据源
        iconCls: 'icon-save', //图标
        pagination: true, //显示分页
        pageSize: 15, //页大小
        pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数
        fit: true, //datagrid自适应宽度
        fitColumn: false, //列自适应宽度
        striped: true, //行背景交换
        nowap: true, //列内容多时自动折至第二行
        border: false,
        idField: 'packetid', //主键
        sortName : 'packetid',                                  //排序字段
        sortOrder : 'desc',                  //排序方式
        columns: [[//显示的列
            {field: 'packetid', title: 'ID', width: 100, sortable: true, checkbox: true },
            { field: 'packunit', title: '包装单位', width: 100, sortable: true,
                editor: { type: 'validatebox', options: { required: true} }
            },
            { field: 'packqty', title: '包装细数', width: 100,
                editor: { type: 'validatebox', options: { required: true} }
            },
            { field: 'packspec', title: '包装规格', width: 100,
                editor: { type: 'validatebox', options: { required: true} }
            }
        ]],
        queryParams: { 
          pluid: $('#addpluid').val()
        }, //查询参数
        toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等
            //添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
            if (editRow == undefined) {                     
                datagrid.datagrid("insertRow", {
                    index: 0, // index start with 0
                    row: {}
                });          
                //将新插入的那一行开户编辑状态
                datagrid.datagrid("beginEdit", 0);
                //给当前编辑的行赋值
                editRow = 0;
            }
        }
        }, '-',
        { text: '删除', iconCls: 'icon-remove', 
          handler: function () {
             //删除时先获取选择行
             var rows = datagrid.datagrid("getSelections");
             //选择要删除的行
             if (rows.length > 0) {
                $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                  if (r) {
                    var ids = [];
                    for (var i = 0; i < rows.length; i++) {
                      ids.push(rows[i].packetid);
                    }
                    //将选择到的行存入数组并用,分隔转换成字符串，
                    //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id
                    //alert(ids.join(','));
                    $.ajax({
                      url : ThinkPHP['MODULE'] + '/Tskuplu/deletePacket',
                      type : 'POST',
                      data : {
                        ids : ids.join(',')
                      },
                      beforeSend : function (){
                        $.messager.progress({
                          text : '正在处理中...'
                        });  
                      },
                      success : function (data){
                        $.messager.progress('close');
                        if (data >0){
                          datagrid.datagrid('reload');
                          $.messager.show({
                            title : '操作提醒',
                            msg  : data + '条数据被成功删除！'
                          })
                        } else if( data == -999 ) {
                          $.messager.alert('删除失败', '对不起，您没有权限！', 'warning');
                        } else {
                          $.messager.alert('删除失败', '没有删除任何数据！', 'warning');
                        }
                      }
                    });                  
                  }
                });
             } else {
                $.messager.alert("提示", "请选择要删除的行", "error");
             } 
          }
        }, '-',
        { text: '修改', iconCls: 'icon-edit', 
          handler: function () {
            //修改时要获取选择到的行
            var rows = datagrid.datagrid("getSelections");
            //如果只选择了一行则可以进行修改，否则不操作
            if (rows.length == 1) {
              //当无编辑行时
              if (editRow == undefined) {
                //获取到当前选择行的下标
                var index = datagrid.datagrid("getRowIndex", rows[0]);
                //开启编辑
                datagrid.datagrid("beginEdit", index);
                //把当前开启编辑的行赋值给全局变量editRow
                editRow = index;
                //当开启了当前选择行的编辑状态之后，
                //应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
                datagrid.datagrid("unselectAll");
              }
            }
          }
        }, '-',
        { text: '保存', iconCls: 'icon-save', 
          handler: function () {
             //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
             datagrid.datagrid("endEdit", editRow); 
             editRow = undefined;
          }
        }, '-',
        { text: '取消编辑', iconCls: 'icon-redo', 
          handler: function () {
             //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
             editRow = undefined;
             datagrid.datagrid("rejectChanges");
             datagrid.datagrid("unselectAll");
          }
        }, '-'],
        onAfterEdit: function (rowIndex, rowData, changes) {
          //endEdit该方法触发此事件           
          //var row = datagrid.datagrid("getData").rows[rowIndex]; //获取某一行的值 
          var inserted = datagrid.datagrid('getChanges','inserted');
          var updated = datagrid.datagrid('getChanges','updated');
          if(inserted.length < 1 && updated.length <1){
            editRow = undefined;
            datagrid.datagrid('unselectAll');
            return;
          }
          var url = '';
          if(inserted.length>0){
            url=ThinkPHP['MODULE'] + '/Tskuplu/addPacket';
          }
          if(updated.length>0){
            url=ThinkPHP['MODULE'] + '/Tskuplu/updatePacket';
          }
          $.ajax({
            url : url,
            type : 'POST',
            data : {
              'pluid': $('#addpluid').val(),
              'packetid':rowData.packetid,
              'packunit':rowData.packunit,
              'packqty' :rowData.packqty,
              'packspec':rowData.packspec
            },
            beforeSend : function (){
              $.messager.progress({
                text : '正在处理中...'
              })
            },
            success : function (data){
              $.messager.progress('close');
              if (data > 0){ 
                datagrid.datagrid("acceptChanges"); 
                $.messager.show({
                  title : '操作提示',
                  msg : '添加成功'
                });      
                editRow = undefined;
                datagrid.datagrid("reload"); 
                $('#addcheck').val(1);
              } else if (data == -999) {
                $.messager.alert('添加失败', '抱歉！您没有权限！', 'warning');
              } else {
                datagrid.datagrid("beginEdit",editRow); 
                $.messager.alert('警告操作', '未知错误！请重新刷新后提交！', 'warning');
              }
              datagrid.datagrid("unselectAll"); 
            }
          });
          //////////////////                         
        },
        onDblClickRow: function (rowIndex, rowData) {
        //双击开启编辑行
          if (editRow == undefined) {
              datagrid.datagrid("beginEdit", rowIndex);
              editRow = rowIndex;
          }
        }
    });   
  });

以上所述是小编给大家介绍的EasyUI中的dataGrid的行内编辑，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# easyui  # datagrid  # 行内编辑  # jquery Easyui Datagrid实现批量操作（编辑  # 删除  # 添加）  # Easyui笔记2：实现datagrid多行删除的示例代码  # Jquery EasyUI Datagrid右键菜单实现方法  # jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】  # jQuery Easyui datagrid连续发送两次请求问题  # 详解jquery easyui之datagrid使用参考  # 实现easyui的datagrid导出为excel的示例代码  # easyui datagrid 大数据加载效率慢  # 优化解决方法(推荐)  # jQuery EasyUI编辑DataGrid用combobox实现多级联动  # 全局变量  # 双击  # 小编  # 您没有权限  # 贴了  # 自适应  # 自己的  # 都是  # 也不  # 最好的  # 在此  # 上了  # 就不  # 但我  # 给大家  # 如果没有  # 弹出  # 分页  # 请选择  # 可将 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何挑选最适合建站的高性能VPS主机？  Javascript中的事件循环是如何工作的_如何利用Javascript事件循环优化异步代码？  如何用JavaScript实现文本编辑器_光标和选区怎么处理  做企业网站制作流程,企业网站制作基本流程有哪些？  JS中对数组元素进行增删改移的方法总结  Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用  网站页面设计需要考虑到这些问题  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践  Google浏览器为什么这么卡 Google浏览器提速优化设置步骤【方法】  如何快速搭建支持数据库操作的智能建站平台？  大型企业网站制作流程,做网站需要注册公司吗？  如何快速上传建站程序避免常见错误？  Laravel Seeder怎么填充数据_Laravel数据库填充器的使用方法与技巧  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  深圳网站制作培训,深圳哪些招聘网站比较好？  网易LOFTER官网链接 老福特网页版登录地址  1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步骤  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  laravel怎么通过契约（Contracts）编程_laravel契约（Contracts）编程方法  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  中山网站制作网页,中山新生登记系统登记流程？  Win11怎么设置虚拟桌面 Win11新建多桌面切换操作【技巧】  如何快速使用云服务器搭建个人网站？  Laravel如何使用Gate和Policy进行授权？（权限控制）  Laravel集合Collection怎么用_Laravel集合常用函数详解  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  焦点电影公司作品,电影焦点结局是什么？  JavaScript常见的五种数组去重的方式  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  iOS验证手机号的正则表达式  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  如何在Ubuntu系统下快速搭建WordPress个人网站？  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  高防服务器租用指南：配置选择与快速部署攻略  javascript基于原型链的继承及call和apply函数用法分析  Laravel如何配置.env文件管理环境变量_Laravel环境变量使用与安全管理  微信小程序制作网站有哪些,微信小程序需要做网站吗？  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  Swift中switch语句区间和元组模式匹配  如何在 Telegram Web View（iOS）中防止键盘遮挡底部输入框  Windows11怎样设置电源计划_Windows11电源计划调整攻略【指南】  Laravel Admin后台管理框架推荐_Laravel快速开发后台工具  如何快速搭建虚拟主机网站？新手必看指南  深圳网站制作设计招聘,关于服装设计的流行趋势，哪里的资料比较全面？  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  Laravel如何使用Passport实现OAuth2？（完整配置步骤）  大学网站设计制作软件有哪些,如何将网站制作成自己app？  如何快速启动建站代理加盟业务？