PropertyGrid(属性表格)

继承自$.fn.datagrid.defaults。使用$.fn.propertygrid.defaults重写默认值对象。

属性表格提供The propertygrid provide给用户浏览和编辑对象属性的一个接口。属性表格是一个行内可编辑数据表格。它使用起来相当简单。用户可以非常简单的创建一个分层的可编辑属性列表和表示任何数据类型的项。属性表格内建排序和分组功能。

 

依赖关系

 

用法

使用标签创建一个属性表格。注意:列已经内置不需要再去声明它。

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

使用Javascript创建一个属性表格。

  1. <table id="pg" style="width:300px"></table>  
  1. $('#pg').propertygrid({   
  2.     url: 'get_data.php',   
  3.     showGroup: true,   
  4.     scrollbarSize: 0   
  5. });  

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

  1. var row = {   
  2.   name:'AddName',   
  3.   value:'',   
  4.   group:'Marketing Settings',   
  5.   editor:'text'  
  6. };   
  7. $('#pg').propertygrid('appendRow',row);  

 

行数据

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

行数据示例:

  1. {"total":4,"rows":[   
  2.     {"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},   
  3.     {"name":"Address","value":"","group":"ID Settings","editor":"text"},   
  4.     {"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},   
  5.     {"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{   
  6.         "type":"validatebox",   
  7.         "options":{   
  8.             "validType":"email"  
  9.         }   
  10.     }}   
  11. ]}  

 

属性

属性表格的属性扩展自datagrid(数据表格),属性表格新增的的属性如下:

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

 

方法

属性表格的方法扩展自datagrid(数据表格),属性表格新增的方法如下:

方法名 方法参数 描述
groups none

返回所有分组。每一组包含如下属性。(该方法自1.4.4版开始可用)
value:分组的字段值。
rows:属于该分组的行。
startIndex:当前行相对于所有行的索引。

expandGroup groupIndex 展开指定分组。如果'groupIndex'参数未指定,则展开所有分组。
collapseGroup groupIndex 折叠指定分组。如果'groupIndex'参数未指定,则折叠所有分组。
关注编程学问公众号