树形和仿树形下拉框

来源：互联网发布：淘宝店主回复好评编辑：程序博客网时间：2024/06/05 01:01

一般来说树形下拉框是这样的

接收的数据格式是这样的 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>

1 0