一般來說樹形下拉框是這樣的
接收的資料格式是這樣的 id-pid-children模式
上面這中資料格式可以這樣子來
var jsonDB = [
{ id: 1, pid: 0, name: "XX公司" },
{ id: 2, pid: 1, name: "人事部" },
{ id: 3, pid: 1, name: "行政部" },
{ id: 4, pid: 1, name: "開發部" },
{ id: 5, pid: 4, name: "開發小組1" },
{ id: 6, pid: 4, name: "開發小組2" },
{ id: 7, pid: 4, name: "開發小組3" },
{ id: 8, pid: 7, name: "開發小組3單小弟" },
{ id: 9, pid: 7, name: "開發小組3單小弟" }
];
var data= arrayToTree(jsonDB, "id", "pid")
//将ID、ParentID這種資料格式轉換為樹格式
function arrayToTree(data, id, pid)
{
if (!data || !data.length) return [];
var targetData = []; //存儲資料的容器(傳回)
var records = {};
var itemLength = data.length; //資料集合的個數
for (var i = 0; i < itemLength; i++) {
var o = data[i];
records[o[id]] = o;
}
for (var i = 0; i < itemLength; i++) {
var currentData = data[i];
var parentData = records[currentData[pid]];
if (!parentData) {
targetData.push(currentData);
continue;
}
parentData.children = parentData.children || [];
parentData.children.push(currentData);
}
return targetData;
}
而 仿樹形下拉是這樣的
代碼是這樣的，從上面小改一下
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %> <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(function () {
var jsonDB = [
{ id: 1, pid: 0, name: "XX公司" },
{ id: 2, pid: 1, name: "人事部" },
{ id: 3, pid: 1, name: "行政部" },
{ id: 4, pid: 1, name: "開發部" },
{ id: 5, pid: 4, name: "開發小組1" },
{ id: 6, pid: 4, name: "開發小組2" },
{ id: 7, pid: 4, name: "開發小組3" },
{ id: 8, pid: 7, name: "開發小組3單小弟" },
{ id: 9, pid: 7, name: "開發小組3單小弟" }
];
var data1 = [];
var data2 = arrayToTree(jsonDB, "id", "pid", data1);
for (var i = 0; i < data1.length; i++)
{
$("#demo").append("<option value=\"" + data1[i].id + "\">" + data1[i].name + "</option>");
}
});
//将ID、ParentID這種資料格式轉換為樹格式
function arrayToTree(data, id, pid,data2) {
if (!data || !data.length) return [];
var targetData = []; //存儲資料的容器(傳回)
var records = {};
var itemLength = data.length; //資料集合的個數
for (var i = 0; i < itemLength; i++) {
var o = data[i];
records[o[id]] = o;
}
for (var i = 0; i < itemLength; i++) {
var currentData = data[i];
var parentData = records[currentData[pid]];
if (!parentData) {
currentData["prefix"] = "|--";
//alert(currentData["name"]);
data2.push(currentData);
currentData["name"] = currentData["prefix"] + currentData["name"];
targetData.push(currentData);
continue;
}
currentData["prefix"] = parentData["prefix"] + "|--";
//alert(currentData["prefix"]);
parentData.children = parentData.children || [];
parentData.children.push(currentData);
currentData["name"] = currentData["prefix"] + currentData["name"];
data2.push(currentData);
}
return targetData;
}
</script> <select id="demo"></select>
</asp:Content>