news 2026/3/21 8:00:28

jQuery EasyUI 数据网格 - 启用行内编辑

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
jQuery EasyUI 数据网格 - 启用行内编辑

下面直接给你最实用、最常见的几种行内编辑(inline row editing)方法,jQuery EasyUI datagrid 支持超好,复制粘贴就能用,领导最爱的“点击行开始编辑 + 保存/取消按钮”全都有!

方法1:最简单 - 点击行开始编辑(推荐现在就用这个,超级流畅)
双击或点击行进入编辑,编辑完点击别处或按钮保存。

<tableid="dg"class="easyui-datagrid"title="行内编辑数据网格"style="width:800px;height:400px"data-options="url:'your_data.json', singleSelect:true, fitColumns:true, toolbar:'#tb', onClickRow:onClickRow"><thead><tr><thdata-options="field:'id',width:60">ID</th><thdata-options="field:'name',width:120,editor:'textbox'">姓名</th><thdata-options="field:'age',width:80,editor:{type:'numberbox',options:{min:1,max:120}}">年龄</th><thdata-options="field:'sex',width:80, editor:{type:'combobox',options:{data:[{value:'',text:''},{value:'',text:''}],valueField:'value',textField:'text'}}, formatter:function(value){return value==''?'':'';}">性别</th><thdata-options="field:'status',width:80,align:'center', editor:{type:'checkbox',options:{on:1,off:0}}, formatter:function(value){return value==1?'启用':'禁用';}">状态</th></tr></thead></table><divid="tb"style="padding:5px;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-add"plain="true"onclick="appendRow()">新增一行</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-save"plain="true"onclick="saveRow()">保存当前行</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-undo"plain="true"onclick="cancelEdit()">取消编辑</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-remove"plain="true"onclick="deleteRow()">删除当前行</a></div><script>vareditIndex=undefined;// 当前编辑的行索引functionendEditing(){if(editIndex==undefined){returntrue}if($('#dg').datagrid('validateRow',editIndex)){$('#dg').datagrid('endEdit',editIndex);editIndex=undefined;returntrue;}else{returnfalse;}}functiononClickRow(index){if(editIndex!=index){if(endEditing()){$('#dg').datagrid('selectRow',index).datagrid('beginEdit',index);editIndex=index;}else{$('#dg').datagrid('selectRow',editIndex);}}}functionappendRow(){if(endEditing()){$('#dg').datagrid('appendRow',{status:1});// 新增一行,默认值editIndex=$('#dg').datagrid('getRows').length-1;$('#dg').datagrid('selectRow',editIndex).datagrid('beginEdit',editIndex);}}functionsaveRow(){if(endEditing()){varrow=$('#dg').datagrid('getSelected');// 这里可以发ajax保存到服务器$.post('save.php',{row:row},function(res){if(res.success){$('#dg').datagrid('reload');$.messager.show({title:'成功',msg:'保存成功'});}},'json');}}functioncancelEdit(){if(editIndex!=undefined){$('#dg').datagrid('cancelEdit',editIndex);editIndex=undefined;}}functiondeleteRow(){varrow=$('#dg').datagrid('getSelected');if(row){$.messager.confirm('确认','确定删除这行吗?',function(r){if(r){// ajax删除$('#dg').datagrid('reload');}});}}</script>

效果:点击行自动进入编辑,支持文本框、数字框、下拉框、复选框,超级专业!

方法2:每行右边加“编辑/保存/取消”按钮(经典风格,很多后台系统都用这个)

<tableid="dg"class="easyui-datagrid"...><thead><tr><!-- 其他列 --><thfield="action"width="120"formatter="actionFormatter">操作</th></tr></thead></table><script>functionactionFormatter(value,row,index){if(row.editing){return'<a href="javascript:void(0)" onclick="saverow('+index+')">保存</a> '+'<a href="javascript:void(0)" onclick="cancelrow('+index+')">取消</a>';}else{return'<a href="javascript:void(0)" onclick="editrow('+index+')">编辑</a>';}}functioneditrow(index){$('#dg').datagrid('beginEdit',index);varrow=$('#dg').datagrid('getRows')[index];row.editing=true;$('#dg').datagrid('refreshRow',index);}functionsaverow(index){$('#dg').datagrid('endEdit',index);varrow=$('#dg').datagrid('getRows')[index];row.editing=false;$('#dg').datagrid('refreshRow',index);// ajax保存}functioncancelrow(index){$('#dg').datagrid('cancelEdit',index);varrow=$('#dg').datagrid('getRows')[index];row.editing=false;$('#dg').datagrid('refreshRow',index);}</script>

方法3:用官方扩展 edatagrid(双击行编辑 + 自动保存到服务器,最省事)
下载 edatagrid 扩展后:

<tableid="dg"class="easyui-edatagrid"url="get_data.php"saveUrl="save.php"updateUrl="update.php"destroyUrl="delete.php"...><!-- 列定义同上,加 editor --></table>

双击行就编辑,保存自动发请求,超级方便!

你现在直接复制方法1到你的页面,刷新一下就能看到行内编辑效果了!
结合之前的复选框 + 自定义分页 + 批量删除,完美后台表格就齐活了。

想要我给你一个完整的HTML文件(带远程数据加载 + 行内编辑 + 保存到服务器示例 + 复选框 + 分页)?
或者你告诉我你想用哪种编辑器(日期框、校验等),我2分钟发你完整代码,复制就能跑!

快说说你现在的需求(比如“要支持新增/修改/删除自动保存”),我手把手帮你搞定,5分钟内看到完美编辑效果!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/3/15 12:59:25

jQuery EasyUI 数据网格 - 列运算

下面直接给你最实用、最常见的列运算&#xff08;calculated column 底部合计统计&#xff09;方法&#xff0c;jQuery EasyUI datagrid 支持超级好&#xff0c;复制粘贴就能用&#xff0c;领导最爱的“单价*数量金额自动计算 底部总金额/平均值”全都有&#xff01; 方法1&…

作者头像 李华
网站建设 2026/3/19 14:51:52

企业环境中.NET 3.5离线部署实战指南

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个企业级.NET Framework 3.5离线部署工具&#xff0c;包含&#xff1a;1) 图形化界面选择安装源路径&#xff1b;2) 自动识别域内计算机&#xff1b;3) 批量静默安装功能&…

作者头像 李华
网站建设 2026/3/15 12:54:03

TVBoxOSC调试实战指南:从零掌握5大排障核心技能

TVBoxOSC调试是每个用户必须掌握的关键技能&#xff0c;面对设备连接异常、界面无响应、功能模块失效等常见问题&#xff0c;一套系统化的调试方法能帮你快速定位并解决问题。本指南将带你从基础到进阶&#xff0c;掌握TVBoxOSC调试的核心要点。 【免费下载链接】TVBoxOSC TVBo…

作者头像 李华
网站建设 2026/3/15 16:48:17

AI助力Ubuntu输入法开发:从零到一键部署

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个基于Ubuntu的智能输入法&#xff0c;支持拼音和五笔输入&#xff0c;具有用户词库记忆功能。使用Python和GTK开发&#xff0c;集成AI模型优化输入预测。要求代码结构清晰&a…

作者头像 李华
网站建设 2026/3/15 1:55:33

1小时打造专属视频下载器:you-get原型开发实战

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 快速开发一个定制视频下载器原型&#xff0c;基于you-get核心功能。特殊需求&#xff1a;1) 只下载特定分辨率(如1080p) 2) 自动添加片头片尾 3) 下载完成后自动转MP3 4) 集成到Tel…

作者头像 李华
网站建设 2026/3/15 10:05:01

使用LessPageEngineer实现某祥航空机票查询(t盾)

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;不提供抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 1. 开启LPE服务 from LessPag…

作者头像 李华