Jquery easyui tree的使用
来源:互联网 发布:施耐德plc仿真软件 编辑:程序博客网 时间:2024/05/17 01:48
页面定义一个ui:
JS访问后台:后台实体Bean中需要的属性:按照此种格式填充数据就能得到下面的结果:
获取已勾选的节点数据:
还有一个功能,就是让tree的所有节点都勾选上或者取消勾选,在api中找了一下有一个方法:
checktarget选中指定节点。那我们只能是选中根节点后,实现全选。
getRootnone获取根节点,返回节点对象。全选:
取消选择:Jquery easyui tree Api:
Tree(树)
使用$.fn.tree.defaults重写默认值对象。
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
依赖关系
- draggable
- droppable
使用案例
树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。以下显示的元素将被用作树节点嵌套在<ul>元素中。
树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。
使用loadFilter函数处理来自Web Services的JSON数据。
树控件数据格式化
每个节点都具备以下属性:
- id:节点ID,对加载远程数据很重要。
- text:显示节点文本。
- state:节点状态,'open' 或 'closed',默认:'open'。如果为'closed'的时候,将不自动展开该节点。
- checked:表示该节点是否被选中。
- attributes: 被添加到节点的自定义属性。
- children: 一个节点数组声明了若干节点。
一些案例:
异步树控件
树控件内建异步加载模式的支持,用户先创建一个空的树,然后指定一个服务器端,执行检索后动态返回JSON数据来填充树并完成异步请求。例子如下:
树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点,如果节点没有加载子节点,它将会把节点id的值作为http请求参数并命名为'id',通过URL发送到服务器上面检索子节点。
下面是从服务器端返回的数据。
节点1和节点2是封闭的,当展开节点1的时候将直接显示它的子节点。当展开节点2的时候它将发送值(2)到服务器获取子节点。
属性
$('#tt').tree({data: [{text: 'Item1',state: 'closed',children: [{text: 'Item11'},{text: 'Item12'}]},{text: 'Item2'}]});nullformatterfunction(node)定义如何渲染节点的文本。
代码示例:
$('#tt').tree({formatter:function(node){return node.text;}});falseloaderfunction(param,success,error)定义如何从远程服务器加载数据。返回false可以忽略本操作。该函数具备以下参数:
param:发送到远程服务器的参数对象。
success(data):当检索数据成功的时候调用的回调函数。
error():当检索数据失败的时候调用的回调函数。json loaderloadFilterfunction(data,parent)返回过滤过的数据进行展示。返回数据是标准树格式。该函数具备以下参数:
data:加载的原始数据。
parent: DOM对象,代表父节点。
事件
很多事件的回调函数都包含'node'参数,其具备如下属性:
- id:绑定节点的标识值。
- text:显示的节点文本。
- iconCls:显示的节点图标CSS类ID。
- checked:该节点是否被选中。
- state:节点状态,'open' 或 'closed'。
- attributes:绑定该节点的自定义属性。
- target:目标DOM对象。
在用户点击一个节点的时候触发。
代码示例:
$('#tt').tree({onClick: function(node){alert(node.text); // 在用户点击的时候提示}});onDblClicknode在用户双击一个节点的时候触发。onBeforeLoadnode, param在请求加载远程数据之前触发,返回false可以取消加载操作。onLoadSuccessnode, data在数据加载成功以后触发。onLoadErrorarguments在数据加载失败的时候触发,arguments参数和jQuery的$.ajax()函数里面的'error'回调函数的参数相同。onBeforeExpandnode在节点展开之前触发,返回false可以取消展开操作。onExpandnode在节点展开的时候触发。onBeforeCollapsenode在节点折叠之前触发,返回false可以取消折叠操作。onCollapsenode在节点折叠的时候触发。onBeforeChecknode, checked在用户点击勾选复选框之前触发,返回false可以取消选择动作。(该事件自1.3.1版开始可用)onChecknode, checked在用户点击勾选复选框的时候触发。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'">追加</div><div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div></div>onBeforeDragnode在开始拖动节点之前触发,返回false可以拒绝拖动。(该事件自1.3.2版开始可用)onStartDragnode在开始拖动节点的时候触发。(该事件自1.3.2版开始可用)onStopDragnode在停止拖动节点的时候触发。(该事件自1.3.2版开始可用)onDragEntertarget, source在拖动一个节点进入到某个目标节点并释放的时候触发,返回false可以拒绝拖动。
target:释放的目标节点元素。
source:开始拖动的源节点。
(该事件自1.3.2版开始可用)onDragOvertarget, source在拖动一个节点经过某个目标节点并释放的时候触发,返回false可以拒绝拖动。
target:释放的目标节点元素。
source:开始拖动的源节点。
(该事件自1.3.2版开始可用)onDragLeavetarget, source在拖动一个节点离开某个目标节点并释放的时候触发,返回false可以拒绝拖动。
target:释放的目标节点元素。
source:开始拖动的源节点。
(该事件自1.3.2版开始可用)onBeforeDroptarget, source, point在拖动一个节点之前触发,返回false可以拒绝拖动。
target:释放的目标节点元素。
source:开始拖动的源节点。
point:表示哪一种拖动操作,可用值有:'append','top' 或 'bottom'。
(该事件自1.3.3版开始可用) onDroptarget, source, point当节点位置被拖动时触发。
target:DOM对象,需要被拖动动的目标节点。
source:源节点。
point:表示哪一种拖动操作,可用值有:'append','top' 或 'bottom'。onBeforeEditnode在编辑节点之前触发。onAfterEditnode在编辑节点之后触发。onCancelEditnode在取消编辑操作的时候触发。
方法
代码示例:
var nodes = $('#tt').tree('getChecked');// get checked nodesvar nodes = $('#tt').tree('getChecked', 'unchecked');// 获取未选择节点var nodes = $('#tt').tree('getChecked', 'indeterminate');// 获取不确定的节点
译者注:(1.3.4新增获取方式)var nodes = $('#tt').tree('getChecked', ['unchecked','indeterminate']);
getSelectednone获取选择节点并返回它,如果未选择则返回null。isLeaftarget判断指定的节点是否是叶子节点,target参数是一个节点DOM对象。findid查找指定节点并返回节点对象。
代码示例:
// 查找一个节点并选择它var node = $('#tt').tree('find', 12);$('#tt').tree('select', node.target);selecttarget选择一个节点,'target'参数表示节点的DOM对象。checktarget选中指定节点。unchecktarget取消选中指定节点。collapsetarget折叠一个节点,'target'参数表示节点的DOM对象。expandtarget展开一个节点,'target'参数表示节点的DOM对象。在节点关闭或没有子节点的时候,节点ID的值(名为'id'的参数)将会发送给服务器
请求子节点的数据。collapseAlltarget折叠所有节点。expandAlltarget展开所有节点。expandTotarget打开从根节点到指定节点之间的所有节点。scrollTotarget滚动到指定节点。(该方法自1.3.4版开始可用)appendparam
追加若干子节点到一个父节点,param参数有2个属性:
parent:DOM对象,将要被追加子节点的父节点,如果未指定,子节点将被追加至根节点。
data:数组,节点数据。
代码示例:
// 追加若干个节点并选中他们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打开或关闭节点的触发器,target参数是一个节点DOM对象。insertparam在一个指定节点之前或之后插入节点,'param'参数包含如下属性:
before:DOM对象,在某个节点之前插入。
after:DOM对象,在某个节点之后插入。
data:对象,节点数据。
下面的代码展示了如何将一个新节点插入到选择的节点之前:
var node = $('#tt').tree('getSelected');if (node){$('#tt').tree('insert', {before: node.target,data: {id: 21,text: 'node text'}});}
译者注:(1.3.4新增获取方式)var node = $('#tt').tree('getSelected');if (node){$('#tt').tree('insert', {before: node.target,data: [{ id: 23, text: 'node23' },{ text: 'node24', state: 'closed', children: [{text: 'node241' },{text: 'node242' }] }]});}
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启用拖拽功能。disableDndnone禁用拖拽功能。beginEdittarget开始编辑一个节点。endEdittarget结束编辑一个节点。cancelEdittarget取消编辑一个节点。
- 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 tree使用
- JQuery中EasyUi的$.tree的使用
- easyui Tree的使用
- easyui tree 的使用
- 项目总结—jQuery EasyUI-Tree使用
- jquery-easyui的使用
- jquery easyui的使用
- jQuery EasyUI的使用
- jQuery EasyUI的使用
- easyui中tree的使用
- GIT工作中遇到的问题记录
- 分别使用Python和Java抓取百度搜索结果
- c++定义常量
- HNUOJ_10089
- warehouse management (WM) 学习笔记(一)概述
- Jquery easyui tree的使用
- python基础知识之整除、取余、幂运算
- class 与 struct的区别
- 对CNN中pooling的理解
- 嵌入式系统
- READING NOTE: Aggregated Residual Transformations for Deep Neural Networks
- (a,b)=1 ax+by x>0 y>0的最大不能表示数
- 总结(一)
- tr命令