javascript樹形總結
給個例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
body{ font-size: 12px;}
h2,h3{ margin: 0;}
ul{ margin: 0; padding: 0; list-style: none; }
#outer_wrap li{ padding-left: 30px; line-height: 24px;}
.controlSymbol{ padding: 0 5px; border: 1px solid #adff2f; cursor: pointer;}
</style>
</head>
<body>
<ul id="outer_wrap">
<li>
<h2>標題1</h2>
<ul>
<li>內容1</li>
<li>內容2</li>
<li>內容3</li>
<li>內容4</li>
<li>
<h3>標題1_1</h3>
<ul>
<li>內容1_1</li>
<li>內容1_2</li>
<li>內容1_3</li>
<li>內容1_4</li>
</ul>
</li>
<li>
<h3>標題1_2</h3>
<ul>
<li>內容1_1</li>
<li>內容1_2</li>
<li>內容1_3</li>
<li>內容1_4</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
然後新增事件：
var innerText = document.innerText ? 'innerText' : 'textContent';
var span = document.createElement('span');
span[innerText] = '-';
span.className = 'controlSymbol';
function $(id){
return document.getElementById(id);
}
function $_(){
var args = arguments;
var ret = [];
for(var i = 0; i < args.length; i++){
var temp = document.getElementsByTagName(args[i]);
try{
ret = ret.concat(Array.prototype.slice.call(temp,0));
}catch(e){
for(var j = 0; j < temp.length; j++){
ret.push(temp[j]);
}
}
}
return ret;
}
function addSymbol(h){
var innerSpan = span.cloneNode(true);
h.insertBefore(innerSpan,h.firstChild);
}
function next(el){
while(el.nextSibling){
if(el.nextSibling.nodeType == 1){
return el.nextSibling;
}
el = el.nextSibling;
}
return null;
}
var outerWrap = $('outer_wrap');
var hs = $_('h2','h3');
for(var i = 0 ; i < hs.length; i++){
addSymbol(hs[i]);
}
outerWrap.onclick = function(event){
event = event || window.event;
var t = event.target || event.srcElement;
if(t.className == 'controlSymbol'){
var sn = next(t.parentNode);
var snStyle = next(t.parentNode).style;
snStyle.display = (snStyle.display == 'block' || snStyle.display == '') ? 'none' : 'block';
t[innerText] = t[innerText] == '+' ? '-':'+';
}
}
不過用的多的可能是動態的新增選單，也就是動態的生成HTML序列。
一個例子：
var tree = {
'標題2':[
'內容1',
'內容2',
'內容3',
'內容4',
{'標題2_1':['內容2_1','內容2_2','內容2_3','內容2_4']},
{'標題2_2':['內容2_1','內容2_2','內容2_3','內容2_4']},
'內容5'
]
}
var fragment = document.createElement('ul');
function concatTree(tree){
var array = [];
for(var key in tree){
array.push('<li><h3>');
array.push(key);
array.push('</h3><ul>');
for(var i = 0; i < tree[key].length; i++){
if(tree[key][i].constructor == Object){
array = array.concat(concatTree(tree[key][i]));
}else{
array.push('<li>');
array.push(tree[key][i]);
array.push('</li>');
}
}
array.push('</ul></li>');
}
return array;
}
fragment.innerHTML = concatTree(tree).join('');
$('outer_wrap').appendChild(fragment.firstChild);
像上面的方法也可以用來生成表格，扯遠了，比如
var oArray = {
thead : ['標題一','標題二','標題三','標題四'],
tbody : [
[1,2,3,4],
[5,6,7,8],
[9,10,11,12],
[13,14,15,16],
[17,18,19,20],
[21,22,23,24]
],
tfoot : [25,26,27,28]
}
function createTable(arr){
var html = [];
html.push('<table>');
for(var key in arr){
html.push('<'+key + '>');
if(key == 'thead'){
assemTag(arr[key],html,'th')
}else if(key == 'tfoot'){
assemTag(arr[key],html,'td')
}else if(key == 'tbody'){
for(var k = 0, len_1 = arr[key].length; k < len_1; k++){
assemTag(arr[key][k],html,'td')
}
}
html.push('</'+key + '>');
}
html.push('</table>');
var temp = document.createElement('div');
temp.innerHTML = html.join('');
return temp.firstChild;
}
function assemTag(array,html,tag){
html.push('<tr>');
var s = '<' + tag + '>';
var e = '</' + tag + '>';
for(var j = 0, len = array.length; j < len; j++){
html.push(s);
html.push(array[j]);
html.push(e);
}
html.push('</tr>');
}
document.body.appendChild(createTable(oArray));
一般可以直接建立一個節點元素，然後直接設定innerHTML，不過innerHTML雖說是IE先搞起的，但是IE又最不徹底，對於table和tr是不可設定innerHTML的（只讀），所以只能假div之手了。
於是打算自己嘗試弄個簡單的樹形選單。在這過程中，我發現: 對於一棵簡單的樹形選單，4行程式碼足矣。
html程式碼的編寫，直接採用了ul-li的巢狀方式。主要的javascript程式碼如下：
1 $(".menu ul").css("display","none");2 $(".menu a").on("click", function(){3 $(this).next().toggle();4 });
原理很簡單：
1. 初始化時，把ul隱藏。
2. 點選選單時，切換它下面的ul顯示或隱藏。
具體和效果如下圖：
完整程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>menu tree</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<ul class="menu">
<li> <a href="#">A1</a>
<ul>
<li><a href="#">A1-1</a></li>
<li><a href="#">A1-2</a></li>
<li> <a href="#">A1-3</a>
<ul>
<li><a href="#">A1-3-1</a></li>
<li><a href="#">A1-3-2</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">A2</a>
<ul>
<li><a href="#">A2-1</a></li>
<li><a href="#">A2-2</a></li>
</ul>
</li>
<li><a href="#">A3</a></li>
</ul>
<body>
<script type="text/javascript" src="loginFile/jquery.js">
</script>
<script type="text/javascript"> $(document).ready(function(){ $(".menu ul").css("display","none"); $(".menu a").on("click", function(){ $(this).next().toggle(); }); });
</script>
</body>
</html>
js中：
var zNodes=[
{id:0,pId:-1,name:"Aaaa"},
{id:1,pId:0,name:"A"},
{id:11,pId:1,name:"A1"},
{id:12,pId:1,name:"A2"},
{id:13,pId:1,name:"A3"},
{id:2,pId:0,name:"B"},
{id:21,pId:2,name:"B1"},
{id:22,pId:2,name:"B2"},
{id:23,pId:2,name:"B3"},
{id:3,pId:0,name:"C"},
{id:31,pId:3,name:"C1"},
{id:32,pId:3,name:"C2"},
{id:33,pId:3,name:"C3"},
{id:34,pId:31,name:"x"},
{id:35,pId:31,name:"y"},
{id:36,pId:31,name:"z"},
{id:37,pId:36,name:"z1123"} ,
{id:38,pId:37,name:"z123123123"}
];
function treeMenu(a){
this.tree=a||[];
this.groups={};
};
treeMenu.prototype={
init:function(pid){
this.group();
return this.getDom(this.groups[pid]);
},
group:function(){
for(var i=0;i<this.tree.length;i++){
if(this.groups[this.tree[i].pId]){
this.groups[this.tree[i].pId].push(this.tree[i]);
}else{
this.groups[this.tree[i].pId]=[];
this.groups[this.tree[i].pId].push(this.tree[i]);
}
}
},
getDom:function(a){
if(!a){return ''}
var html='\n<ul >\n';
for(var i=0;i<a.length;i++){
html+='<li><a href="#">'+a[i].name+'</a>';
html+=this.getDom(this.groups[a[i].id]);
html+='</li>\n';
};
html+='</ul>\n';
return html;
}
};
var html=new treeMenu(zNodes).init(0);
alert(html);
/**
* json格式轉樹狀結構
* @param {json} json資料
* @param {String} id的字串
* @param {String} 父id的字串
* @param {String} children的字串
* @return {Array} 陣列
*/
function transData(a, idStr, pidStr, chindrenStr){
var r = [], hash = {}, id = idStr, pid = pidStr, children = chindrenStr, i = 0, j = 0, len = a.length;
for(; i < len; i++){
hash[a[i][id]] = a[i];
}
for(; j < len; j++){
var aVal = a[j], hashVP = hash[aVal[pid]];
if(hashVP){
!hashVP[children] && (hashVP[children] = []);
hashVP[children].push(aVal);
}else{
r.push(aVal);
}
}
return r;
}
var jsonData = eval('[
{"id":"4","pid":"1","name":"大家電"},
{"id":"5","pid":"1","name":"生活電器"},
{"id":"1","pid":"0","name":"家用電器"},
{"id":"2","pid":"0","name":"服飾"},
{"id":"3","pid":"0","name":"化妝"},
{"id":"7","pid":"4","name":"空調"},
{"id":"8","pid":"4","name":"冰箱"},
{"id":"9","pid":"4","name":"洗衣機"},
{"id":"10","pid":"4","name":"熱水器"},
{"id":"11","pid":"3","name":"面部護理"},
{"id":"12","pid":"3","name":"口腔護理"},
{"id":"13","pid":"2","name":"男裝"},
{"id":"14","pid":"2","name":"女裝"},
{"id":"15","pid":"7","name":"海爾空調"},
{"id":"16","pid":"7","name":"美的空調"},
{"id":"19","pid":"5","name":"加溼器"},
{"id":"20","pid":"5","name":"電熨斗"}
]');
var jsonDataTree = transData(jsonData, 'id', 'pid', 'chindren');
console.log(jsonDataTree);
//結果如下：
[
{"id":"1","pid":"0","name":"家用電器", "chindren":[
{"id":"4","pid":"1","name":"大家電", "chindren":[
{"id":"7","pid":"4","name":"空調", "chindren":[
{"id":"15","pid":"7","name":"海爾空調"},
{"id":"16","pid":"7","name":"美的空調"}
]},
{"id":"8","pid":"4","name":"冰箱"},
{"id":"9","pid":"4","name":"洗衣機"},
{"id":"10","pid":"4","name":"熱水器"}
]},
{"id":"5","pid":"1","name":"生活電器","chindren":[
{"id":"19","pid":"5","name":"加溼器"},
{"id":"20","pid":"5","name":"電熨斗"}
]}
]},
{"id":"2","pid":"0","name":"服飾","chindren":[
{"id":"13","pid":"2","name":"男裝"},
{"id":"14","pid":"2","name":"女裝"}
]},
{"id":"3","pid":"0","name":"化妝","chindren":[
{"id":"11","pid":"3","name":"面部護理"},
{"id":"12","pid":"3","name":"口腔護理"}
]}
]
如何用JS實現下拉框中的值樹形展示
部落格分類： .NET
J#
主要的思路：
將全部記錄讀出，在後臺重組讀出的Datatable，用JS繫結。
示例：
js程式碼
Java程式碼
//設定使用者控制元件中的存放附件的檔案路徑的下拉框中的值
SubModule_PMS_ProjTask_TaskAdd.SetUploadPath(proname.value,0,SetUploadPathDll);
c#後臺程式碼
Java程式碼
#region 設定附件存放位置的下拉框中的值 add by shirlly 20100112
[AjaxPro.AjaxMethod]
public DataTable SetUploadPath(string str, int pProjFolderID)
{
DataSet ds = null;
if (!Equals("", str))
{
int projectID = Int32.Parse(str);
SMSIPMS.BLL.PMS_ProjFolderInfo ProFolderBll = new SMSIPMS.BLL.PMS_ProjFolderInfo();
ds = ProFolderBll.GetList(" ProjectID=" + projectID);
DataTable inDatatable = ds.Tables[0];
DataTable outDatatable = new DataTable();
outDatatable.Columns.Add("ProjFolderID", typeof(System.Int32));
outDatatable.Columns.Add("ProjFolderName", typeof(System.String));
PMS.PMSCommon.addProFoloderOtherDll("", 0, inDatatable, 1, ref outDatatable);
return outDatatable;
}
else
{
return null;
}
}
#endregion
主要展示樹形的程式碼：
Java程式碼
#region 構造樹形結構的DataTable add by shirlly 20100113
/// <summary>
/// 構造樹形結構的DataTable
/// </summary>
/// <param name="Pading"></param>
/// <param name="DirId"></param>
/// <param name="inDatatable">構造之前的DataTable</param>
/// <param name="deep"></param>
/// <param name="outDatatable">構造之後的DataTable</param>
public static void addProFoloderOtherDll(string Pading, int DirId, DataTable inDatatable, int deep, ref DataTable outDatatable)
{
DataRow[] rowlist = inDatatable.Select("PProjFolderID='" + DirId + "'");
foreach (DataRow row in rowlist)
{
string strPading = "";
for (int j = 0; j < deep; j++)
{
strPading += " "; //用全形的空格
}
//新增節點
string Note = strPading + "|--" + row["ProjFolderName"].ToString();
DataRow dr = outDatatable.NewRow();
dr[0] = row["ProjFolderID"].ToString();
dr[1] = Note;
outDatatable.Rows.Add(dr);
//遞迴呼叫addOtherDll函式，在函式中把deep加1
addProFoloderOtherDll(strPading, Convert.ToInt32(row["ProjFolderID"].ToString()), inDatatable, deep + 1, ref outDatatable);
}
}
#endregion
JS程式碼：
Java程式碼
//設定使用者控制元件的下拉框中的值
function SetUploadPathDll(response)
{
var dt = response.value;
document.getElementById("MyUpdateFile_dropFileClass").options.length = 0; //通過使用者控制元件ID+使用者控制元件中想獲得控制元件的ID
var UploadPathDll = document.getElementById("MyUpdateFile_dropFileClass");
UploadPathDll.options.add(new Option("--請選擇--", ""));
if (dt != null)
{
for (var i = 0; i < dt.Rows.length; i++)
{
var UploadPathDll_text = dt.Rows[i]["ProjFolderName"];
var UploadPathDll_value = dt.Rows[i]["ProjFolderID"];
UploadPathDll.options.add(new Option(UploadPathDll_text, UploadPathDll_value));
}
}
}
比如這樣一段json
{
"name":"1級選單1",
"link":"###",
"isleaf": false,
"level": 0,
"children": [
{
"name":"2級選單1",
"link":"###",
"isleaf": false,
"level": 1,
"children": [
{
"name":"3級選單1",
"link":"###",
"isleaf": true,
"level": 2,
"children": null
},
{
"name":"3級選單2",
"link":"###",
"isleaf": true,
"level": 2,
"children": null
}
]
},
{
"name":"2級選單2",
"link":"###",
"isleaf": false,
"level": 1,
"children": [
{
"name":"3級選單3",
"link":"###",
"isleaf": true,
"level": 2,
"children": null
}
]
}
]
}
我怎樣把他轉換成
<div>
<a href="###">一級選單</a>
<ul>
<li>
<a>2級選單1</a>
<ul>
<li><a href="###">3級選單1</a></li>
<li><a href="###">3級選單2</a></li>
</ul>
</li>
<li>
<a href="###">2級選單2</a>
.......
</li>
</ul>
</div>
3個答案
HVA_hk 2015-08-27 11:27:08
下面的程式碼render是主函式，用來render你提供的json資料，它呼叫了renderMenu函式。
javascriptfunction renderMenu(menu, parent) {
var el = $('<a href="' + menu.link +'">' + menu.name + '</a>');
$(parent).append(el);
if (menu.isleaf) {
return parent;
}
var ul = $('<ul/>');
for (var i = 0; i < menu.children.length; ++i) {
var li = $('<li/>');
renderMenu(menu.children[i], li);
ul.append(li);
}
$(parent).append(ul);
return parent;
}
function render(json) {
var div = $('
<div/>
');
return renderMenu(json, div);
}
var json = // 你的那段json程式碼
var menu = render(json);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
body{ font-size: 12px;}
h2,h3{ margin: 0;}
ul{ margin: 0; padding: 0; list-style: none; }
#outer_wrap li{ padding-left: 30px; line-height: 24px;}
.controlSymbol{ padding: 0 5px; border: 1px solid #adff2f; cursor: pointer;}
</style>
</head>
<body>
<ul id="outer_wrap">
<li>
<h2>標題1</h2>
<ul>
<li>內容1</li>
<li>內容2</li>
<li>內容3</li>
<li>內容4</li>
<li>
<h3>標題1_1</h3>
<ul>
<li>內容1_1</li>
<li>內容1_2</li>
<li>內容1_3</li>
<li>內容1_4</li>
</ul>
</li>
<li>
<h3>標題1_2</h3>
<ul>
<li>內容1_1</li>
<li>內容1_2</li>
<li>內容1_3</li>
<li>內容1_4</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
然後新增事件：
var innerText = document.innerText ? 'innerText' : 'textContent';
var span = document.createElement('span');
span[innerText] = '-';
span.className = 'controlSymbol';
function $(id){
return document.getElementById(id);
}
function $_(){
var args = arguments;
var ret = [];
for(var i = 0; i < args.length; i++){
var temp = document.getElementsByTagName(args[i]);
try{
ret = ret.concat(Array.prototype.slice.call(temp,0));
}catch(e){
for(var j = 0; j < temp.length; j++){
ret.push(temp[j]);
}
}
}
return ret;
}
function addSymbol(h){
var innerSpan = span.cloneNode(true);
h.insertBefore(innerSpan,h.firstChild);
}
function next(el){
while(el.nextSibling){
if(el.nextSibling.nodeType == 1){
return el.nextSibling;
}
el = el.nextSibling;
}
return null;
}
var outerWrap = $('outer_wrap');
var hs = $_('h2','h3');
for(var i = 0 ; i < hs.length; i++){
addSymbol(hs[i]);
}
outerWrap.onclick = function(event){
event = event || window.event;
var t = event.target || event.srcElement;
if(t.className == 'controlSymbol'){
var sn = next(t.parentNode);
var snStyle = next(t.parentNode).style;
snStyle.display = (snStyle.display == 'block' || snStyle.display == '') ? 'none' : 'block';
t[innerText] = t[innerText] == '+' ? '-':'+';
}
}
不過用的多的可能是動態的新增選單，也就是動態的生成HTML序列。
一個例子：
var tree = {
'標題2':[
'內容1',
'內容2',
'內容3',
'內容4',
{'標題2_1':['內容2_1','內容2_2','內容2_3','內容2_4']},
{'標題2_2':['內容2_1','內容2_2','內容2_3','內容2_4']},
'內容5'
]
}
var fragment = document.createElement('ul');
function concatTree(tree){
var array = [];
for(var key in tree){
array.push('<li><h3>');
array.push(key);
array.push('</h3><ul>');
for(var i = 0; i < tree[key].length; i++){
if(tree[key][i].constructor == Object){
array = array.concat(concatTree(tree[key][i]));
}else{
array.push('<li>');
array.push(tree[key][i]);
array.push('</li>');
}
}
array.push('</ul></li>');
}
return array;
}
fragment.innerHTML = concatTree(tree).join('');
$('outer_wrap').appendChild(fragment.firstChild);
像上面的方法也可以用來生成表格，扯遠了，比如
var oArray = {
thead : ['標題一','標題二','標題三','標題四'],
tbody : [
[1,2,3,4],
[5,6,7,8],
[9,10,11,12],
[13,14,15,16],
[17,18,19,20],
[21,22,23,24]
],
tfoot : [25,26,27,28]
}
function createTable(arr){
var html = [];
html.push('<table>');
for(var key in arr){
html.push('<'+key + '>');
if(key == 'thead'){
assemTag(arr[key],html,'th')
}else if(key == 'tfoot'){
assemTag(arr[key],html,'td')
}else if(key == 'tbody'){
for(var k = 0, len_1 = arr[key].length; k < len_1; k++){
assemTag(arr[key][k],html,'td')
}
}
html.push('</'+key + '>');
}
html.push('</table>');
var temp = document.createElement('div');
temp.innerHTML = html.join('');
return temp.firstChild;
}
function assemTag(array,html,tag){
html.push('<tr>');
var s = '<' + tag + '>';
var e = '</' + tag + '>';
for(var j = 0, len = array.length; j < len; j++){
html.push(s);
html.push(array[j]);
html.push(e);
}
html.push('</tr>');
}
document.body.appendChild(createTable(oArray));
一般可以直接建立一個節點元素，然後直接設定innerHTML，不過innerHTML雖說是IE先搞起的，但是IE又最不徹底，對於table和tr是不可設定innerHTML的（只讀），所以只能假div之手了。
於是打算自己嘗試弄個簡單的樹形選單。在這過程中，我發現: 對於一棵簡單的樹形選單，4行程式碼足矣。
html程式碼的編寫，直接採用了ul-li的巢狀方式。主要的javascript程式碼如下：
1 $(".menu ul").css("display","none");2 $(".menu a").on("click", function(){3 $(this).next().toggle();4 });
原理很簡單：
1. 初始化時，把ul隱藏。
2. 點選選單時，切換它下面的ul顯示或隱藏。
具體和效果如下圖：
完整程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>menu tree</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<ul class="menu">
<li> <a href="#">A1</a>
<ul>
<li><a href="#">A1-1</a></li>
<li><a href="#">A1-2</a></li>
<li> <a href="#">A1-3</a>
<ul>
<li><a href="#">A1-3-1</a></li>
<li><a href="#">A1-3-2</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">A2</a>
<ul>
<li><a href="#">A2-1</a></li>
<li><a href="#">A2-2</a></li>
</ul>
</li>
<li><a href="#">A3</a></li>
</ul>
<body>
<script type="text/javascript" src="loginFile/jquery.js">
</script>
<script type="text/javascript"> $(document).ready(function(){ $(".menu ul").css("display","none"); $(".menu a").on("click", function(){ $(this).next().toggle(); }); });
</script>
</body>
</html>
js中：
var zNodes=[
{id:0,pId:-1,name:"Aaaa"},
{id:1,pId:0,name:"A"},
{id:11,pId:1,name:"A1"},
{id:12,pId:1,name:"A2"},
{id:13,pId:1,name:"A3"},
{id:2,pId:0,name:"B"},
{id:21,pId:2,name:"B1"},
{id:22,pId:2,name:"B2"},
{id:23,pId:2,name:"B3"},
{id:3,pId:0,name:"C"},
{id:31,pId:3,name:"C1"},
{id:32,pId:3,name:"C2"},
{id:33,pId:3,name:"C3"},
{id:34,pId:31,name:"x"},
{id:35,pId:31,name:"y"},
{id:36,pId:31,name:"z"},
{id:37,pId:36,name:"z1123"} ,
{id:38,pId:37,name:"z123123123"}
];
function treeMenu(a){
this.tree=a||[];
this.groups={};
};
treeMenu.prototype={
init:function(pid){
this.group();
return this.getDom(this.groups[pid]);
},
group:function(){
for(var i=0;i<this.tree.length;i++){
if(this.groups[this.tree[i].pId]){
this.groups[this.tree[i].pId].push(this.tree[i]);
}else{
this.groups[this.tree[i].pId]=[];
this.groups[this.tree[i].pId].push(this.tree[i]);
}
}
},
getDom:function(a){
if(!a){return ''}
var html='\n<ul >\n';
for(var i=0;i<a.length;i++){
html+='<li><a href="#">'+a[i].name+'</a>';
html+=this.getDom(this.groups[a[i].id]);
html+='</li>\n';
};
html+='</ul>\n';
return html;
}
};
var html=new treeMenu(zNodes).init(0);
alert(html);
/**
* json格式轉樹狀結構
* @param {json} json資料
* @param {String} id的字串
* @param {String} 父id的字串
* @param {String} children的字串
* @return {Array} 陣列
*/
function transData(a, idStr, pidStr, chindrenStr){
var r = [], hash = {}, id = idStr, pid = pidStr, children = chindrenStr, i = 0, j = 0, len = a.length;
for(; i < len; i++){
hash[a[i][id]] = a[i];
}
for(; j < len; j++){
var aVal = a[j], hashVP = hash[aVal[pid]];
if(hashVP){
!hashVP[children] && (hashVP[children] = []);
hashVP[children].push(aVal);
}else{
r.push(aVal);
}
}
return r;
}
var jsonData = eval('[
{"id":"4","pid":"1","name":"大家電"},
{"id":"5","pid":"1","name":"生活電器"},
{"id":"1","pid":"0","name":"家用電器"},
{"id":"2","pid":"0","name":"服飾"},
{"id":"3","pid":"0","name":"化妝"},
{"id":"7","pid":"4","name":"空調"},
{"id":"8","pid":"4","name":"冰箱"},
{"id":"9","pid":"4","name":"洗衣機"},
{"id":"10","pid":"4","name":"熱水器"},
{"id":"11","pid":"3","name":"面部護理"},
{"id":"12","pid":"3","name":"口腔護理"},
{"id":"13","pid":"2","name":"男裝"},
{"id":"14","pid":"2","name":"女裝"},
{"id":"15","pid":"7","name":"海爾空調"},
{"id":"16","pid":"7","name":"美的空調"},
{"id":"19","pid":"5","name":"加溼器"},
{"id":"20","pid":"5","name":"電熨斗"}
]');
var jsonDataTree = transData(jsonData, 'id', 'pid', 'chindren');
console.log(jsonDataTree);
//結果如下：
[
{"id":"1","pid":"0","name":"家用電器", "chindren":[
{"id":"4","pid":"1","name":"大家電", "chindren":[
{"id":"7","pid":"4","name":"空調", "chindren":[
{"id":"15","pid":"7","name":"海爾空調"},
{"id":"16","pid":"7","name":"美的空調"}
]},
{"id":"8","pid":"4","name":"冰箱"},
{"id":"9","pid":"4","name":"洗衣機"},
{"id":"10","pid":"4","name":"熱水器"}
]},
{"id":"5","pid":"1","name":"生活電器","chindren":[
{"id":"19","pid":"5","name":"加溼器"},
{"id":"20","pid":"5","name":"電熨斗"}
]}
]},
{"id":"2","pid":"0","name":"服飾","chindren":[
{"id":"13","pid":"2","name":"男裝"},
{"id":"14","pid":"2","name":"女裝"}
]},
{"id":"3","pid":"0","name":"化妝","chindren":[
{"id":"11","pid":"3","name":"面部護理"},
{"id":"12","pid":"3","name":"口腔護理"}
]}
]
如何用JS實現下拉框中的值樹形展示
部落格分類： .NET
J#
主要的思路：
將全部記錄讀出，在後臺重組讀出的Datatable，用JS繫結。
示例：
js程式碼
Java程式碼
//設定使用者控制元件中的存放附件的檔案路徑的下拉框中的值
SubModule_PMS_ProjTask_TaskAdd.SetUploadPath(proname.value,0,SetUploadPathDll);
c#後臺程式碼
Java程式碼
#region 設定附件存放位置的下拉框中的值 add by shirlly 20100112
[AjaxPro.AjaxMethod]
public DataTable SetUploadPath(string str, int pProjFolderID)
{
DataSet ds = null;
if (!Equals("", str))
{
int projectID = Int32.Parse(str);
SMSIPMS.BLL.PMS_ProjFolderInfo ProFolderBll = new SMSIPMS.BLL.PMS_ProjFolderInfo();
ds = ProFolderBll.GetList(" ProjectID=" + projectID);
DataTable inDatatable = ds.Tables[0];
DataTable outDatatable = new DataTable();
outDatatable.Columns.Add("ProjFolderID", typeof(System.Int32));
outDatatable.Columns.Add("ProjFolderName", typeof(System.String));
PMS.PMSCommon.addProFoloderOtherDll("", 0, inDatatable, 1, ref outDatatable);
return outDatatable;
}
else
{
return null;
}
}
#endregion
主要展示樹形的程式碼：
Java程式碼
#region 構造樹形結構的DataTable add by shirlly 20100113
/// <summary>
/// 構造樹形結構的DataTable
/// </summary>
/// <param name="Pading"></param>
/// <param name="DirId"></param>
/// <param name="inDatatable">構造之前的DataTable</param>
/// <param name="deep"></param>
/// <param name="outDatatable">構造之後的DataTable</param>
public static void addProFoloderOtherDll(string Pading, int DirId, DataTable inDatatable, int deep, ref DataTable outDatatable)
{
DataRow[] rowlist = inDatatable.Select("PProjFolderID='" + DirId + "'");
foreach (DataRow row in rowlist)
{
string strPading = "";
for (int j = 0; j < deep; j++)
{
strPading += " "; //用全形的空格
}
//新增節點
string Note = strPading + "|--" + row["ProjFolderName"].ToString();
DataRow dr = outDatatable.NewRow();
dr[0] = row["ProjFolderID"].ToString();
dr[1] = Note;
outDatatable.Rows.Add(dr);
//遞迴呼叫addOtherDll函式，在函式中把deep加1
addProFoloderOtherDll(strPading, Convert.ToInt32(row["ProjFolderID"].ToString()), inDatatable, deep + 1, ref outDatatable);
}
}
#endregion
JS程式碼：
Java程式碼
//設定使用者控制元件的下拉框中的值
function SetUploadPathDll(response)
{
var dt = response.value;
document.getElementById("MyUpdateFile_dropFileClass").options.length = 0; //通過使用者控制元件ID+使用者控制元件中想獲得控制元件的ID
var UploadPathDll = document.getElementById("MyUpdateFile_dropFileClass");
UploadPathDll.options.add(new Option("--請選擇--", ""));
if (dt != null)
{
for (var i = 0; i < dt.Rows.length; i++)
{
var UploadPathDll_text = dt.Rows[i]["ProjFolderName"];
var UploadPathDll_value = dt.Rows[i]["ProjFolderID"];
UploadPathDll.options.add(new Option(UploadPathDll_text, UploadPathDll_value));
}
}
}
比如這樣一段json
{
"name":"1級選單1",
"link":"###",
"isleaf": false,
"level": 0,
"children": [
{
"name":"2級選單1",
"link":"###",
"isleaf": false,
"level": 1,
"children": [
{
"name":"3級選單1",
"link":"###",
"isleaf": true,
"level": 2,
"children": null
},
{
"name":"3級選單2",
"link":"###",
"isleaf": true,
"level": 2,
"children": null
}
]
},
{
"name":"2級選單2",
"link":"###",
"isleaf": false,
"level": 1,
"children": [
{
"name":"3級選單3",
"link":"###",
"isleaf": true,
"level": 2,
"children": null
}
]
}
]
}
我怎樣把他轉換成
<div>
<a href="###">一級選單</a>
<ul>
<li>
<a>2級選單1</a>
<ul>
<li><a href="###">3級選單1</a></li>
<li><a href="###">3級選單2</a></li>
</ul>
</li>
<li>
<a href="###">2級選單2</a>
.......
</li>
</ul>
</div>
3個答案
HVA_hk 2015-08-27 11:27:08
下面的程式碼render是主函式，用來render你提供的json資料，它呼叫了renderMenu函式。
javascriptfunction renderMenu(menu, parent) {
var el = $('<a href="' + menu.link +'">' + menu.name + '</a>');
$(parent).append(el);
if (menu.isleaf) {
return parent;
}
var ul = $('<ul/>');
for (var i = 0; i < menu.children.length; ++i) {
var li = $('<li/>');
renderMenu(menu.children[i], li);
ul.append(li);
}
$(parent).append(ul);
return parent;
}
function render(json) {
var div = $('
<div/>
');
return renderMenu(json, div);
}
var json = // 你的那段json程式碼
var menu = render(json);
相關文章
- 樹形結構
- layui樹形結構UI
- java樹形結構Java
- 前端樹形Tree資料結構使用-🤸🏻♂️各種姿勢總結前端資料結構
- 樹形結構處理
- 樹結構總結
- markdown樹形結構生成工具
- 淺談 JavaScript 處理樹形結構的幾個場景與方案JavaScript
- 七、基本資料結構（樹形結構）資料結構
- LayUI—tree樹形結構的使用UI
- 裝置樹總結
- 資料結構中樹形結構簡介資料結構
- 【總結】二叉樹概念大總結二叉樹
- 字串陣列轉為樹形結構字串陣列
- php tree類的使用（樹形結構）PHP
- [Swing]樹形結構的實現
- 一個簡單的樹形結構
- 【專案問題總結】5：樹形結構節點的級聯刪除邏輯
- javascript樹形導航選單例項程式碼JavaScript單例
- 線段樹（毒瘤）總結
- 線段樹模板總結
- javascript Date 總結JavaScript
- Javascript事件總結JavaScript事件
- JavaScript 技巧總結JavaScript
- Linux 下樹形結構的檢視Linux
- 將List物件列表轉為樹形結構物件
- Android 多級樹形結構顯示Android
- 樹形結構的儲存與查詢
- Oracle 樹形結構查詢的特殊用法Oracle
- 28款jQuery Tree 樹形結構外掛jQuery
- Linux用樹形結構顯示目錄結構Linux
- 決策樹學習總結
- 樹的演算法總結演算法
- JavaScript基礎總結（三）——陣列總結JavaScript陣列
- JavaScript 模組化總結JavaScript
- JavaScript繼承總結JavaScript繼承
- JavaScript基礎總結JavaScript
- javascript 總結筆記JavaScript筆記