使用须知
如何开始
安装
全局元素
样式重置
文字
颜色
徽章
提示框
表格
图标
栅格
原生组件
Panel
Accordion
Tabs
Layout
DataGrid
DataList
PropertyGrid
Tree
TreeGrid
LinkButton
Menu
MenuButton
SplitButton
SwitchButton
TabButton
Pagination
ProgressBar
SearchBox
Form
CheckBox
RadioBox
TextBox
PasswordBox
FileBox
TagBox
Combo
ComboBox
ComboGrid
ComboTree
ComboTreeGrid
ComboFilter
NumberBox
NumberSpinner
Calendar
DateBox
DateRangeBox
DateTimeBox
DateTimeRangeBox
TimeSpinner
DateTimeSpinner
Slider
ValidateBox
ImagesBox
Window
Dialog
Messager
Draggable
Droppable
Resizable
Tooltip
MaskedBox
扩展组件
头像
上传
时间轴
聊天
用户面板
消息面板
统计数据面板
Echart面板
圆形统计图
评论
相册
评分
文件
滚动条
二维码
条形码
天气
AT
编辑器
课程表
日程表
项目管理
客户管理
浏览器
FAQ
兼容插件
IconFont
Font Awesome
Ueditor
Ckeditor
Echarts
Plupload
Cropper
BaiduMap
AMap
Colpick
Nprogress
Gantt
GanttEditor
Raty
WebUploader
匿名
匿名 您还未登录

PropertyGrid

Document
Native
Basic
Customize Columns
Group Format
Plus
Extend

PropertyGrid Document

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

文档汉化:

汉化人:王锦阳
汉化语言:简体中文
个人博客:http://blog.sina.com.cn/richie696

依赖关系:

DataGrid

用法:

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

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

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

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

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

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

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

行数据:

属性表格扩展自datagrid(数据表格)。它的行数据格式和数据表格相同。作为一个属性行,以下字段是必须的:
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 返回所有分组。每一组包含如下属性。(该方法自1.4.4版开始可用)
value:分组的字段值。
rows:属于该分组的行。
startIndex:当前行相对于所有行的索引。
expandGroup groupIndex 展开指定分组。如果'groupIndex'参数未指定,则展开所有分组。
collapseGroup groupIndex 折叠指定分组。如果'groupIndex'参数未指定,则折叠所有分组。