欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » JQuery EasyUI 1.3.6官方API文档中文版 » 正文

PropertyGrid(属性表格)

创建时间:2014年09月04日 10:15  阅读次数:(9504)
分享到:

PropertyGrid(属性表格)

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

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

 

依赖关系

  • datagrid

 

用法

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

  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(数据表格),属性表格新增的方法如下:

方法名 方法参数 描述
expandGroup groupIndex 展开指定分组。如果'groupIndex'参数未指定,则展开所有分组。
collapseGroup groupIndex 折叠指定分组。如果'groupIndex'参数未指定,则折叠所有分组。
来源:
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf】

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论1条
  • #1楼  评论人:zz  评论时间:2016-10-30 22:00:31
  • 如何接受从url发送过来的数据
发表评论:
留言人:
内  容:
请输入问题 15+3=? 的结果(结果是:18)
结  果: