jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用-智慧文博士

jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用

在前两个教程中，我们分别实现了使用dialog 弹窗和行内编辑的 CRUD DataGrid。本教程将展示第三种方式：使用detailview（展开行明细视图），点击行左侧的展开按钮（+），在行下方显示一个完整的编辑表单。这种方式适合需要更复杂、布局更自由的编辑表单，同时节省页面空间，不占用额外弹窗。

官方教程参考：https://www.jeasyui.com/tutorial/app/crud3.php（Build CRUD Application with edit form in expanded row details）

步骤 1: 引入 EasyUI 资源（额外引入 detailview）

除了基本资源，还需引入datagrid-detailview.js：

<linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/datagrid-detailview.js"></script>

步骤 2: 创建 DataGrid 和工具栏

使用view: detailview启用展开行视图。

<tableid="dg"title="My Users"style="width:700px;height:400px"url="get_users.php"toolbar="#toolbar"pagination="true"fitColumns="true"singleSelect="true"><thead><tr><thfield="firstname"width="50">First Name</th><thfield="lastname"width="50">Last Name</th><thfield="phone"width="50">Phone</th><thfield="email"width="80">Email</th></tr></thead></table><divid="toolbar"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-add"plain="true"onclick="newItem()">New User</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-remove"plain="true"onclick="destroyItem()">Remove User</a></div>

步骤 3: JavaScript 实现展开行编辑表单

核心是通过detailFormatter返回一个容器 div，onExpandRow事件中加载表单（可从服务器 AJAX 加载，或直接内联）。

<scripttype="text/javascript">$(function(){$('#dg').datagrid({view:detailview,detailFormatter:function(index,row){return'<div class="ddv"></div>';},onExpandRow:function(index,row){varddv=$(this).datagrid('getRowDetail',index).find('div.ddv');ddv.panel({height:120,border:false,cache:false,href:'show_form.php?index='+index,// 可选：从服务器加载表单onLoad:function(){// 加载行数据到表单$('#dg').datagrid('fixDetailRowHeight',index);$('#dg').datagrid('selectRow',index);ddv.find('form').form('load',row);}});$('#dg').datagrid('fixDetailRowHeight',index);}});});functionnewItem(){$('#dg').datagrid('appendRow',{isNewRecord:true});varindex=$('#dg').datagrid('getRows').length-1;$('#dg').datagrid('expandRow',index);$('#dg').datagrid('selectRow',index);}functiondestroyItem(){varrow=$('#dg').datagrid('getSelected');if(row){$.messager.confirm('Confirm','确定删除此用户吗？',function(r){if(r){$.post('remove_user.php',{id:row.id},function(result){if(result.success){$('#dg').datagrid('reload');}else{$.messager.show({title:'Error',msg:result.errorMsg});}},'json');}});}}functionsaveItem(index){varrow=$('#dg').datagrid('getRows')[index];varurl=row.isNewRecord?'save_user.php':'update_user.php?id='+row.id;$('#dg').datagrid('getRowDetail',index).find('form').form('submit',{url:url,onSubmit:function(){return$(this).form('validate');},success:function(data){data=eval('('+data+')');data.isNewRecord=false;$('#dg').datagrid('collapseRow',index);$('#dg').datagrid('updateRow',{index:index,row:data});}});}functioncancelItem(index){varrow=$('#dg').datagrid('getRows')[index];if(row.isNewRecord){$('#dg').datagrid('deleteRow',index);}else{$('#dg').datagrid('collapseRow',index);}}</script>

步骤 4: 编辑表单示例（show_form.php 或内联）

表单放在展开行中，支持更复杂的布局：

<!-- show_form.php 返回的内容 --><formmethod="post"><tableclass="dv-table"style="width:100%;background:#fafafa;padding:5px;"><tr><td>First Name</td><td><inputname="firstname"class="easyui-textbox"required="true"/></td><td>Last Name</td><td><inputname="lastname"class="easyui-textbox"required="true"/></td></tr><tr><td>Phone</td><td><inputname="phone"class="easyui-textbox"/></td><td>Email</td><td><inputname="email"class="easyui-textbox"validType="email"/></td></tr></table><divstyle="padding:5px;text-align:right;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-save"onclick="saveItem({{index}})">Save</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-cancel"onclick="cancelItem({{index}})">Cancel</a></div></form>