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：

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

步骤 2: 创建 DataGrid 和工具栏

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

<table id="dg" title="My Users" style="width:700px;height:400px"
       url="get_users.php" toolbar="#toolbar" pagination="true"
       fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th field="firstname" width="50">First Name</th>
            <th field="lastname" width="50">Last Name</th>
            <th field="phone" width="50">Phone</th>
            <th field="email" width="80">Email</th>
        </tr>
    </thead>
</table>

<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">New User</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyItem()">Remove User</a>
</div>

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

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

<script type="text/javascript">
    $(function(){
        $('#dg').datagrid({
            view: detailview,
            detailFormatter: function(index, row){
                return '<div class="ddv"></div>';
            },
            onExpandRow: function(index, row){
                var ddv = $(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);
            }
        });
    });

    function newItem(){
        $('#dg').datagrid('appendRow', {isNewRecord: true});
        var index = $('#dg').datagrid('getRows').length - 1;
        $('#dg').datagrid('expandRow', index);
        $('#dg').datagrid('selectRow', index);
    }

    function destroyItem(){
        var row = $('#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');
                }
            });
        }
    }

    function saveItem(index){
        var row = $('#dg').datagrid('getRows')[index];
        var url = 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
                });
            }
        });
    }

    function cancelItem(index){
        var row = $('#dg').datagrid('getRows')[index];
        if (row.isNewRecord){
            $('#dg').datagrid('deleteRow',index);
        } else {
            $('#dg').datagrid('collapseRow',index);
        }
    }
</script>

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

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

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

（注：如果使用 href 加载，需在 PHP 中替换 {{index}} 为实际 index）

关键说明

• 新增：appendRow 并标记 isNewRecord，展开行进入编辑。
• 编辑：用户点击 + 展开行，表单加载当前行数据。
• 保存：提交表单，成功后折叠行并更新 DataGrid 数据。
• 取消：如果是新行则删除，否则折叠。
• 删除：选中行后删除，支持确认。
• 优势：编辑表单布局自由，可添加更多字段、tab 等复杂控件。

更多示例：

• 官方展开行 CRUD：https://www.jeasyui.com/tutorial/app/crud3.php
• 展开行显示子网格：https://www.jeasyui.com/tutorial/datagrid/datagrid22.php

如果需要完整 ZIP 下载、服务器端 PHP 示例、或自定义表单布局，请提供更多要求！