jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

扩展自 $.fn.datagrid.defaults，用 $.fn.treegrid.defaults 重写了 defaults。
依赖
datagrid
用法


代码如下:

<table id="tt"></table>

代码如下:

$('#tt').treegrid({
url:'treegrid_data.json',
treeField:'name',
columns:[[
{title:'Task Name',field:'name',width:180},
{field:'persons',title:'Persons',width:60,align:'right'},
{field:'begin',title:'Begin Date',width:80},
{field:'end',title:'End Date',width:80}
]]
});

特性
其特性扩展自 datagrid，下列是为 treegrid 增加的特性。


















名称

类型

说明

默认值

treeField

string

定义树节点的字段。

null

animate

boolean

定义当节点展开或折叠时是否显示动画效果。

false

事件

其事件扩展自 datagrid，下列是为 treegrid 增加的事件。


























































名称

参数

说明

onClickRow

row

当用户点击一个节点时触发。

onDblClickRow

row

当用户双击一个节点时触发。

onBeforeLoad

row, param

发出一个加载数据的请求前触发，返回 false 就取消加载动作。

onLoadSuccess

row, data

当数据加载成功时触发。

onLoadError

arguments

当数据加载失败时触发， arguments 参数和 jQuery.ajax 的 'error' 方法一样。

onBeforeExpand

row

节点展开前触发，返回 false 就取消展开动作。

onExpand

row

当节点展开时触发。

onBeforeCollapse

row

节点折叠前触发，返回 false 就取消折叠动作。

onCollapse

row

当节点折叠时触发。

onContextMenu

e, row

当右键点击节点时触发。

onBeforeEdit

row

当用户开始编辑节点时触发。

onAfterEdit

row,changes

当用户完成编辑时触发。

onCancelEdit

row

当用户取消编辑节点时触发。

方法














































































































































名称

参数

说明

options

none

返回 treegrid 的options 。

resize

options

设置 treegrid 的尺寸， options 参数包含两个特性：
width： treegrid 的新宽度。
height： treegrid 的新高度。

fixRowHeight

id

适应指定行的高度。

loadData

data

加载 treegrid 的数据。

reload

id

重新加载 treegrid 的数据。

reloadFooter

footer

重新加载脚部数据。

getData

none

获取加载的数据。

getFooterRows

none

获取脚部数据。

getRoot

none

获取根节点，返回节点对象。

getRoots

none

获取根节点们，返回节点数据。

getParent

id

获取父节点。

getChildren

id

获取子节点们。

getSelected

none

获取选中的节点并返回它，如果没有选中节点就返回 null。

getSelections

none

获取所有的选中节点们。

getLevel

id

获取指定节点的层级。

find

id

找到指定节点并返回此节点数据。

select

id

选择节点。

unselect

id

取消选择节点。

selectAll

none

选择全部节点。

unselectAll

none

取消选择全部节点。

collapse

id

折叠节点。

expand

id

展开节点。

collapseAll

id

折叠全部节点。

expandAll

id

展开全部节点。

expandTo

id

从根部展开一个指定的节点。

toggle

id

切换节点的展开/折叠状态。

append

param

追加节点们到父节点。 param 参数包含下列特性：
parent：DOM 对象，追加到的父节点，如果没有分配，则追加为根节点。
data：数组，节点们的数据。

remove

id

移除节点和它的子节点们。

refresh

id

刷新指定的节点。

beginEdit

id

开始编辑节点。

endEdit

id

结束编辑节点。

cancelEdit

id

取消编辑节点。

getEditors

id

获取指定行的编辑器们。每个编辑器有下列特性：
actions：编辑器可以做的动作们。
target：目标编辑器的 jQuery 对象。
field：字段名。
type：编辑器的类型。

getEditor

options

获取指定的编辑器， options 参数包含两个特性：
id：行节点的 id。
field：字段名。

赞 (0)

相关推荐

  • EasyUI创建人员树的实例代码

    EasyUI创建人员树的实例代码

    最近做了一个树状的下拉列表,在这里记录一下,以后可以直接使用 项目中的树状下拉列表是用来选择人员用的,具体实现展示如下: 先说一说功能,左边的人员数是提供选人的,当点击中间的按钮,选中的人员会直接移到右边,如果要删除已选中的人员,只需要双击右边人的姓名即可,点击确定进行集体的业务逻辑操作,一般就是新增人员到某一个表中. 我们再来看看这个DIV的具体代码,由于项目中在多个地方都使用到了这个人员树,所以我把这个DIV抽象出来当作一个公共的jsp页面.如需调用,只需要include这个jsp即可 us

  • EasyUI Tree+Asp.net实现权限树或目录树导航的简单实例

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Manage_Main" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

  • jquery中EasyUI实现异步树

    前台使用EasyUI实现 . EasyUI向后台传递一个id参数 . 第一次加载 , 向后台传递的id为null . 之后每次将树节点展开 , 会向后台传递一个当前节点的 id . Control层 : 复制代码 代码如下: /**   * tree   */  @RequestMapping(value = "/tree.do")  public void mytree(HttpServletResponse response, String id) {   this.writeJs

  • jquery中EasyUI实现同步树

    在JS中,将显示树的url地址写成control的地址即可. control: 复制代码 代码如下: @RequestMapping(value = "/tree")  public void tree(HttpServletRequest request, HttpServletResponse response) throws IOException {   this.writeJson(response, bookService.getTree());  } dao: 复制代码

  • 浅谈EasyUi ComBotree树修改 父节点选择的问题

    本人在使用 Easy UI 期间发现了一个不太适合项目的bug,可能也不算bug把 . 毕竟不同项目背景 取舍不同. 我在做网元树选择的时候  发现当选取父节点后,子节点都会被选择  返回  .但是如果我们选中父节点后没有必要选择子节点. 故对源脚本作适当修改 下拉框树修改 父节点选中后只显示父节点  取消返回子节点 修改方法 找到树的选择函数 进行遍历判断  查找关键字 combotree multiple 大约行数 10564 function _7d5(_7d6) { var opts=$

  • EasyUi combotree 实现动态加载树节点

    推荐阅读: 简介EasyUI datagrid editor combogrid搜索框的实现 EasyUi中的Combogrid 实现分页和动态搜索远程数据 easyui 1.2.4例子中并没有给出动态加载树节点的例子,只好自己研究. 从源码中可知可以看出combotree 是继承 combo 和 tree两个控件,所以在展开其下级子节点时,把combotree内置的tree的options选项的url重置成一个动态取选择值的url,代码如下: $('#cc').combotree({ url:

  • 轻松学习jQuery插件EasyUI EasyUI创建树形菜单

    轻松学习jQuery插件EasyUI EasyUI创建树形菜单

    一.EasyUI使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 <ul> 元素中.无序列表的 <ul> 元素提供一个基础的树(Tree)结构.每一个 <li> 元素将产生一个树节点,子 <ul> 元素将产生一个父树节点. 创建树形菜单(Tree) <ul class="easyui-tree"> <li> <span>Folder</s

  • Jquery easyui 实现动态树

    在上篇文章给大家介绍了jquery中EasyUI实现异步树,本文给大家介绍jquery easyui实现动态树. 首先是在jsp页面中引入相关的js文件 在body中加入流程列表,通过后天拼接json数据 具体内容请看下面代码详情吧. 首选在jsp页面中引入相关的js <link rel="stylesheet" type="text/css" href="<%=path %>/css/jquery_easyui/themes/defau

  • jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

    扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults. 依赖 datagrid 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').treegrid({ url:'treegrid_data.json', treeField:'name', columns:[[ {title:'Task Name',field:'name'

  • jQuery EasyUI API 中文文档 - Tree树使用介绍

    用 $.fn.tree.defaults 重写了 defaults. 依赖 draggable droppable 用法 Tree 能在 <ul> 元素里定义,此标记可以定义为叶节点和子节点.下面是一个示例: 复制代码 代码如下: <ul id="tt"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> &

  • jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults,用 $.fn.combogrid.defaults 重写了 defaults . 依赖 combo datagrid 用法 复制代码 代码如下: <select id="cc" name="dept" style="width:250px;"></select> 复制代码 代码如下: <input id="cc

  • jQuery EasyUI API 中文文档 - DataGrid数据表格

    扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'

  • jQuery EasyUI API 中文文档 - PropertyGrid属性表格

    扩展自 $.fn.datagrid.defaults,用 $.fn.propertygrid.defaults 重写了 defaults. 依赖 datagrid 用法 复制代码 代码如下: <table id="pg"></table> 复制代码 代码如下: $('#pg').propertygrid({ url:'propertygrid_data.json', showGroup:true }); 特性 其特性扩展自 datagrid,下列是为 prope

  • jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍

    jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍

    扩展自 $.fn.linkbutton.defaults.用 $.fn.menubutton.defaults 重写了defaults. 依赖 menu linkbutton 用法 复制代码 代码如下: <a href="javascript:void(0)" id="mb" iconCls="icon-edit">Edit</a> <div id="mm" style="width:1

  • jQuery EasyUI API 中文文档 - ComboTree组合树

    jQuery EasyUI API 中文文档 - ComboTree组合树

    扩展自 $.fn.combo.defaults 和 $.fn.tree.defaults.用 $.fn.combotree.defaults 重写了defaults. 依赖 combo tree 用法 <select id="cc" style="width:200px;"></select> <input id="cc" value="01"> 复制代码 代码如下: $('#cc').co

  • jQuery EasyUI API 中文文档 - Documentation 文档

    每个easyui组件都有特性(property).方法(method)和事件(event),用户可以很容易地扩展它们. 特性 特性在jQuery.fn.{plugin}.defaults里定义.例如, dialog的特性在jQuery.fn.dialog.defaults里定义. 事件 事件(回调函数)也在jQuery.fn.{plugin}.defaults里定义. 方法 方法在jQuery.fn.{plugin}.methods里定义.每个方法有两个参数:jq和param.第一个参数'jq'

  • jQuery EasyUI API 中文文档 - ComboBox组合框

    jQuery EasyUI API 中文文档 - ComboBox组合框

    扩展自 $.fn.combo.defaults. 用 $.fn.combobox.defaults 重写了 defaults. 依赖 combo 用法 <select id="cc" name="dept" style="width:200px;"> <option value="aa">aitem1</option> <option>bitem2</option>

  • jQuery EasyUI API 中文文档 - Draggable 可拖拽

    用$.fn.draggable.defaults重写默认的defaults. 用法 复制代码 代码如下: <div id="dd" style="width:100px;height:100px;"> <div id="title" style="background:#ccc;">title</div> </div> 复制代码 代码如下: $('#dd').draggable(

随机推荐