当前位置：首页 > news >正文

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

news 2026/6/25 1:47:05

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

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

<tableid="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：行内编辑属性值（支持修改配置项）

<tableid="pg"class="easyui-propertygrid"title="系统配置参数（可编辑）"style="width:700px;height:450px"data-options="url:'config.json', showGroup:true, scrollbarSize:0, onClickRow:onClickRow"><thead><tr><thdata-options="field:'name',width:200">参数名称</th><thdata-options="field:'value',width:250,editor:'textbox'">参数值</th><thdata-options="field:'desc',width:250">描述</th></tr></thead></table><divstyle="padding:5px;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-save"onclick="saveConfig()">保存所有修改</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-undo"onclick="cancelAll()">取消所有编辑</a></div><script>vareditRow=undefined;functiononClickRow(index){if(editRow!=index){if(endEditing()){$('#pg').propertygrid('beginEdit',index);editRow=index;}else{$('#pg').propertygrid('selectRow',editRow);}}}functionendEditing(){if(editRow==undefined){returntrue}if($('#pg').propertygrid('validateRow',editRow)){$('#pg').propertygrid('endEdit',editRow);editRow=undefined;returntrue;}else{returnfalse;}}functionsaveConfig(){if(endEditing()){varchanged=$('#pg').propertygrid('getChanges');if(changed.length){// 这里可以提交到服务器console.log('修改的参数：',changed);$.messager.alert('提示','保存成功！共修改 '+changed.length+' 项','info');// 保存后可选择 reload// $('#pg').propertygrid('reload');}else{$.messager.alert('提示','没有修改任何项');}}}functioncancelAll(){$('#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+'项）';}"