jquery - 使用 jQuery 和 asp.net 将 Json 字符串构建为 TreeView

Question

我正在使用asp.net和ajax生成Json数据。

当我尝试使用下面的代码绘制树时，它在另一方面不起作用当我将代码 2 部分设置为静态时，它可以正常工作

注意:使用库 treant.js

链接:http://fperucic.github.io/treant-js/

代码1:

$(function () {
    $.ajax({
        type: "POST",
        url: "Default.aspx/Hello",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data)
        {
            var Details = data.d;          
            if (Details != "")
            {
                var tree_design = '';
                //sessionStorage.setItem("str_data", tree_design);

                var currDepth = 0;
                var totalData = $.map(Details, function (n, i) { return i; }).length;
                var lastNodeIndex = parseInt(totalData) - 2;
                //-----------------------------------------//
                $.each(Details, function (index, item)
                {
                    if (Details[parseInt(index) + 1] === undefined || Details[parseInt(index) + 1] == null || Details[parseInt(index) + 1] == "") 
                    { 
                        //alert("undefined");
                    }
                    else
                    {
                        //console.log(index);

                        //console.log(item.Name);
                        //console.log(item.Depth);
                        //alert(item.Depth);
                        //console.log(item.Lft);
                        //-----------------------------------//
                        // Level down? (or the first)
                        if (((parseInt(item.Depth) > parseInt(currDepth)) || parseInt(index) == 0) && parseInt(item.Depth) != 0) {
                            tree_design += 'children: [';
                        }
                        //----------------------------------//
                        // Level up?
                        if (parseInt(item.Depth) < parseInt(currDepth)) {
                            tree_design += '' + '}],'.repeat(parseInt(currDepth) - parseInt(item.Depth));
                        }
                        //----------------------------------//
                        if (parseInt(item.Depth) != 0)
                        {
                            tree_design += '{ connectors: { style: { stroke: "#000000" } },';
                        }
                        //---------Print Node Text-------------//
                        tree_design += 'text: { name: "' + item.Name + '" },HTMLclass: "blue",image: "images/no_member.png",';
                        //---------------------------------------//
                        //console.log(Details[parseInt(index) + 1].Depth);
                        var nextEleDepth = Details[parseInt(index) + 1].Depth;
                        //console.log(nextEleDepth);

                        // Check if there's chidren
                        if (parseInt(index) != lastNodeIndex && (parseInt(nextEleDepth) <= parseInt(item.Depth)))
                        {
                            tree_design += '},'; // If not, close the <li>
                        }
                        //---------------------------------------//
                        // Adjust current depth
                        currDepth = parseInt(item.Depth);
                        //---------------------------------------//
                        //console.log(parseInt(index)+"=="+lastNodeIndex);
                        // Are we finished?
                        if (parseInt(index) == lastNodeIndex) {
                            //console.log("Are we finished");
                            tree_design += '' + '}],'.repeat(currDepth);
                        }
                        //------------------------------------//
                    }
                });
                //------------------Draw Tree---------------------------//
                //console.log(tree_design);

                var chart_config = {
                    chart: {
                        container: "#basic-example",
                        nodeAlign: "BOTTOM",
                        connectors: {
                            type: "step"
                        },
                        node: {
                            HTMLclass: "nodeExample1"
                        }
                    },
                    nodeStructure: {
                        tree_design
                    }
                };

                //console.log(tree_design);

                new Treant(chart_config);
                //-------------------------------------------------------//
            }
        }
    });
});

代码 2:工作

     $(function () {
    $.ajax({
        type: "POST",
        url: "Default.aspx/Hello",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data)
        {
            var Details = data.d;          
            if (Details != "")
            {
                var tree_design = '';
                //sessionStorage.setItem("str_data", tree_design);

                var currDepth = 0;
                var totalData = $.map(Details, function (n, i) { return i; }).length;
                var lastNodeIndex = parseInt(totalData) - 2;
                //-----------------------------------------//
                $.each(Details, function (index, item)
                {
                    if (Details[parseInt(index) + 1] === undefined || Details[parseInt(index) + 1] == null || Details[parseInt(index) + 1] == "") 
                    { 
                        //alert("undefined");
                    }
                    else
                    {
                        //console.log(index);

                        //console.log(item.Name);
                        //console.log(item.Depth);
                        //alert(item.Depth);
                        //console.log(item.Lft);
                        //-----------------------------------//
                        // Level down? (or the first)
                        if (((parseInt(item.Depth) > parseInt(currDepth)) || parseInt(index) == 0) && parseInt(item.Depth) != 0) {
                            tree_design += 'children: [';
                        }
                        //----------------------------------//
                        // Level up?
                        if (parseInt(item.Depth) < parseInt(currDepth)) {
                            tree_design += '' + '}],'.repeat(parseInt(currDepth) - parseInt(item.Depth));
                        }
                        //----------------------------------//
                        if (parseInt(item.Depth) != 0)
                        {
                            tree_design += '{ connectors: { style: { stroke: "#000000" } },';
                        }
                        //---------Print Node Text-------------//
                        tree_design += 'text: { name: "' + item.Name + '" },HTMLclass: "blue",image: "images/no_member.png",';
                        //---------------------------------------//
                        //console.log(Details[parseInt(index) + 1].Depth);
                        var nextEleDepth = Details[parseInt(index) + 1].Depth;
                        //console.log(nextEleDepth);

                        // Check if there's chidren
                        if (parseInt(index) != lastNodeIndex && (parseInt(nextEleDepth) <= parseInt(item.Depth)))
                        {
                            tree_design += '},'; // If not, close the <li>
                        }
                        //---------------------------------------//
                        // Adjust current depth
                        currDepth = parseInt(item.Depth);
                        //---------------------------------------//
                        //console.log(parseInt(index)+"=="+lastNodeIndex);
                        // Are we finished?
                        if (parseInt(index) == lastNodeIndex) {
                            //console.log("Are we finished");
                            tree_design += '' + '}],'.repeat(currDepth);
                        }
                        //------------------------------------//
                    }
                });
                //------------------Draw Tree---------------------------//
                //console.log(tree_design);

                var chart_config = {
                    chart: {
                        container: "#basic-example",
                        nodeAlign: "BOTTOM",
                        connectors: {
                            type: "step"
                        },
                        node: {
                            HTMLclass: "nodeExample1"
                        }
                    },
                    nodeStructure: {
                        text: { name: "BOD" },HTMLclass: "blue",image: "images/no_member.png",children: [{ connectors: { style: { stroke: "#000000" } },text: { name: "Engr. Kawser Hasan (Managing Director)" },HTMLclass: "blue",image: "images/no_member.png",},{ connectors: { style: { stroke: "#000000" } },text: { name: "Engr. Md. Abdullah Al Baki (Director)" },HTMLclass: "blue",image: "images/no_member.png",}]
                    }
                };

                //console.log(tree_design);

                new Treant(chart_config);
                //-------------------------------------------------------//
            }
        }
    });
}); 

代码 3:服务器脚本 (ASP.Net C#)

using CDB.System.Common.Layout.Company;
using PRP.PPL.System.include.config.connection;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace PPL.Data.HRD.Organogram.Tree1
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        [WebMethod]
        public static Details[] Hello()
        {
            string sql;
            db_ppl Connstring = new db_ppl();
            sql = @"SELECT        node.category_id, node.name, COUNT(parent.category_id) - 1 AS depth, node.lft, node.rgt
                   FROM            nested_category AS node CROSS JOIN
                                            nested_category AS parent
                   WHERE        (node.lft BETWEEN parent.lft AND parent.rgt)
                   GROUP BY node.category_id, node.name, node.lft, node.rgt
                    ORDER BY node.lft";
            List<Details> details_data = new List<Details>();

            using (SqlConnection con = Connstring.getcon)
            {
                using (SqlCommand cmd = new SqlCommand(sql, con))
                {
                    con.Open();
                    SqlDataReader reader = cmd.ExecuteReader();

                    while (reader.Read())
                    {
                        Details col_data = new Details();
                        col_data.category_id = reader.GetInt32(0);
                        col_data.Name = reader.GetString(1);
                        col_data.Depth = reader.GetInt32(2);
                        col_data.Lft = reader.GetInt32(3);
                        col_data.Rgt = reader.GetInt32(4);                       
                        details_data.Add(col_data);
                    }
                }
            }

            return details_data.ToArray();
        }

        //---------------For Details Data----------------//
        public class Details
        {
            public Int32 category_id { get; set; }
            public string Name { get; set; }
            public Int32 Depth { get; set; }
            public Int32 Lft { get; set; }
            public Int32 Rgt { get; set; }           

        }
    }
}

代码 4:asp.Net 部分

<%@ Page Title="" Language="C#" MasterPageFile="~/CDB/System/Common/Layout/Master/Panel.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="PPL.Data.HRD.Organogram.Tree1._default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<style type="text/css">
    #basic-example
    {
        overflow: unset !important;
    }
</style>
<link href="../../../../../CDB/System/Assets/plugins/Organogram/Treant.css" rel="stylesheet" />
<link href="../../../../../CDB/System/Assets/plugins/Organogram/basic-example.css" rel="stylesheet" />

<script src="../../../../../CDB/System/Assets/plugins/Organogram/raphael.js"></script>
<script src="../../../../../CDB/System/Assets/plugins/Organogram/Treant.js"></script>

<script src="default.js"></script>
<div class="content-wrapper" style="padding:0;margin:0;">
    <!-- Main content -->
    <section class="content">
        <div class="row">           
            <!-- left column -->
            <div class="col-md-12">
                <!-- general form elements -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Book Progress</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group" style="overflow:scroll;">
                                    <div class="chart" id="basic-example"></div>
                                </div>
                            </div>
                        </div>
                        <div class="box-footer">

                        </div>                                                                                              
                    </div>                       
                </div>
                <!-- /.box -->
            </div>
        </div>
    </section>
 </div>
</asp:Content>

输出:

Answer 1

var tree_design='text: { name: "BOD" },HTMLclass: "blue",image: "images/no_member.png",children: [{ connectors: { style: { stroke: "#000000" } },text: { name: "Engr. Kawser Hasan (Managing Director)" },HTMLclass: "blue",image: "images/no_member.png",},{ connectors: { style: { stroke: "#000000" } },text: { name: "Engr. Md. Abdullah Al Baki (Director)" },HTMLclass: "blue",image: "images/no_member.png",}]'; 



 nodeStructure: {                       
    tree_design
}

当您在nodeStructure中链接tree_design时，它是字符串格式，但nodeStructure期望采用json格式将 tree_design 转换为 json 或这样做

var tree_design='{ name: "BOD" },HTMLclass: "blue",image: "images/no_member.png",children: [{ connectors: { style: { stroke: "#000000" } },text: { name: "Engr. Kawser Hasan (Managing Director)" },HTMLclass: "blue",image: "images/no_member.png",},{ connectors: { style: { stroke: "#000000" } },text: { name: "Engr. Md. Abdullah Al Baki (Director)" },HTMLclass: "blue",image: "images/no_member.png",}]'; 

nodeStructure: {                       
    text: tree_design
}