本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于
DataGrid(数据表格)组件

一. 加载方式
//建立一个 JSON 文件
[{
"id" : 1,
"name" : "系统管理",
"date" : "2015-05-10",
"children" : [{
"id" : 2,
"name" : "主机信息",
"date" : "2015-05-11"
}]
}, {
"id" : 3,
"name" : "会员管理",
"date" : "2015-05-10",
"children" : [{
"id" : 4,
"name" : "认证审核",
"date" : "2015-05-11"
}]
}]
//class 加载方式
<table class="easyui-treegrid" style="width:380px;height:150px"
data-options="url:'treegrid.json',idField:'id',treeField:'name'">
<thead>
<tr>
<th data-options="field:'name',width:180">菜单名称</th>

<th data-options="field:'date',width:180">创建时间</th>
</tr>
</thead>
</table>
//JS 加载方式
<table id="box" style="width:380px;height:150px;"></table>
$('#box').treegrid({
url : 'treegrid.json',
idField : 'id',
treeField : 'name',
columns : [[
{
title : '菜单名称',
field : 'name',
width : 180,
},
{
title : '创建时间',
field : 'date',
width : 180,
}
]],
});

二. 属性列表
树形表格扩展自 datagrid(数据表格),树形表格新增的属性如下:

方法和 DataGrid 一致,不在重复!略。

三. 事件列表
树形表格的事件扩展自 datagrid(数据表格),树形表格新增的时间如下:

四. 方法列表
很多方法都使用'id'命名参数,而'id'参数代表树节点的值

TreeGrid( 树形表格)的更多相关文章

  1. 第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件

    jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...

  2. 【整理】treeGrid 树形表格

    treeGrid 树形表格 https://fly.layui.com/extend/treeGrid/

  3. treegrid树形表格的完美运用

    一 问题描述: 树形表格TreeGrid在日常项目中还是运用的比较多的,哪我们在项目中,应该怎么引入和使用 TreeGrid呢? 二 使用步骤 1.首先我们需要在项目中,引入TreeGrid组件  需 ...

  4. easyUI中treegrid组件构造树形表格(简单数据类型)+ssm后台

    这几天做的项目要求用树形表格的形式展示一部分数据,于是就想到了使用easyUI的treegrid组件,但几经翻查各种资料,发现数据类型大多采取标准数据类型,即包含children元素的数据类型,小编查 ...

  5. Bootstrap treegrid 实现树形表格结构

    前言 :最近的项目中需要实现树形表格功能,由于前端框架用的是bootstrap,但是bootstrapTable没有这个功能所以就找了一个前端的treegrid第三方组件进行了封装.现在把这个封装的组 ...

  6. ELement-UI之树形表格(treeTable&&treeGrid)

    先上图来一波 支持无限层级,支持新增子级时自动打开父级,支持编辑时自动打开父级,执行操作时自带动画效果,支持初始化时设置全部打开或者关闭,支持一键展开与关闭丝滑般的无延迟 由于基于el-table扩展 ...

  7. ExtJS4.2学习(15)树形表格(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-27/185.html --------------- ...

  8. easyui源码翻译1.32--TreeGrid(树形表格)

    前言 扩展自$.fn.datagrid.defaults.使用$.fn.treegrid.defaults重写默认值对象.下载该插件翻译源码 树形表格用于显示分层数据表格.它是基于数据表格.组合树控件 ...

  9. 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格

    EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...

随机推荐

  1. libthrift0.9.0解析(一)之TServer

    TServer 属性serverTransport 为TServerTransport类型,类图如下: 构造函数,简单根据args设置几个成员,大部分是工厂类: protected TServer(A ...

  2. 用CALayer实现淡入淡出的切换图片效果

    由于直接更改layer的contents显示的隐式动画切换的时候的动画持续时间没办法控制, 切换效果不尽人意,所以这里配合了CABasicAnimation实现淡入淡出的切换效果, 另外还可以使用组合 ...

  3. JavaScript--基本包装类型+Math对象

    1. 基本包装类型 1)为了便于操作基本类型值,ECMAScript提供了3个特殊的引用类Boolean, Number, String       每当读取一个基本类型值的时候,后台就会创建一个对应 ...

  4. android编程之悬浮窗体

    用过手机360和QQ手机管家等一些软件的朋友,会发现,在这些应用中,会出现一个悬浮窗体,例如QQ手机管家中打电话的场景: 这种窗体除了会显示外,还可以移动它的位置,并且一直显示.除了关闭当前程序外,窗 ...

  5. Linux下静态编译Qt

    Qt采用编译的方式安装的时候,配置中默认的编译方式是动态编译的,但是有时候你编写的程序要发布出去,带很多动态库文件是很繁琐的,此时就需要静态编译你的程序,Qt要实现静态编译必须库文件也是静态编译的,所 ...

  6. android 截取指定位置字符串

    String str = "s\ziyuan"; String newStr = str.subString(str.indexOf("\\"),str.len ...

  7. 转: linux下错误的捕获:errno和strerror的使用

    经常在调用linux 系统api 的时候会出现一些错误,比方说使用open() write() creat()之类的函数有些时候会返回-1,也就是调用失败,这个时候往往需要知道失败的原因.这个时候使用 ...

  8. 2014-07-28 使用Axure RP进行手机端BBS的原型设计

    今天是在吾索实习的第14天.因本公司的微信公众号需要有一个对外的技术交流平台,所以我们小组打算设计一个手机端的BBS以满足其要求.首先,我们需要做的是进行数据库设计与原型设计,然后提交给经理验收,看看 ...

  9. 笔记:java并发编程实践1

    Java 5.0 adds ConcurrentHashMap, a replacement for synchronized hash-based Map implementations, and ...

  10. Android写入文件操作权限

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses- ...