当前位置：首页 > news >正文

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

news 2026/7/3 12:21:52

下面直接给你最实用、最常见的几种行内编辑（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>