树形和仿树形下拉框

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

树形和仿树形下拉框_第1张图片


接收的数据格式是这样的 id-pid-children模式

树形和仿树形下拉框_第2张图片


上面这中数据格式可以这样子来
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;
        }
 
而 仿树形下拉是这样的


树形和仿树形下拉框_第3张图片


代码是这样的,从上面小改一下

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>

   
   


你可能感兴趣的:(树形和仿树形下拉框)