treetable的后台算法

Everyday都不同

浏览: 722700 次
性别:
来自: 宇宙

最近访客更多访客>>

gaoshaoye

hbzyb

loginboot

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

随便唠唠

treetable 算法递归

treetable是jquery的树表控件，如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>treeTable 静态测试</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<!-- css引入和js引入-->
	<!--<link rel="stylesheet" href="screen.css" />-->
	<link rel="stylesheet" href="jquery.treetable.css" />
	<link rel="stylesheet" href="jquery.treetable.theme.default.css" />
	
	<style>
		tr{border:1px solid}
		td{border:1px solid;}
		table{ border-collapse:collapse; width:60%; margin-left:20%; margin-top:5%}
		cursor:pointer
	</style>
	
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript" src="jquery.treetable.js"></script>
	<script type="text/javascript">
	$(function(){
            /*var option = {
                theme:'vsStyle',
                expandLevel : 2,
                beforeExpand : function($treeTable, id) {
                    //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
					//alert('coming~~~');
					console.log("当前行的id：" + id);
                    //if ($('.' + id, $treeTable).length) { return; }
                    //这里的html可以是ajax请求
                    var html = '<tr id="8" pId="6"><td>5.1</td><td>可以是ajax请求来的内容</td></tr>'
                             + '<tr id="9" pId="6"><td>5.2</td><td>动态的内容</td></tr>';

                    $treeTable.addChilds(html);
                },
                onSelect : function($treeTable, id) {
                    window.console && console.log('onSelect:' + id);
                    
                }

            };
            //$('#treeTable1').treetable(option);*/
			var option = {
				expandable: true, 
				clickableNodeNames:true,
				expandable: true
			}
			$('#treeTable1').treetable(option);
        });
	</script>
  </head>
  
  <body>
    <table id="treeTable1" style=" ">
                <tr>
                    <td style="width: 200px;">标题</td>
                    <td>链接</td>
					<td>排序</td>
					<td>可见</td>
					<td>权限标识</td>
					<td>操作</td>
                </tr>
                <tr data-tt-id="0">
                    <td>
                        <span controller="true"><a href="#">系统设置</a></span></td>
                    <td>顶级内容</td>
					<td><input type="text" value="2"/></td>
					<td>显示</td>
					<td>运营者(1)</td>
					<td><a href="#">修改</a>&nbsp;<a href="#">删除</a>&nbsp;<a href="#">添加下级菜单</a>&nbsp;</td>
                </tr>
				
                <tr data-tt-id="10" data-tt-parent-id="0">
                    <td>
                        <span controller="true"><a href="#">机构用户</a></span></td>
                    <td>内容1</td>
					<td><input type="text" value="2"/></td>
					<td>显示</td>
					<td>运营者(1)</td>
					<td><a href="#">修改</a>&nbsp;<a href="#">删除</a>&nbsp;<a href="#">添加下级菜单</a>&nbsp;</td>
                </tr>

				
                <tr data-tt-id="10-1" data-tt-parent-id="10">
                    <td>
                        <span controller="true"><a href="#">用户管理</a></span></td>
                    
                    <td>内容1-1</td>
					<td><input type="text" value="2"/></td>
					<td>显示</td>
					<td>运营者(1)</td>
					<td><a href="#">修改</a>&nbsp;<a href="#">删除</a>&nbsp;<a href="#">添加下级菜单</a>&nbsp;</td>
                </tr>
				
				 <tr data-tt-id="10-1-1" data-tt-parent-id="10-1">
                    <td>
                        <span controller="true"><a href="#">用户管理下的</a></span></td>
                    
                    <td>内容1-1-1</td>
					<td><input type="text" value="2"/></td>
					<td>显示</td>
					<td>运营者(1)</td>
					<td><a href="#">修改</a>&nbsp;<a href="#">删除</a>&nbsp;<a href="#">添加下级菜单</a>&nbsp;</td>
                </tr>
				
                 <tr data-tt-id="10-6" data-tt-parent-id="10">
                    <td>
                        <span controller="true"><a href="#">机构管理</a></span></td>
                    
                    <td>内容1-1</td>
					<td><input type="text" value="2"/></td>
					<td>显示</td>
					<td>运营者(1)</td>
					<td><a href="#">修改</a>&nbsp;<a href="#">删除</a>&nbsp;<a href="#">添加下级菜单</a>&nbsp;</td>
                </tr>
				<tr data-tt-id="10-5" data-tt-parent-id="10">
                    <td>
                        <span controller="true"><a href="#">区域管理</a></span></td>
                    
                    <td>内容1-1</td>
					<td><input type="text" value="2"/></td>
					<td>显示</td>
					<td>运营者(1)</td>
					<td><a href="#">修改</a>&nbsp;<a href="#">删除</a>&nbsp;<a href="#">添加下级菜单</a>&nbsp;</td>
                </tr>
				
				
            </table>
  </body>
</html>

效果如下：

难点在于拼装出理想的数据结构来适应前端的展示。下面模拟从数据库查询出结果并拼装出treetable数据结构的过程（需运用到递归）：

package com.test;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


public class Test {

	/**
	 * map1
	 *  |----map3
	 *     |----map6
	 *  |----map4
	 * map2
	 *  |----map5
	 */
	public static void main(String[] args) {
		//模拟查询库然后组装成树的结构
        List<Map> list = new ArrayList();
        Map<String, String> map1 = new HashMap<String, String>();
        map1.put("id", "1");
        map1.put("parent_id", "0");
        list.add(map1);

        Map<String, String> map2 = new HashMap<String, String>();
        map2.put("id", "2");
        map2.put("parent_id", "0");
        list.add(map2);

        Map<String, String> map3 = new HashMap<String, String>();
        map3.put("id", "3");
        map3.put("parent_id", "1");
        list.add(map3);

        Map<String, String> map4 = new HashMap<String, String>();
        map4.put("id", "4");
        map4.put("parent_id", "1");
        list.add(map4);

        Map<String, String> map5 = new HashMap<String, String>();
        map5.put("id", "5");
        map5.put("parent_id", "2");
        list.add(map5);

        Map<String, String> map6 = new HashMap<String, String>();
        map6.put("id", "6");
        map6.put("parent_id", "3");
        list.add(map6);

        List<Map> list1 = new ArrayList();
        
        List<Map<String, String>> trees = new ArrayList<Map<String, String>>();
        for (Map map : list) {
        	Map<String, String> tree = new HashMap<String, String>();
            if (map.get("parent_id").equals("0")) {
                map.put("text", map.get("id"));
                map.put("parent_text", "0");
                
                tree.put("id_text", (String)map.get("id"));
                tree.put("parent_text", "0");
                trees.add(tree);
                
                list1.add(map);
                
                List trees2 = getTreeData(trees, list, map);
                map.put("list", trees2);
            }
        }
//        for (Map map : list1) {
//        	
//        }
        System.out.println(list1);
        
        System.out.println("trees:" + trees);
    }

    private static List getTreeData(List<Map<String, String>> trees, List<Map> list, Map maps) {
        List<Map> list5 = new ArrayList();
        for (Map map : list) {
            if (maps.get("id").equals(map.get("parent_id"))) {
                map.put("text", maps.get("text") + "_" + map.get("id"));
                map.put("parent_text", maps.get("text"));
                list5.add(map);
                
                Map<String, String> tree = new HashMap<String, String>();
                tree.put("id_text", maps.get("text") + "_" + map.get("id"));
                tree.put("parent_text", (String)maps.get("text"));
                trees.add(tree);
                
                map.put("list", getTreeData(trees, list, map));
            }
        }
        return list5;
    }
	
    public static String  print(String name) {
    	return "Hi, " + name;
    }
}

运行结果：

[{id=1, text=1, list=[{id=3, text=1_3, list=[{id=6, text=1_3_6, list=[], parent_text=1_3, parent_id=3}], parent_text=1, parent_id=1}, {id=4, text=1_4, list=[], parent_text=1, parent_id=1}], parent_text=0, parent_id=0}, {id=2, text=2, list=[{id=5, text=2_5, list=[], parent_text=2, parent_id=2}], parent_text=0, parent_id=0}]

trees:[{id_text=1, parent_text=0}, {id_text=1_3, parent_text=1}, {id_text=1_3_6, parent_text=1_3}, {id_text=1_4, parent_text=1}, {id_text=2, parent_text=0}, {id_text=2_5, parent_text=2}]

查看图片附件

分享到：

git学习笔记（一）：初识 | No projects are available for deployment ...

2016-09-16 14:38
浏览 1318
评论(0)
分类:非技术
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论