PropertyGird( 属性表格) 组件

本节课重点了解 EasyUI 中 PropertyGird(属性表格)组件的使用方法，这个组件依赖
于 DataGrid(数据表格)组件。

 

一． 加载方式

//class 加载方式
<table id="box" class="easyui-propertygrid" style="width:300px"
data-options="url:'property.json',showGroup:true"></table>
//property.json
[
{
"name" : "PHP 版本",
"value" : "5.4",
"group" : "系统信息",
"editor" : "text"
},
{
"name" : "CPU 核心",
"value" : "双核四线程",
"group" : "系统信息",
"editor" : "text"
},
{
"name" : "超级管理员",
"value" : "Admin",
"group" : "管理信息",
"editor" : "text"
},
{
"name" : "管理密码",
"value" : "******",
"group" : "管理信息",

"editor" : "text"
}
]

属性表格扩展自 datagrid(数据表格)。它的行数据格式和数据表格相同。作为一个属
性行，以下字段是必须的：
name：字段名称。
value：字段值。
group：分组字段值。
editor：在编辑属性值的时候使用的编辑器对象。

//JS 加载方式
<table id="box" style="width:300px"></table>
$('#box').propertygrid({
url : 'property.json',
});

 

二．属性列表
属性表格的属性扩展自 datagrid(数据表格)，属性表格新增的的属性如下：

$('#box').propertygrid({
url : 'property.json',
showGroup : true,
groupField : 'group',
groupFormatter : function (group, rows) {
return '[' + group + ']';
},
});

 

三．方法列表

$('#box').propertygrid('collapseGroup');
$('#box').propertygrid('collapseGroup', 0);

 

转载于:https://www.cnblogs.com/qinsilandiao/p/5016186.html