PropertyGrid（属性表格）

扩展自$.fn.iDatagrid.defaults。使用$.fn.iPropertygrid.defaults重写默认值对象。

属性表格为用户提供浏览和编辑对象属性的接口。属性表格是一个内联的编辑数据表格，使用起来相当容易，用户可以轻松地创建可编辑属性的分层列表，并显示项目的任何数据类型。属性网格具有内置的排序和分组特征。

依赖关系

• datagrid

使用案例

使用标签创建属性表格。注意，列是内置的，不需要再次声明它们。

<table id="pg" data-toggle="topjui-propertygrid" style="width:300px"
       data-options="url:'get_data.php',showGroup:true,scrollbarSize:0"></table>

使用javascript创建属性表格。

<table id="pg" style="width:300px"></table>

$('#pg').iPropertygrid({
    url: 'get_data.php',
    showGroup: true,
    scrollbarSize: 0
});

追加一个新行到属性表格。

var row = {
    name:'AddName',
    value:'',
    group:'Marketing Settings',
    editor:'text'
};
$('#pg').iPropertygrid('appendRow',row);

数据行对象

属性表格扩展自数据表格。它的行数据格式与数据表格相同。作为属性行，需要以下字段：

• name: 字段名。
• value: 要编辑的字段值。
• group: 组字段值。
• editor: 编辑属性值的编辑器。

代码示例：

{"total":4,"rows":[
    {"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},
    {"name":"Address","value":"","group":"ID Settings","editor":"text"},
    {"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},
    {"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{
        "type":"validatebox",
        "options":{
            "validType":"email"
        }
    }}
]}

属性

扩展自DataGrid(数据表格)，属性表格新增的属性如下：

属性名	属性值类型	描述	默认值
showGroup	boolean	定义是否显示属性组。	false
groupField	string	定义属性组字段名。	group
groupFormatter	function(group,rows)	定义如何格式化组值。该函数有以下几个参数： group: 组字段值。 rows: 所属组的行对象。

方法

扩展自DataGrid(数据表格)，属性表格新增的方法如下：

属性名	属性值类型	描述
groups	none	返回所有的组，每组包含以下属性。 value: 组字段值。 rows: 所属组的行对象。 startIndex: 所有行对象的起始索引。
expandGroup	groupIndex	展开指定的组。如果没有指定'groupIndex'参数值, 展开所有的组。
collapseGroup	groupIndex	折叠指定的组。如果没有指定'groupIndex'参数值, 折叠所有的组。