propertygrid(属性表格)

属性(继承datagrid)

属性名 类型 含义
showGroup boolean 是否显示属性分组
groupField string 分组的字段名
groupFormatter function(group,rows) 如何格式化分组的值。该函数拥有如下参数:group:分组字段值。rows:属于该分组的所有行。

方法

方法名 参数 含义
expandGroup groupIndex 展开指定分组,没有参数,则展开全部
collapseGroup groupIndex 折叠指定分组,没有参数,则折叠全部

我的demo

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>dataGrid - jQuery EasyUI Demo</title>
  <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
  <link rel="stylesheet" type="text/css" href="../demo.css">
  <script type="text/javascript" src="../../jquery.min.js"></script>
  <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
  <script type="text/javascript">
  $(function(){
    var data = [
      {"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"
          }
      }}
    ];
    $('#pg').propertygrid({
        data: data,
        showGroup: true,
        scrollbarSize: 0,
    });
    $('#pg').propertygrid('collapseGroup');
    var row = {
      name:'AddName',
      value:'',
      group:'Marketing Settings',
      editor:'text'
    };
    $('#pg').propertygrid('appendRow',row);
  })
  </script>
<body  >
  <table id="pg" style="width:300px"></></table>
</body>
</head>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,856评论 25 709
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 32,174评论 18 399
  • 2017.02.22 可以练习,每当这个时候,脑袋就犯困,我这脑袋真是神奇呀,一说让你做事情,你就犯困,你可不要太...
    Carden阅读 5,212评论 0 1
  • 做自己想做的人,不要做他们想让你成为的人。不要接受他们的奴役,因为你的母亲让你来世上,给了你自由。读书改变命运不仅...
    喵了个喵__阅读 1,768评论 0 0
  • 好久没发新画了不是没画,是画得太慢! 这位猫大哥名曰“磨磨”,太磨人了…… 步骤: 1、线稿还是打了格子...
    花言画记阅读 4,410评论 2 14