一級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 + '</li>' if (!isEmptyObject(obj[key])) { storage.push({ name: key, obj: obj[key] }) } } tpl += '</ul>' 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<0 connect by parentId=prior Id;</code>
回傳結果如下:
我們也可以這樣寫:
<code>select sys_connect_by_path(name, '-') path from tp_city start with id<0 connect by parentId=prior id; </code>
回傳結果是: