一级Id为负数、parentId为空，二级parentId等于一级id，三级parentId等于二级id
[{"name": "广东","Id": -1,"parentId": null},
{"name": "湖北","Id": -2,"parentId": null},
{"name": "广州","Id": 44,"parentId": -1},
{"name": "武汉","Id": 58,"parentId": -2},
{"name": "深圳","Id": 12,"parentId":-1 },
{"name": "白云","Id": 741,"parentId": 44}]
一级Id为负数、parentId为空，二级parentId等于一级id，三级parentId等于二级id
[{"name": "广东","Id": -1,"parentId": null},
{"name": "湖北","Id": -2,"parentId": null},
{"name": "广州","Id": 44,"parentId": -1},
{"name": "武汉","Id": 58,"parentId": -2},
{"name": "深圳","Id": 12,"parentId":-1 },
{"name": "白云","Id": 741,"parentId": 44}]
<code><div id="result"></div>
<script>
var result = document.getElementById('result')
var arr = [
{"name": "广东","Id": -1,"parentId": null},
{"name": "湖北","Id": -2,"parentId": null},
{"name": "广州","Id": 44,"parentId": -1},
{"name": "武汉","Id": 58,"parentId": -2},
{"name": "深圳","Id": 12,"parentId":-1 },
{"name": "白云","Id": 741,"parentId": 44}
]
var tree = {}
var count = 0
array2Object(arr, tree, null)
function array2Object (array, node, id) {
var storage = []
var newArray = []
var newNode, newId
for (var i = 0; i < array.length; i++) {
if (array[i].parentId === id) {
node[array[i].name] = {}
storage.push(i)
count++
} else {
newArray.push(array[i])
}
}
if (count !== arr.length) {
for (var i = 0; i < storage.length; i++) {
array2Object(newArray, node[array[storage[i]].name], array[storage[i]].Id)
}
} else {
object2Html(result, tree)
}
}
function object2Html (node, obj) {
var storage = []
var tpl = node.innerHTML + '<ul>'
for (var key in obj) {
tpl = tpl + '<li data-name="' + key + '">' + key + ''
if (!isEmptyObject(obj[key])) {
storage.push({
name: key,
obj: obj[key]
})
}
}
tpl += ''
node.innerHTML = tpl
if (storage.length !== 0) {
for (var i = 0; i < storage.length; i++) {
object2Html(document.querySelector('li[data-name="' + storage[i].name + '"]'), storage[i].obj)
}
}
}
function isEmptyObject (obj) {
for (var key in obj) {
return false
}
return true
}
</script></code>效果如图
写的有点难看，不过不受限于数组的排序（不一定要按照级数递减），也不受限于3级。
其实这也就是一个递归的关系，贴下我项目中的代码吧：
<code> /**
* 获取树的树形的下拉列表数组
* @param string $model 模型名称
* @param int $m 点位符数量
* @param string $pid 父级id
* @param array field 字段名的数组
*/
function dropdown_tree($model,$m=0,$pid=0,$field=array('id','sortname','parentid'))
{
$model=$model."_model";
$this->_CI->load->model($model);
$class_arr=$this->_CI->$model->all();
$return_arr=array();
$this->dropdown_array($m,$pid,$class_arr,$return_arr,$field);
return $return_arr;
}
/**
* 遍历数组，修改其样式。
*/
function dropdown_array($m,$pid,$class_arr,&$return_arr,$field){
$n = str_pad('',$m,'-',STR_PAD_RIGHT);
$n = str_replace("-"," ",$n);
foreach($class_arr as $item){
if($item["$field[2]"]==$pid){
$return_arr[$item["$field[0]"]]=$n."|--".$item["$field[1]"];
$this->dropdown_array($m+1,$item["$field[0]"],$class_arr,$return_arr,$field);
}
}
}</code>
<code class="javascript"> var districts = [
{"name": "广东", "Id": 1, "parentId": 0},
{"name": "湖北", "Id": 2, "parentId": 0},
{"name": "广州", "Id": 3, "parentId": 1},
{"name": "武汉", "Id": 4, "parentId": 2},
{"name": "深圳", "Id": 5, "parentId": 0},
{"name": "白云", "Id": 6, "parentId": 3},
{"name": "江夏", "Id": 7, "parentId": 4},
{"name": "景云路", "Id": 8, "parentId": 6}
];
function arrayToTree(parentId) {
var temp = [];
for (var index in districts) {
if (districts[index].parentId == parentId) {
temp.push({
data: districts[index],
children: arrayToTree(districts[index].Id)
});
}
}
return temp;
}
function outputTree(items, depth) {
var str = '';
for (var index in items) {
/* repeat() 特性属于 ECMAScript 2015（ES6）规范 */
str += ' - - '.repeat(depth) + items[index].data.name + '<br>';
if (items[index].children.length) {
str += outputTree(items[index].children, depth + 1);
}
}
return str;
}
var result = outputTree(arrayToTree(0), 0);
document.write(result);</code><code class="javascript">广东 - - 广州 - - - - 白云 - - - - - - 景云路 湖北 - - 武汉 - - - - 江夏 深圳</code>
PS：分隔符可以自定义。求路过大牛帮忙优化：arrayToTree() ^_^
以前写过，请直接戳这里，懒得复制了 _^_。
非常在意性能的话这种因为数量级不大可以考虑不用3级联动，加工一下，然后输入如下的Option就行了。
首页
-首页
--首页
首页
就是根据ID找归类，直接JQ判断记载就好了
不邀自答,(考虑性能)私以为在数据根源入手是最有效直接的,来个数据库版的.
建表语句
<code>create table TP_CITY ( Id NUMBER , name VARCHAR2(255), parentId NUMBER ); insert into tp_city values(-1,'广东', null); insert into tp_city values(-2,'湖北', null); insert into tp_city values(44,'广州', -1); insert into tp_city values(58,'武汉', -2); insert into tp_city values(12,'深圳', -1); insert into tp_city values(741,'白云', 44); </code>
比如使用oracle的层级查询
<code>select lpad(' ', (level-1)*2, ' ')||name name
from tp_city
start with id</code>返回结果如下:
我们也可以这样写:
<code>select sys_connect_by_path(name, '-') path from tp_city start with id</code>
返回结果是:
