返回介绍

jQuery EasyUI 数据网格与树插件 – Propertygrid 属性网格

发布于 2018-05-28 02:44:46 字数 2671 浏览 1096 评论 0 收藏 0

pre { white-space: pre-wrap; } jQuery EasyUI 插件

扩展自 $.fn.datagrid.defaults。通过 $.fn.propertygrid.defaults 重写默认的 defaults。

属性网格(propertygrid)为用户提供李露兰和编辑属性的接口。属性网格是内联编辑的数据网格。它相当容易使用。用户可以很容易就创建一个可编辑属性的分层列表和表示任何数据类型的项目。属性网格带有内置的排序和分组特征。

依赖

  • datagrid

用法

在标记中创建一个属性网格(propertygrid)。请注意,列是内置的,不需要再次声明。

<table id="pg"
    data-options="url:'get_data.php',showGroup:true,scrollbarSize:0"></table>

使用 javascript 创建一个属性网格(propertygrid)。

<table id="pg"></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)相同。作为一个属性行,下列字段是必需的:
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)。下面是为属性网格(propertygrid)添加的属性。

名称类型描述默认值
showGroupboolean定义是否显示属性组。false
groupFieldstring定义组的字段名。group
groupFormatterfunction(group,rows)定义如何格式化组的值。该函数包括下列参数:
group:组的字段名。
rows:属于改组的行。

方法

该方法扩展自数据网格(datagrid)。下面是为属性网格(propertygrid)添加的方法。

名称参数描述
expandGroupgroupIndex展开指定的组。如果 'groupIndex' 参数未分配,则展开所有的组。
collapseGroupgroupIndex折叠指定的组。如果 'groupIndex' 参数未分配,则折叠所有的组。
jQuery EasyUI 插件

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文