Nestable 可移动的树型结构的使用(jQuery)

利用jQuery可以制作出很好的树型结构。这里介绍一款最近才找到使用的Nestable

可以拖动。  网页中的效果 http://dbushell.github.com/Nestable/

具体详细介绍的地址下载https://github.com/dbushell/Nestable

应用事例是多级分类和导航栏的使用，改变父节点和子节点位置。使用环境(PHP + Smarty + jQuery)

1: 创建树型结构。非常感谢"PHP高效获取树结构信息" 这篇文章的作者renzhen.

   提供了很好的代码和思路， 根据自己的需要稍微改变了一下变量名

/* 
通过数据库获取所有元素，通过下面函数构造树形结构 
*/ 
	private function getTree($categorys)
	{
		$id = 0;
		$level = 0;
		$categoryObjs = array();
		$tree = array();
		$childrenNodes = array();
		foreach($categorys as $cate){
			$obj = new stdClass();
			$obj->root = $cate;
			$id = $cate['id'];
			$level = $cate['parent_id'];
			$obj->children = array();
			$categoryObjs[$id] = $obj;
			if ($level) {
				$childrenNodes[] = $obj;
			} else {
				$tree[] = $obj;
			}
		}

		foreach($childrenNodes as $node){
			$cate = $node->root;
			$id = $cate['id'];
			$level = $cate['parent_id'];
			$categoryObjs[$level]->children[] = $node;

		}

		return $tree;
	}

2  根据上面的数据，可以在界面Smarty模板 中映射使用。

 主要是改造Nestable显示的效果，根据上面获得的数据进行分析构造。根据层级循环实现子节点的显示

目前Nestable默认设置的是子节点可以到5层，可以根据自己的需要改变。

<div class="cf nestable-lists">
<div id="nestable" class="dd">
<ol class="dd-list">
<li class="dd-item" data-id="1">
<li class="dd-item" data-id="2">
<li class="dd-item" data-id="8">
<li class="dd-item" data-id="9">
<li class="dd-item" data-id="10">
<li class="dd-item" data-id="11">
<li class="dd-item" data-id="12">
<div class="dd-handle">Item 12</div>

3 将改变的数据结构，输出的json数据如下

[{"id":1},{"id":2,"children":[{"id":3},{"id":4},{"id":5,"children":[{"id":6},{"id":7}]}]},{"id":8},{"id":9},{"id":10},{"id":11},{"id":12}]

分析json数据，递归将每一个子节点都提取出来，方便数据库更新。

	private function getJsonData($jsonData) {

		$output = json_decode($jsonData,true);
		$list = array();
		foreach ($output as $row) {
			$list[] = array(
					'id' => $row['id'],
					'parent_id' => 0,
			);
			if (isset($row['children'])) {
				$this->getChildren($list, $row['id'], $row['children']);
			}
		}

		return $list;
	}


	private function getChildren(&$list, $id, $child) {
		foreach ($child as $c) {
			$list[] = array(
					'id' => $c['id'],
					'parent_id' => $id,
			);
			if (isset($c['children']) ) {
				$this->getChildren($list, $c['id'], $c['children']);
			}
		}
		return ;
	}

网页效果中，1和2是可以改变上下位置的，而3则只能改变层级关系，上下为之不能拖动改变。

也是初次使用这个效果，很多理解都很表面化，解释不到位的还望大家海涵~~

效果图如下

 

附加：

测试的时候在IE7和IE8有些不支持，需要修改内部的代码才可以。