合规国际互联网加速 OSASE为企业客户提供高速稳定SD-WAN国际加速解决方案。 广告
### PropertyGrid(属性表格) 继承自$.fn.datagrid.defaults。使用$.fn.propertygrid.defaults重写默认值对象。 属性表格提供The propertygrid provide给用户浏览和编辑对象属性的一个接口。属性表格是一个行内可编辑数据表格。它使用起来相当简单。用户可以非常简单的创建一个分层的可编辑属性列表和表示任何数据类型的项。属性表格内建排序和分组功能。 ![](https://box.kancloud.cn/2016-07-19_578d913a8240f.png) ####   #### 依赖关系 - [datagrid](#) ####   #### 用法 使用标签创建一个属性表格。注意:列已经内置不需要再去声明它。 1. **<table** id="pg" class="easyui-propertygrid" style="width:300px"   1.         data-options="url:'get_data.php',showGroup:true,scrollbarSize:0"**></table>**   <table id="pg" class="easyui-propertygrid" style="width:300px" data-options="url:'get_data.php',showGroup:true,scrollbarSize:0"></table> 使用Javascript创建一个属性表格。 1. **<table** id="pg" style="width:300px"**></table>**   <table id="pg" style="width:300px"></table> 1. $('#pg').propertygrid({    1.     url: 'get_data.php',    1.     showGroup: true,    1.     scrollbarSize: 0    1. });   $('#pg').propertygrid({ url: 'get_data.php', showGroup: true, scrollbarSize: 0 }); 追加一个新行到属性表格。 1. var row = {    1.   name:'AddName',    1.   value:'',    1.   group:'Marketing Settings',    1.   editor:'text'   1. };    1. $('#pg').propertygrid('appendRow',row);   var row = { name:'AddName', value:'', group:'Marketing Settings', editor:'text'};$('#pg').propertygrid('appendRow',row); ####   #### 行数据 属性表格扩展自[datagrid](#)(数据表格)。它的行数据格式和数据表格相同。作为一个属性行,以下字段是必须的: name:字段名称。 value:字段值。 group:分组字段值。 editor:在编辑属性值的时候使用的编辑器对象。 行数据示例: 1. {"total":4,"rows":[    1.     {"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},    1.     {"name":"Address","value":"","group":"ID Settings","editor":"text"},    1.     {"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},    1.     {"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{    1.         "type":"validatebox",    1.         "options":{    1.             "validType":"email"   1.         }    1.     }}    1. ]}   {"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](#)(数据表格),属性表格新增的的属性如下: <table class="doc-table" align="left"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></th></tr><tr><td>showGroup</td> <td>boolean</td> <td>定义是否显示属性分组。</td> <td>false</td></tr><tr><td>groupField</td> <td>string</td> <td>定义分组的字段名。</td> <td>group</td></tr><tr><td>groupFormatter</td> <td>function(group,rows)</td> <td>定义如何格式化分组的值。该函数拥有如下参数:<br/>group:分组字段值。<br/>rows:属于该分组的所有行。 </td> <td/></tr></tbody></table> ####   ####   ####   ####   ####   ####   ####   #### 方法 属性表格的方法扩展自[datagrid](#)(数据表格),属性表格新增的方法如下: | **方法名** | **方法参数** | **描述** | |-----|-----|-----| | expandGroup | groupIndex | 展开指定分组。如果'groupIndex'参数未指定,则展开所有分组。 | | collapseGroup | groupIndex | 折叠指定分组。如果'groupIndex'参数未指定,则折叠所有分组。 |