给出两个官网,可以去看看教程。
http://docs.jquery.com/Plugins/Treeview
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
jsp页面:
- <link rel="stylesheet" href="jquery.treeview.css" type="text/css"></link>
- <link rel="stylesheet" href="screen.css" type="text/css"></link>
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript" src="jquery.cookie.js"></script>
- <script type="text/javascript" src="jquery.treeview.js"></script>
- <script type="text/javascript" src="jquery.treeview.async.js"></script>
- <style type="text/css">
- a{
- text-decoration:none;
- color:#000000;
- }
- a:active{
- color:#ff0000;
- }
- </style>
- <script type="text/javascript">
- $(document).ready(function(){
- $("#treeview").treeview({
- url:"/treeviewtest/user/servlet/treeajax"
- });
- });
- </script>
- </head>
- <body>
- <ul id="treeview" class="filetree"></ul>
- </body>
后台代码:
- String id = request.getParameter("root"); //treeview自动提交root参数为当前节点的id,如果是根节点,则为source
- //生成json格式数据
- private String toJSONString(Category category){
- StringBuilder sb = new StringBuilder();
- sb.append("{");
- sb.append("\"id\":\""+category.getCatId()+"\"");
- sb.append(",\"text\":\""+generateLinkString(category)+"\"");
- sb.append(",\"classes\":\""+category.getCssClass()+"\"");
- sb.append(",\"expanded\":false");
- sb.append(",\"hasChildren\":"+category.hasChild());
- if(!"".equals(category.getImageName())){
- sb.append(",\"imagepath\":\"url("+category.getImageName()+")\"");
- //imagepath是自己加的,用于显示不同的图标,jquery.treeview.async.js文件需要修改
- }
- sb.append("}");
- return sb.toString();
- }
修改jquery.treeview.async.js显示个性化图标:
- function load(settings, root, child, container) {
- $.getJSON(settings.url, {root: root}, function(response) {
- function createNode(parent) {
- var current = $("<li/>").attr("id", this.id || "").html("<span>" + this.text + "</span>").appendTo(parent);
- if (this.classes) {
- current.children("span").addClass(this.classes);
- }
- if(this.imagepath) {//这里是加的,后台代码是如果显示默认图标,没有imagepath这项,如果显示子定义图标,imagepath是图标的路径。
- current.children("span").css("background-image", this.imagepath);
- }
- if (this.expanded) {
- current.addClass("open");
- }
- if (this.hasChildren || this.children && this.children.length) {
- var branch = $("<ul/>").appendTo(current);
- if (this.hasChildren) {
- current.addClass("hasChildren");
- createNode.call({
- text:"placeholder",
- id:"placeholder",
- children:[]
- }, branch);
- }
- if (this.children && this.children.length) {
- $.each(this.children, createNode, [branch])
- }
- }
- }
- $.each(response, createNode, [child]);
- $(container).treeview({add: child});
- });
- }