@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'没有分配,折叠所有组. |