easyUI PropertyGrid

@author YHC

从$.fn.datagrid.defaults继承,覆盖默认值 $.fn.propertygrid.defaults

propertygrid 提供用户一个接口,浏览和编辑对象属性,propertygrid 是一个内联的datagrid编辑器,使用相当简单,用户可以很简单的创建一个分层可编辑属性列表,代表任何数据类型项,propertygrid 带有内置的排序和分组功能.

相关依赖

• datagrid

使用

按照标记创建 propertygrid ,注意它的行是内置的,不需要重新创建.

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

使用javascript创建 propertygrid 

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

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

附加一个新行到 propertygrid

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

Row Data

propertygrid从datagrid继承.行数据格式和datagrid相同,作为一个property row,以下字段是必须的:

 name:字段名称.
value: 可编辑的字段值.
group:分组字段值.
editor: 编辑器,当编辑属性值的时候.
row data 示例:

{"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继承, 以下是propertygrid新增属性 .

Name	Type	Description	Default
showGroup	boolean	定义是否显示属性组.	false
groupField	string	定义组字段名.	group
groupFormatter	function(group,rows)	定义如何转换组值. 这个函数提供以下参数: group:组字段值. rows: rows属于它的分组.

方法

方法从 datagrid继承, 以下是propertygrid新增方法.

Name	Parameter	Description
expandGroup	groupIndex	展开特定组.如果'groupIndex'没有分配,展开所有组.
collapseGroup	groupIndex	折叠特定组. 如果'groupIndex'没有分配,折叠所有组.

   以上如有错误信息,,请指出,thanks!