從對象數組創建模擬分層選擇框

我想創建一個select框，並使用我的扁平JSON數據顯示項目及其深度。以下圖片與Joomla CMS在層次類別中使用PHP的情況相同。從對象數組創建模擬分層選擇框

我的樣本數據是這樣（注意，深度爲無窮大）：

[{ 
    "id": 1, 
    "parent": "0", 
    "text": "Doctors" 
}, { 
    "id": 2, 
    "parent": "0", 
    "text": "Clinics" 
}, { 
    "id": 3, 
    "parent": 1, 
    "text": "General doctors" 
}, { 
    "id": 4, 
    "parent": 1, 
    "text": "Experts" 
}, { 
    "id": 5, 
    "parent": 4, 
    "text": "Children diseases specialist" 
}, { 
    "id": 6, 
    "parent": 4, 
    "text": "Otorhinolaryngology" 
}]

我寫了下面的代碼，我通過調用Data.createTreeOptions(items);使用它和它的工作，但我get是原始數組項目排序的選項列表。我想要項目在parent - children加載像圖片中的那些。

var Data = { 
    createTreeOptions: function (items) { 
     if (!items.length) 
      return ''; 
     var html = '', children = [], l; 

     $.each(items, function() { 
      l = (typeof children[this.parent] !== "undefined") ? children[this.parent] : []; 
      l.push(this); 
      children[this.parent] = l; 
     }); 

     var tree = Data.treeRecurse(0, '', [], children, 0); 
     $.each(tree, function() { 
      if (typeof this.id !== "undefined") 
       html += '<option value="' + this.id + '" data-parent="' + this.parent + '">' + this.treemenu + '</option>'; 
     }); 
     return html; 
    } 
    , treeRecurse: function (id, indent, list, children, level) { 
     if (typeof children[id] !== "undefined" && children[id]) { 
      $.each(children[id], function() { 
       var v = this; 
       var id = v.id; 
       if (v.parent === 0) 
        text = v.text; 
       else 
        text = '|_ ' + v.text; 

       list[id] = v; 
       list[id].treemenu = indent + text; 
       list[id].children = (typeof children[id] !== "undefined") ? children[id].length : 0; 
       level++; 
       list = Data.treeRecurse(id, indent + ' -', list, children, level); 
      }); 
     } 
     return list; 
    } 
}

來源

2016-09-13 Farid Rn

首先要做的：打開你的文本編輯器，並開始創建的代碼。第二：顯示你卡在哪裏。第三：你會得到一個很好和準確的答案。你問的方式實在太寬泛。 – skobaljic

@skobaljic我加了我的代碼，我想我可以通過不顯示我自己的代碼找到比我更好的解決方案。 –

我不明白這個語言，但基本上你想用'-'來縮進這些項目，例如，基於父子關係？這是主要目標？ – skobaljic

在特定情況下，你可以創建和使用jQuery對象是這樣的：

var items = [{ 
 
    "id": 1, 
 
    "parent": "0", 
 
    "text": "Doctors" 
 
}, { 
 
    "id": 2, 
 
    "parent": "0", 
 
    "text": "Clinics" 
 
}, { 
 
    "id": 3, 
 
    "parent": 1, 
 
    "text": "General doctors" 
 
}, { 
 
    "id": 4, 
 
    "parent": 1, 
 
    "text": "Experts" 
 
}, { 
 
    "id": 5, 
 
    "parent": 4, 
 
    "text": "Children diseases specialist" 
 
}, { 
 
    "id": 6, 
 
    "parent": 4, 
 
    "text": "Otorhinolaryngology" 
 
}]; 
 
var imagine = $('<div><div class="hierarchy-0"></div></div>'); 
 
$.each(items, function(i, item) { 
 
\t var parent = imagine.find('.hierarchy-'+item.parent); 
 
    \t parent.append('<div class="hierarchy-'+item.id+'"><span>'+item.text+'</span></div>'); 
 
}); 
 
function findChildren(elem, indent) { 
 
    elem.children('div').each(function(c, child) { 
 
     selectHtml += '<option>'+'-'.repeat(indent)+$(child).children('span').text()+'</option>'; 
 
     findChildren($(child), indent+1); 
 
    }); 
 
}; 
 
var selectHtml = ''; 
 
findChildren(imagine.find('.hierarchy-0'), 0); 
 
$('select').html(selectHtml);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select></select>

同樣在JSFiddle。

但是，我相信你會得到另一種更好的方法:)

來源

2016-09-13 21:42:22 skobaljic

創建一個虛構的div，然後使用它來生成選項似乎正在工作！我試圖用JS做同樣的事情，但沒有「想象力」！ –

爲此，您可以簡單地用這個代碼：

<!DOCTYPE html> 
<html> 
<body> 

<form> 
    <select id="mySelect" size="1"> 
    <option>Apple</option> 
    <option>Pear</option> 
    <option>Banana</option> 
    <option>Orange</option> 
    </select> 
</form> 


<script> 

    var x = document.getElementById("mySelect"); 
    for(var i in myJSON){ 
    var option = document.createElement("option"); 
    option.text = myJSON[i].text; 
    x.add(option); 
    } 

</script> 

</body> 
</html>

如果要修改選擇使用大小屬性的大小。

來源

2016-09-13 20:32:36 Salvatore

您在哪裏訂購父母的物品以便按照我的要求做？ –

我不明白你的問題對不起，你有你的json中的父屬性是否要添加基於父數的選項？或者你可以更好地解釋我的父母子女關係？ – Salvatore

從對象數組創建模擬分層選擇框

回答

相關問題