JQuery easy ui tree

zengshaotao

浏览: 786655 次
性别:
来自: 上海

最近访客更多访客>>

njdccy

AK1343794853

chehaoj

jstl1point0

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

开发小记

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>jQuery EasyUI</title>

$(function(){

$('#tt1').tree({

animate:true,

onClick:function(node){

alert('you click '+node.text);

}

});

$('#tt2').tree({

checkbox: true,

url: 'tree_data.json',

onClick:function(node){

alert('you click '+node.text);

}

});

function reload(){

$('#tt2').tree('reload');

}

function getChildNodes(){

var node = $('#tt2').tree('getSelected');

if (node){

var children = $('#tt2').tree('getChildNodes', node.target);

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(){

$('#tt2').tree('collapseAll');

}

function expandAll(){

$('#tt2').tree('expandAll');

}

function append(){

var node = $('#tt2').tree('getSelected');

$('#tt2').tree('append',{

parent: node.target,

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)

}

</script>

</head>

<body>

<p>Create from HTML markup</p>

<li>

<span>Folder</span>

<ul>

<li>

<span>Sub Folder 1</span>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

</li>

</ul>

<p>Create from JSON data</p>

<a href="#" onclick="reload()">reload</a>

<a href="#" onclick="getChildNodes()">getChildNodes</a>

<a href="#" onclick="getChecked()">getChecked</a>

<a href="#" onclick="getSelected()">getSelected</a>

<a href="#" onclick="collapse()">collapse</a>

<a href="#" onclick="expand()">expand</a>

<a href="#" onclick="collapseAll()">collapseAll</a>

<a href="#" onclick="expandAll()">expandAll</a>

<a href="#" onclick="append()">append</a>

<a href="#" onclick="remove()">remove</a>

<a href="#" onclick="update()">update</a>

<a href="#" onclick="isLeaf()">isLeaf</a>

</div>

</body>

</html>

tree_data.json:

[

{

"id": "10",

"text": "根节点",

"data": "",

"children": [

{

"id": "1002",

"text": "一级节点1",

"children": [

{

"id": "100201",

"text": "二级节点11",

"children": [

{

"id": "10020102",

"text": "三级节点111",

"children": "",

"parId": "100201"

{

"id": "10020101",

"text": "三级节点222",

"children": "",

"parId": "100201"

}

"parId": "1002"

{

"id": "100202",

"text": "二级节点22",

"children": "",

"parId": "1002"

}

"parId": "10"

{

"id": "1003",

"text": "一级节点2",

"children": "",

"parId": "10"

{

"id": "1001",

"text": "一级节点3",

"children": [

{

"id": "100101",

"text": "二级节点33",

"children": "",

"parId": "1001"

}

"parId": "10"

}

"parId": "-1"

}

]

分享到：

easy ui 树的常用功能 | javascriptValidator

2016-05-12 11:51
浏览 483
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论