JQuery easy ui tree

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery EasyUI</title>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/jquery-easyui-1.2.6/themes/default/easyui.css" />

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/jquery-easyui-1.2.6/themes/icon.css" />

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">

$(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>

<h1>Tree</h1>

<p>Create from HTML markup</p>

<ul id="tt1">

<li>

<span>Folder</span>

<ul>

<li>

<span>Sub Folder 1</span>

<ul>

<li>

<span><a href="#">File 11</a></span>

</li>

<li>

<span>File 12</span>

</li>

<li>

<span>File 13</span>

</li>

</ul>

</li>

<li>

<span>File 2</span>

</li>

<li>

<span>File 3</span>

</li>

<li>File 4</li>

<li>File 5</li>

</ul>

</li>

<li>

<span>File21</span>

</li>

</ul>

<hr></hr>

<p>Create from JSON data</p>

<div style="margin:10px;">

<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>

<ul id="tt2"></ul>

</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"

   }

]

相关推荐