- <!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>
- <link rel="stylesheet" type="text/css" href="/JQuery/js/easyui/themes/default/easyui.css">
- <link rel="stylesheet" type="text/css" href="/JQuery/js/easyui/themes/icon.css">
- <script type="text/javascript" src="/JQuery/js/easyui/jquery-1.4.2.min.js"></script>
- <script type="text/javascript" src="/JQuery/js/easyui/jquery.easyui.min.js"></script>
- <script type="text/javascript">
- $(function(){
- $('#tt1').tree({
- animate:true,
- onClick:function(node){
- alert('you click '+node.text);
- }
- });
- $('#tt2').tree({
- checkbox: true,
- url: 'treeServer.jsp',
- 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="#" οnclick="reload()">reload</a>
- <a href="#" οnclick="getChildNodes()">getChildNodes</a>
- <a href="#" οnclick="getChecked()">getChecked</a>
- <a href="#" οnclick="getSelected()">getSelected</a>
- <a href="#" οnclick="collapse()">collapse</a>
- <a href="#" οnclick="expand()">expand</a>
- <a href="#" οnclick="collapseAll()">collapseAll</a>
- <a href="#" οnclick="expandAll()">expandAll</a>
- <a href="#" οnclick="append()">append</a>
- <a href="#" οnclick="remove()">remove</a>
- <a href="#" οnclick="update()">update</a>
- <a href="#" οnclick="isLeaf()">isLeaf</a>
- </div>
- <ul id="tt2"></ul>
- </body>
- </html>
2、treeServer.jsp
-
- <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
- <%
- String treeData="[{\"id\":1,\"text\":\"Folder1\",\"iconCls\":\"icon-ok\",\"children\":[{\"id\":2,\"text\":\"File1\",\"checked\":true},{\"id\":3,\"text\":\"Folder2\",\"state\":\"open\",\"children\":[{\"id\":4,\"text\":\"File3\",\"checked\":true,\"iconCls\":\"icon-reload\"},{\"id\": 8,\"text\":\"Async Folder\",\"state\":\"closed\"}]}]},{\"text\":\"Languages\",\"state\":\"closed\",\"children\":[{\"text\":\"Java\"},{\"text\":\"C#\"}]}]";
- String id = request.getParameter("id");
- //输出
- if (id!=null) {
- response.getWriter().write("[{\"text\":\"Languages\",\"state\":\"closed\",\"children\":[{\"text\":\"Java\"},{\"text\":\"C#\"}]}]");
- }else{
- response.getWriter().write(treeData);
- }
- %>