jQuery EasyUI 数据网格 - 创建属性网格

  属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组。您可以简单地创建一个可编辑属性的分层(hierarchical)列表。

  设置 HTML

  

  url="propertygrid_data.json"

  showGroup="true" scrollbarSize="0"

  >

  准备 json 数据

  [

  {"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},

  {"name":"Address","value":"","group":"ID Settings","editor":"text"},

  {"name":"Age","value":"40","group":"ID Settings","editor":"numberbox"},

  {"name":"Birthday","value":"01/02/2012","group":"ID Settings","editor":"datebox"},

  {"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"

  }

  }},

  {"name":"FrequentBuyer","value":"false","group":"Marketing Settings","editor":{

  "type":"checkbox",

  "options":{

  "on":true,

  "off":false

  }

  }}

  ]

  正如您所看到的,属性网格(property grid)的创建不需要任何的 javascript 代码。您可以简单地继承扩展 editor 类型。

  下载 jQuery EasyUI 实例

  jeasyui-datagrid-datagrid20.zip

  本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)

雷林鹏分享:jQuery EasyUI 数据网格 - 创建属性网格的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建复杂工具栏

    jQuery EasyUI 数据网格 - 创建复杂工具栏 数据网格(datagrid)的工具栏(toolbar)可以包含按钮及其他组件. 您可以通个一个已存在的 DIV 标签来简单地定义工具栏布局,该 ...

  2. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建列组合

    jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格(DataGrid)可以创建列组合,如下所示: 在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 ...

  3. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图

    jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具 ...

  4. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建页脚摘要

    jQuery EasyUI 数据网格 - 创建页脚摘要 在本教程中,我们将向您展示如何在数据网格(datagrid)页脚显示摘要信息行. 为了显示页脚行,您应该设置 showFooter 属性为 tr ...

  5. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建子网格

    jQuery EasyUI 数据网格 - 创建子网格 使用数据网格(datagrid)的详细视图,用户可以展开一行来显示附加的详细信息. 任何内容都可以加载作为行详细,子网格也可以动态加载. 本教程将 ...

  6. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列

    jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 动态改变列

    jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...

  8. 雷林鹏分享:jQuery EasyUI 数据网格 - 格式化列

    jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式 ...

  9. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置排序

    jQuery EasyUI 数据网格 - 设置排序 本实例演示如何通过点击列表头来排序数据网格(DataGrid). 数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排 ...

随机推荐

  1. JSON.parse()和JSON.stringify()的解析与用途

    JSON.parse()和JSON.stringify()的解析与用途 1.parse用于从一个字符串中解析出json对象 如: var str = '{"name":" ...

  2. springmvc用model传值到jsp页面,el表达式引用接收不到传递过来的值

    springmvc用model传值到jsp页面,el表达式引用接收不到传递过来的值 查看下controller层代码可以发现,写的是没有错误的. @RequestMapping("list. ...

  3. Oracle启动关闭

    启动: [oracle@oracleSigle ~]$ sqlplus / as sysdba   SQL*Plus: Release 11.2.0.1.0 Production on Wed Nov ...

  4. 【托业】【新东方托业全真模拟】TEST05~06-----P5~6

    credit A with B 把A归功于B present A with B 给A赠送B proofread thoroughly 彻底地校对:exclusively 专门地:独占地:apparen ...

  5. 160A

    #include <stdio.h> int main() { int n; int sum1=0, sum2=0, sum3=0; int x, y, z; scanf("%d ...

  6. 20175211 2018-2019-2 《Java程序设计》第二周学习总结

    目录 教材学习内容总结 第二章 第三章 教材学习中的问题和解决过程 代码调试中的问题和解决过程 代码托管 上周考试错题总结 其他(感悟.思考等,可选) 学习进度条 参考资料 教材学习内容总结 第二章 ...

  7. ASP.NET Core 之 Identity

    Claims:声明(证件单元)Identity:身份Principal:当事人Authentication :认证Authorization:授权 http://www.cnblogs.com/sav ...

  8. LCA Tarjan方法

    LCA Tarjan方法 不得不说,高中生好厉害,OI大佬,感觉上个大学好憋屈啊! 说多了都是眼泪 链接拿去:http://www.cnblogs.com/JVxie/p/4854719.html

  9. OOP面向对象编程(下)

    我们怎么去模拟重载,在javasceipr中我们可以通过参数的类型区别或者数量的区别,来去让同样一个函数名字,可以根据不同的参数列表的情况来去调用相应的函数. javascript中函数类型是不确定的 ...

  10. Docker Registry V2 with Nginx

    安装 nginx 修改/etc/yum.repos.d/nginx.repo [nginx] name=nginx repo baseurl=http://nginx.org/packages/cen ...