在 jQuery EasyUI 的 DataGrid 中，你可以通过设置 editable 属性来启用行内编辑功能。以下是一个简单的例子，演示了如何在 DataGrid 中启用行内编辑：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery EasyUI 启用行内编辑示例</title>
    <!-- 引入 jQuery 库 -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <!-- 引入 EasyUI 样式和脚本文件 -->
    <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://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

    <!-- 创建 EasyUI Datagrid -->
    <table id="datagrid" class="easyui-datagrid" style="width:100%;height:300px"
           url="your_data_url"
           pagination="true"
           rownumbers="true"
           fitColumns="true"
           singleSelect="false"  <!-- 允许多选 -->
           toolbar="#toolbar"
           editable="true">  <!-- 启用行内编辑 -->

        <thead>
            <tr>
                <!-- 列定义 -->
                <th field="name" width="100" editor="text">名称</th>
                <th field="price" width="100" align="right" editor="numberbox">价格</th>
                <th field="category" width="100" editor="combobox">类别</th>
                <!-- 添加更多列... -->
            </tr>
        </thead>
    </table>

    <!-- 工具栏，可以包含操作按钮 -->
    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveChanges()">保存</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="cancelEdit()">取消编辑</a>
    </div>

    <!-- JavaScript 部分 -->
    <script type="text/javascript">
        // JavaScript 代码

        // 示例：保存更改
        function saveChanges() {
            $('#datagrid').datagrid('endEdit', lastIndex);  // 结束编辑
            lastIndex = undefined;  // 重置 lastIndex
        }

        // 示例：取消编辑
        function cancelEdit() {
            $('#datagrid').datagrid('cancelEdit', lastIndex);  // 取消编辑
            lastIndex = undefined;  // 重置 lastIndex
        }
    </script>

</body>
</html>

在上述代码中，通过设置 editable="true" 启用行内编辑功能。每个可编辑的列都通过 editor 属性指定编辑器的类型，例如 text、numberbox、combobox 等。在工具栏中的按钮通过 JavaScript 函数来处理相应的操作，比如保存更改和取消编辑。

确保替换 "your_data_url" 为实际数据源的 URL，并根据你的数据模型修改列的名称和数量。


转载请注明出处：http://www.zyzy.cn/article/detail/13116/jQuery EasyUI