以下是以资深软件开发工程师的视角，对“jQuery EasyUI 数据网格 – 创建属性网格（Property Grid）”的专业回答。我将详细讲解 jQuery EasyUI 中如何创建属性网格（PropertyGrid），包括实现方法、配置选项和应用场景，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，使用 jQuery EasyUI 的最新版本为参考。

jQuery EasyUI 数据网格 – 创建属性网格（Property Grid）

目录

  1. 引言
  2. 属性网格概述
  1. 创建基础属性网格
  1. 高级属性网格配置
  1. 最佳实践与注意事项
  1. 结论

1. 引言

jQuery EasyUI 的属性网格（PropertyGrid）是数据网格（DataGrid）的一种特殊形式，专为展示和编辑键值对数据设计，常用于属性配置或对象详情展示。本教程将从基础到高级，带你掌握如何创建属性网格，并提供实用示例。

2. 属性网格概述

2.1 什么是属性网格？

  • 定义：属性网格是 jQuery EasyUI 中的一种组件，基于 DataGrid，显示两列数据：属性名称（name）和属性值（value）。
  • 特性：支持分组、编辑和动态数据加载。

2.2 属性网格的应用场景

  • 对象属性展示：如显示用户或设备的属性信息。
  • 配置编辑：允许用户实时修改配置参数。
  • 参考：jQuery EasyUI 官方文档 PropertyGrid 部分（jeasyui.com/documentation）。

3. 创建基础属性网格

3.1 准备工作

  • 引入依赖：需要 jQuery 和 EasyUI 的核心文件。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">

3.2 实现属性网格

  • 方法：使用 <table> 标签，添加 easyui-propertygrid 类，数据格式为 {name, value} 的数组。
  • 默认列：
  • name：属性名称。
  • value：属性值。
  • 示例：
<table id="pg" class="easyui-propertygrid" data-options="data: [
  {name: '姓名', value: '张三'},
  {name: '年龄', value: '25'}
]"></table>

3.3 实例：基础属性网格

以下是一个基础属性网格的完整示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>jQuery EasyUI 基础属性网格</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    .container { max-width: 400px; margin: 20px auto; }
  </style>
</head>
<body>
  <div class="container">
    <h1>基础属性网格</h1>
    <table id="pg" class="easyui-propertygrid" style="width:100%;height:200px"
           data-options="
             columns: [[
               {field:'name',title:'属性名称',width:100},
               {field:'value',title:'属性值',width:200}
             ]],
             rownumbers: true,
             showGroup: true">
    </table>
  </div>
  <script>
    // 属性网格数据
    var data = [
      { name: '姓名', value: '张三', group: '基本信息' },
      { name: '年龄', value: '25', group: '基本信息' },
      { name: '邮箱', value: 'zhangsan@example.com', group: '联系方式' },
      { name: '电话', value: '123-456-7890', group: '联系方式' }
    ];
    $('#pg').propertygrid('loadData', data);
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：显示一个包含分组的属性网格，展示“基本信息”和“联系方式”两组属性。

4. 高级属性网格配置

4.1 动态加载数据

  • 方法：通过 url 属性从服务器加载数据，返回格式为 {rows: [...]}。
  • 示例：
<table id="pg" class="easyui-propertygrid" data-options="url: 'get_properties.php'"></table>

4.2 编辑属性值

  • 方法：设置 editors 或 onClickCell 启用编辑功能。
  • 示例：
$('#pg').propertygrid({
  columns: [[
    { field: 'name', title: '属性名称', width: 100 },
    { field: 'value', title: '属性值', width: 200, editor: 'text' }
  ]],
  onClickCell: function(index, field) {
    $(this).propertygrid('beginEdit', index);
  }
});

4.3 实例：可编辑的动态属性网格

以下是一个可编辑且动态加载数据的属性网格示例：

前端代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>jQuery EasyUI 可编辑动态属性网格</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    .container { max-width: 400px; margin: 20px auto; }
  </style>
</head>
<body>
  <div class="container">
    <h1>可编辑动态属性网格</h1>
    <table id="pg" class="easyui-propertygrid" style="width:100%;height:250px"></table>
    <div style="margin-top:10px;">
      <a href="#" class="easyui-linkbutton" onclick="saveChanges()">保存更改</a>
    </div>
  </div>
  <script>
    $(function() {
      $('#pg').propertygrid({
        url: 'get_properties.php',
        columns: [[
          { field: 'name', title: '属性名称', width: 100 },
          { field: 'value', title: '属性值', width: 200, editor: 'text' }
        ]],
        rownumbers: true,
        showGroup: true,
        onClickCell: function(index, field) {
          if (field === 'value') {
            $(this).propertygrid('beginEdit', index);
          }
        },
        onAfterEdit: function(index, row) {
          console.log('编辑完成:', row);
        }
      });
    });

    function saveChanges() {
      var rows = $('#pg').propertygrid('getChanges');
      if (rows.length > 0) {
        alert('更改的属性:\n' + JSON.stringify(rows, null, 2));
        // 可在此发送到服务器保存
      } else {
        alert('无更改');
      }
    }
  </script>
</body>
</html>

后端代码（get_properties.php）

<?php
header('Content-Type: application/json');
echo json_encode([
  'rows' => [
    ['name' => '姓名', 'value' => '李四', 'group' => '基本信息'],
    ['name' => '年龄', 'value' => '30', 'group' => '基本信息'],
    ['name' => '邮箱', 'value' => 'lisi@example.com', 'group' => '联系方式'],
    ['name' => '电话', 'value' => '987-654-3210', 'group' => '联系方式']
  ]
]);
?>
  • 运行方法：
  1. 将 HTML 保存为 index.html，PHP 保存为 get_properties.php。
  2. 使用本地服务器（如 XAMPP）运行，确保 PHP 环境可用。
  • 效果：显示一个动态加载的属性网格，点击“属性值”列可编辑，保存按钮显示更改内容。

5. 最佳实践与注意事项

5.1 设计与实现建议

  • 分组使用：通过 group 字段组织属性，提升可读性。
  • 编辑验证：为 editor 添加验证规则（如 numberbox），确保数据有效性。

5.2 性能优化与调试

  • 性能：属性网格适合少量数据，大数据集建议使用普通 DataGrid（参考 创建子网格）。
  • 调试：使用浏览器开发者工具检查数据加载和编辑事件。

6. 结论

jQuery EasyUI 的属性网格通过简洁的键值对展示和编辑功能，适用于配置管理和对象详情展示。本文通过基础和高级示例展示了创建属性网格的过程，帮助你快速上手。如果需要更复杂的数据展示，可参考 扩展行显示细节 或访问 jQuery EasyUI 官方文档（jeasyui.com）。

回答特点

  • 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
  • 实用性：从静态数据到可编辑动态加载，覆盖实际需求。
  • 内部链接：通过 <a href="#ID"> 跳转，如 创建基础属性网格。
  • 出站链接：嵌入正文，指向官方文档。

如何运行

  • 基础示例直接保存为 HTML 文件打开即可；高级示例需配置本地服务器运行 PHP 文件。