JQuery EasyUI Tree
来源:互联网 发布:淘宝店流量突然下降 编辑:程序博客网 时间:2024/05/17 02:44
Tree 数据转换
所有节点都包含以下属性:
- id:节点id,这个很重要到加载远程服务器数据 which is important to load remote data
- text: 显示的节点文本
- state: 节点状态, 'open' 或者 'closed', 默认是 'open'. 当设置为 'closed', 节点所有的子节点将从远程服务器站点加载
- checked: 指明检查节点是否选中.
- attributes: 可以添加到节点的自定义属性
- children: 一个节点数组,定义一些子节点
一些示例:
- [{
- "id":1,
- "text":"Folder1",
- "iconCls":"icon-save",
- "children":[{
- "text":"File1",
- "checked":true
- },{
- "text":"Books",
- "state":"open",
- "attributes":{
- "url":"/demo/book/abc",
- "price":100
- },
- "children":[{
- "text":"PhotoShop",
- "checked":true
- },{
- "id": 8,
- "text":"Sub Bookds",
- "state":"closed"
- }]
- }]
- },{
- "text":"Languages",
- "state":"closed",
- "children":[{
- "text":"Java"
- },{
- "text":"C#"
- }]
- }]
异步加载树
tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个远程服务器站点返回json数据用于填充tree来异步满足异步加载需求.例如:
- <ul class="easyui-tree" data-options="url:'get_data.php'"></ul>
tree的加载是通过URL 'get_data.php'站点.子节点的加载依赖于父节点的状态.当展开一个关闭节点,如果节点没有子节点加载,将发送节点id值作为http参数,参数命名为'id'到远程服务器,通过以上URL定义.检索子节点数据
看看这个从服务器返回的数据
- [{
- "id": 1,
- "text": "Node 1",
- "state": "closed",
- "children": [{
- "id": 11,
- "text": "Node 11"
- },{
- "id": 12,
- "text": "Node 12"
- }]
- },{
- "id": 2,
- "text": "Node 2",
- "state": "closed"
- }]
节点1和节点2都是closed状态的,可以直接显示它们的子节点,当展开节点2时,发送值2到远程服务器检索子节点
这个教程创建异步的树click me!!!,展示如何写服务器端代码根据需求返回tree数据.
一、方法
$('#tt').tree({data: [{text: 'Item1',state: 'closed',children: [{text: 'Item11'},{text: 'Item12'}]},{text: 'Item2'}]});nullloaderfunction(param,success,error)定义如何从远程服务器加载数据.返回false将终止这个动作.这个函数提供以下参数:
param: 这个参数对象将传送给远程服务器.
success(data): 当检索数据成功之后的回调函数.
error(): 当检索数据出现异常的时候调用的回调函数.json loaderloadFilterfunction(data,parent)返回显示过滤后的数据. 返回的数据是标准的tree格式.这个函数提供以下参数:
data:装载的是原始数据.
parent: DOM 对象, 指定父节点.
二、事件
许多回调函数提供'node'参数, 都包含以下属性:
- id: 绑定到节点的标识值.
- text:显示文本.
- iconCls: 显示icon的css样式.
- checked: 节点是否选中.
- state: 节点状态, 'open' 或者 'closed'.
- attributes: 绑定到节点的自定义属性.
- target: 目标 DOM 对象.
$('#tt').tree({onClick: function(node){alert(node.text); // alert node text property when clicked}});onDblClicknode当用户双击一个节点的时候触发.onBeforeLoadnode, param当一个请求加载数据在前触发, 返回false取消加载动作.onLoadSuccessnode, data当数据加载成功之后触发.onLoadErrorarguments当数据加载失败触发,arguments参数和ajax jQuery 的'error'一样 .onBeforeExpandnode节点展开之前触发,返回false取消展开动作.onExpandnode当节点展开之后触发.onBeforeCollapsenode节点折叠之前触发,返回false将取消折叠动作.onCollapsenode当节点折叠之后触发.onChecknode, checked当用户点击checkbox的时候触发.onBeforeSelectnode节点被选中之前触发,返回false取消选择动作.onSelectnode当节点选中之后触发.onContextMenue, node当在节点上右键点击的时候触发,代码示例:
// 右键点击节点然后显示上下文菜单$('#tt').tree({onContextMenu: function(e, node){e.preventDefault();// 选择节点$('#tt').tree('select', node.target);// 显示上下文菜单$('#mm').menu('show', {left: e.pageX,top: e.pageY});}});//上下文菜单定义如下:<div id="mm" class="easyui-menu" style="width:120px;"><div onclick="append()" data-options="iconCls:'icon-add'">Append</div><div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div></div>onDroptarget, source, point当节点被放置的时候触发.
target: DOM 对象,这个节点是被放置的目标.
source: 源节点.
point:指明drop操作,可用值有: 'append','top' or 'bottom'.onBeforeEditnode在编辑节点之前触发.onAfterEditnode编辑节点之后触发.onCancelEditnode取消编辑动作时候触发.
三、方法
// 查找一个节点然后返回它var node = $('#tt').tree('find', 12);$('#tt').tree('select', node.target);selecttarget选择一个节点,target 参数指明节点DOM对象.checktarget设置特定的节点选中.unchecktarget设置特定的节点取消选中.collapsetarget折叠一个节点, target 参数指明节点DOM对象.expandtarget展开一个节点, target 参数指明节点DOM对象,当节点的状态是closed的时候 和没有子节点,节点id值(参数命名为'id')将发送给服务器请求子节点数据.collapseAlltarget折叠所有节点.expandAlltarget展开所有节点.expandTotarget展开从根节点到指定的节点 .appendparam附加一些子节点到父节点中. param参数有两个属性:
parent: DOM 对象,被添加到的父节点,如果没有分配,附加到根节点.
data: array, the nodes data. Code example:
// 添加一些节点到选择的节点var selected = $('#tt').tree('getSelected');$('#tt').tree('append', {parent: selected.target,data: [{id: 23,text: 'node23'},{text: 'node24',state: 'closed',children: [{text: 'node241'},{text: 'node242'}]}]});toggletarget切换expanded/collapsed 节点的状态,target 参数指明节点DOM对象.insertparam插入一个节点到特定节点的之前或之后.'param'参数包含以下属性:
before: DOM 对象,节点插入到之前.
after: DOM 对象, 节点插入到之后.
data: object, 节点数据.
以下代码展示,如何插入新节点到选择节点之前:
var node = $('#tt').tree('getSelected');if (node){$('#tt').tree('insert', {before: node.target,data: {id: 21,text: 'node text'}});}removetarget移除一个节点和其子节点,target 参数指明节点DOM对象.poptarget移除一个节点和其子节点,这个方法和remove类似,但是它返回移除的节点数据.updateparam更新特定的节点. 'param'参数包含以下属性:
target(DOM 对象, 更新的节点),id,text,iconCls,checked,等等.
示例代码:
// 更新选择的节点文本var node = $('#tt').tree('getSelected');if (node){$('#tt').tree('update', {target: node.target,text: 'new text'});}enableDndnone启用 drag 和 drop 功能.disableDndnone禁用 drag 和drop 功能.beginEdittarget开始编辑一个节点.endEdittarget结束编辑一个节点.cancelEdittarget取消编辑一个节点.
1 0
- jquery easyui Tree API
- jquery easyui tree实战
- JQuery EasyUI Tree
- jQuery EasyUI-Tree使用
- jQuery easyUI tree
- JQuery EasyUI Tree
- Jquery easyui tree
- jquery easyui tree使用
- jquery easyui tree
- jQuery EasyUI详解-EasyUI树形控件tree
- jquery easyui tree实现延迟
- Jquery easyUI 树形插件tree
- Jquery easyui tree的使用
- jQuery EasyUI tree的 使用
- jQuery EasyUI tree的 使用
- Jquery easyui tree的使用
- Jquery easyui tree的使用
- Jquery easyui tree的使用
- android短信接收/发送
- 程序员们 你们是这样设置密码的吗?
- 人脸库
- 通过dataGridView1更改数据库的资料
- c++ 封装string
- JQuery EasyUI Tree
- c++builder调用vc的dll
- Android初试Volley
- iOS_静态库合并
- Yii2.0-数据库事务应用
- 自动布局xib页面的机型匹配精典问题及解决方案
- Eclipse中jad反编码工具的使用
- [leetcode 157] Read N Characters Given Read4
- 获取样式currentstyle(),getComputedStyle()