遍历tree nodes
function Travel(treeID){//参数为树的ID,注意不要添加#
var roots=$('#'+treeID).tree('getRoots'),children,i,j;
for(i=0;i<roots.length;i++){
alert(roots[i].text);
children=$('#'+treeID).tree('getChildren',roots[i].target);
for(j=0;j<children.length;j++)alert(children[j].text);
}
}
$(function(){
$('#tt2').tree({
checkbox: true,
url: 'tree_data.json',
onClick: function(node){
$(this).tree('toggle', node.target);
//alert('you dbclick '+node.text);
},
onContextMenu: function(e, node){
e.preventDefault();
$('#tt2').tree('select', node.target);
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
});
function reload(){
var node = $('#tt2').tree('getSelected');
if (node) {
$('#tt2').tree('reload', node.target);
}
else {
$('#tt2').tree('reload');
}
}
function getChildren(){
var node = $('#tt2').tree('getSelected');
if (node) {
var children = $('#tt2').tree('getChildren', node.target);
}
else {
var children = $('#tt2').tree('getChildren');
}
var s = '';
for (var i = 0; i < children.length; i++) {
s += children[i].text + ',';
}
alert(s);
}
function getChecked(){
var nodes = $('#tt2').tree('getChecked');
var s = '';
for (var i = 0; i < nodes.length; i++) {
if (s != '')
s += ',';
s += nodes[i].text;
}
alert(s);
}
function getSelected(){
var node = $('#tt2').tree('getSelected');
alert(node.text);
}
function collapse(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('collapse', node.target);
}
function expand(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('expand', node.target);
}
function collapseAll(){
var node = $('#tt2').tree('getSelected');
if (node) {
$('#tt2').tree('collapseAll', node.target);
}
else {
$('#tt2').tree('collapseAll');
}
}
function expandAll(){
var node = $('#tt2').tree('getSelected');
if (node) {
$('#tt2').tree('expandAll', node.target);
}
else {
$('#tt2').tree('expandAll');
}
}
function append(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('append', {
parent: (node ? node.target : null),
data: [{
text: 'new1',
checked: true
}, {
text: 'new2',
state: 'closed',
children: [{
text: 'subnew1'
}, {
text: 'subnew2'
}]
}]
});
}
function remove(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('remove', node.target);
}
function update(){
var node = $('#tt2').tree('getSelected');
if (node) {
node.text = '<span style="font-weight:bold">new text<\/span>';
node.iconCls = 'icon-save';
$('#tt2').tree('update', node);
}
}
function isLeaf(){
var node = $('#tt2').tree('getSelected');
var b = $('#tt2').tree('isLeaf', node.target);
alert(b)
}
function GetNode(type){
var node = $('#tt2').tree('getChecked');
var chilenodes = '';
var parantsnodes = '';
var prevNode = '';
for (var i = 0; i < node.length; i++) {
if ($('#tt2').tree('isLeaf', node[i].target)) {
chilenodes += node[i].text + ',';
var pnode = $('#tt2').tree('getParent', node[i].target);
if (prevNode != pnode.text) {
parantsnodes += pnode.text + ',';
prevNode = pnode.text;
}
}
}
chilenodes = chilenodes.substring(0, chilenodes.length - 1);
parantsnodes = parantsnodes.substring(0, parantsnodes.length - 1);
if (type == 'child') {
return chilenodes;
}
else {
return parantsnodes
};
};
function getNodes(){
alert(GetNode('fnode') + "," + GetNode('child'));
}
function doNode(){
var c="";
var p="";
$(".tree-checkbox1").parent().children('.tree-title').each(function(){
c+=$(this).parent().attr('node-id')+",";
});
$(".tree-checkbox2").parent().children('.tree-title').each(function(){
p+=$(this).parent().attr('node-id')+",";
});
var str=(c+p);
str=str.substring(0,str.length-1);
alert(str);
}
相关推荐
Easy UI 包含了多种组件,如表格(Grid)、表单(Form)、菜单(Menu)、对话框(Dialog)、按钮(Button)、下拉选择框(ComboBox)、树形结构(Tree)、分页(Pager)等,几乎涵盖了日常Web开发中常见的界面元素。...
在本文中,我们将深入探讨如何使用Easy UI库来创建一个动态树形结构,并实现点击树节点文字时的展开和关闭功能。Easy UI 是一个基于 jQuery 的前端框架,它提供了丰富的组件,包括表格、对话框、树等,使得网页开发...
这个框架提供了丰富的组件,如标题中提到的"v1.5.3"版本,它包括了一系列常用的UI元素,使得开发者能够快速地创建出具有专业外观和交互效果的网页应用。 在描述中提到的UI组件,我们可以深入探讨一下: 1. **菜单...
同时,它与 jQuery UI 兼容,可以集成其他 jQuery 插件来扩展功能。 在压缩包中的 "jquery-easyui-EDT-1.4-build1" 文件很可能是 EasyUI 1.4 的开发包,包含了 CSS 样式文件、JavaScript 库、示例代码和文档等资源...
jQuery_LigerUI是另一个强大的jQuery UI框架,它提供了大量可定制的组件,如日期选择器、下拉树、文件上传等。LigerUI以其丰富的功能和良好的性能深受开发者喜爱,它还支持主题定制,满足个性化设计需求。使用Liger...
- Datagrid 是EasyUI中最常用的组件,用于展示表格数据。通过`datagrid()`方法进行初始化,并可以设置各种属性如`url`(数据源)、`columns`(列定义)、`pagination`(分页)等。 2. **对话框(dialog)** - ...
1. jQuery UI Treeview:这是jQuery UI库的一部分,提供基本的树形结构,支持基本的展开、折叠功能。 2. jstree:一个功能丰富的jQuery插件,支持异步加载、多选、拖放等功能,还有丰富的主题和API。 3. EasyTree:...
在本文中,我们将探讨几款常用的JQuery Tree插件,并进行一次简单的比较,以帮助开发者选择最适合他们项目需求的插件。JQuery Tree插件主要用于创建可交互的、层次化的目录结构,通常用于文件管理系统、组织结构展示...
【描述】中的关键词“日期控件”、“全屏”、“弹出消息”、“树形菜单”、“easy表格”和“分页”分别对应了EasyUI中的一些核心功能和组件: 1. **日期控件**:EasyUI的日期选择器允许用户方便地选取日期,可以...
在jQuery中,可以使用插件如jQuery UI或Easy Context Menu等来快速实现这一功能。这些插件提供了一系列配置选项,允许开发者自定义菜单项、图标、事件处理等。 在压缩包文件"TreeViewContextMenu"中,可能包含了...
1. **组件丰富**:EasyUI提供了诸如布局(Layout)、表格(Grid)、树形控件(Tree)、下拉选择框(ComboBox)、对话框(Dialog)、菜单(Menu)等大量常用组件,覆盖了网页开发中的多种需求。 2. **主题支持**:...
4. **EasyUI**:EasyUI是基于jQuery的UI插件集合体,提供了丰富的组件,如对话框、表格、下拉树、表单验证、分页等,使得开发者可以快速构建功能丰富的Web界面。EasyUI的设计风格简洁,易于使用,适合于后台管理系统...