jQuery EasyUI 数据网格 – 创建属性网格

下面直接给你最实用、最常见的创建属性网格（Property Grid）方法，也叫属性表格，jQuery EasyUI 官方内置了 propertygrid 组件，专门用来显示“名称-值”键值对形式的数据，超级适合配置项、详情查看、系统参数、对象属性展示等场景，复制粘贴就能用，领导最爱的“清晰整齐、一目了然”效果全都有！

方法1：最简单最常用 – 基本属性网格（推荐现在就用这个，3秒出效果）

<table id="pg" class="easyui-propertygrid" title="用户属性信息" style="width:600px;height:400px"
    data-options="
        url:'user_property.json',
        showGroup:true,
        scrollbarSize:0,
        columns:[[
            {field:'name',title:'属性名称',width:150,sortable:true},
            {field:'value',title:'属性值',width:200},
            {field:'desc',title:'描述',width:200}
        ]]
    ">
</table>

对应的 JSON 数据格式（user_property.json）：

[
    {"name":"用户名","value":"张三","group":"基本信息","desc":"登录账号"},
    {"name":"真实姓名","value":"张三丰","group":"基本信息","desc":""},
    {"name":"年龄","value":28,"group":"基本信息","desc":"周岁"},
    {"name":"邮箱","value":"zhang@san.com","group":"联系方式","desc":"常用邮箱"},
    {"name":"手机","value":"13800138000","group":"联系方式","desc":""},
    {"name":"注册时间","value":"2023-01-15 10:30:22","group":"其他信息","desc":""},
    {"name":"状态","value":"启用","group":"其他信息","desc":"正常/禁用"}
]

效果：

• 自动按 group 分组显示（可折叠）
• 属性名称固定宽度，值和描述清晰对齐
• 支持排序、滚动，超级专业！

方法2：行内编辑属性值（支持修改配置项）

<table id="pg" class="easyui-propertygrid" title="系统配置参数（可编辑）" style="width:700px;height:450px"
    data-options="
        url:'config.json',
        showGroup:true,
        scrollbarSize:0,
        onClickRow:onClickRow
    ">
    <thead>
        <tr>
            <th data-options="field:'name',width:200">参数名称</th>
            <th data-options="field:'value',width:250,editor:'textbox'">参数值</th>
            <th data-options="field:'desc',width:250">描述</th>
        </tr>
    </thead>
</table>

<div style="padding:5px;">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" onclick="saveConfig()">保存所有修改</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" onclick="cancelAll()">取消所有编辑</a>
</div>

<script>
var editRow = undefined;

function onClickRow(index){
    if (editRow != index){
        if (endEditing()){
            $('#pg').propertygrid('beginEdit', index);
            editRow = index;
        } else {
            $('#pg').propertygrid('selectRow', editRow);
        }
    }
}

function endEditing(){
    if (editRow == undefined){return true}
    if ($('#pg').propertygrid('validateRow', editRow)){
        $('#pg').propertygrid('endEdit', editRow);
        editRow = undefined;
        return true;
    } else {
        return false;
    }
}

function saveConfig(){
    if (endEditing()){
        var changed = $('#pg').propertygrid('getChanges');
        if(changed.length){
            // 这里可以提交到服务器
            console.log('修改的参数：', changed);
            $.messager.alert('提示','保存成功！共修改 '+changed.length+' 项','info');
            // 保存后可选择 reload
            // $('#pg').propertygrid('reload');
        } else {
            $.messager.alert('提示','没有修改任何项');
        }
    }
}

function cancelAll(){
    $('#pg').propertygrid('rejectChanges');  // 撤销所有修改
    editRow = undefined;
}
</script>

方法3：更高级的编辑器（下拉、数字、日期等）

columns:[[
    {field:'name',title:'参数名称',width:180},
    {field:'value',title:'参数值',width:250,
        editor:function(row){
            if(row.name == '状态'){
                return {type:'combobox',options:{
                    valueField:'value',textField:'text',
                    data:[{value:'启用',text:'启用'},{value:'禁用',text:'禁用'}]
                }};
            }
            if(row.name == '缓存时间'){
                return {type:'numberspinner',options:{min:1,max:3600}};
            }
            if(row.name == '到期日期'){
                return 'datebox';
            }
            return 'textbox';
        }
    },
    {field:'desc',title:'描述',width:250}
]]

方法4：不分组 + 自定义分组标题样式

data-options="
    showGroup:false,  // 不显示分组（所有行平铺）
    groupFormatter:function(group,rows){
        return '<b style="color:#0066cc;">'+group+'</b>（共'+rows.length+'项）';
    }
"

你现在直接复制方法1的代码到你的页面，准备一个简单的 JSON 数据，刷新一下就能看到超级专业的属性网格效果了！
特别适合：

• 用户详情页
• 系统配置管理
• 对象属性查看
• 商品规格参数表

结合之前的 datagrid 各种高级功能，你的后台系统已经可以直接上线了。

想要我给你一个完整的HTML示例（带本地数据 + 可编辑 + 下拉/日期编辑器 + 保存按钮）？
或者你告诉我你想展示什么类型的数据（比如“服务器配置”“个人档案”“产品参数”），我2分钟发你完美适配的代码，复制就能跑！

快说说你的具体需求，我手把手帮你搞定，5分钟内看到一目了然的属性网格！