关于JQuery插件easyUI的学习

最新推荐文章于 2024-06-19 21:34:23 发布

kookob

最新推荐文章于 2024-06-19 21:34:23 发布

阅读量2.7k

点赞数

分类专栏： Java 文章标签： jquery插件 function stylesheet html action java

本文链接：https://blog.csdn.net/kookob/article/details/6761239

版权

Java 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一个在线查询json生成树的网站：http://jsonviewer.stack.hu/

复制一些来自http://zheyiw.iteye.com/blog/702835的代码：

用jsp做服务器做个简单的jqueryeasyui的异步树
1、html使用的是官方的demo里的tree.html
唯一修改的地方将url: 'tree_data.json' 修改为 url: 'treeServer.jsp',

<!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);   
}   
%>

JSP可以省略，直接调action里面的方法，在action里面返回response.getWriter().write(treeData); 的值。

一些文章链接：

http://www.cnblogs.com/linyechengwei/archive/2011/01/19/1939274.html

http://blog.csdn.net/qing2005/article/details/6506379

http://www.jeasyui.com/documentation/tree.php

kookob

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于JQuery插件easyUI的学习

一个在线查询json生成树的网站：http://jsonviewer.stack.hu/复制一些来自http://zheyiw.iteye.com/blog/702835的代码：用jsp做服务器做个简单的jqueryeasyui的异步树 1、html使用的是官方的de
复制链接

扫一扫

专栏目录