C# ASP.NET递归循环生成嵌套json并用Echarts展示结构树

一、需求:

做一个部门的结构树,样子大概是如下图这样展示:

图片示例图

二、分析:

做成这样的一个效果图,虽然可以写但会比较麻烦,其实现在是有很多这样的前端控件帮我们实现,只需要我们按照要求传递数据即可,这就不需要重复造轮子。

例如:Esay UI的tree控件,Echarts的图表展示,这两个都是常用的。

本文就是用Echarts来展示结构树。

三、Echarts的基本使用

Echarts的使用很简单,只需要从官网下载引入js文件,或直接引入CDN<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>
然后只需要在js里调用,并传JSON数据即可,直接看我下方代码例子,应该都能看懂的,至于有关于Echarts的其他参数的配置说明,可以再自行查看官网。

//展示结构树的容器
<div id="item" style="width:1200px; height: 500px;">
<script>
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('item'));
        //使用制定的配置项和数据显示图表
        //myChart.showLoading();    //显示Loading标志;

        //$.get('data/asset/data/flare.json', function (data) {
        //    myChart.hideLoading();    //得到数据后隐藏Loading标志

        //    echarts.util.each(data.children, function (datum, index) {
        //        index % 2 === 0 && (datum.collapsed = true);
        //    });    //间隔展开子数据,animate,display,physics,scale,vis是展开的


        option = {
            calculable: false,
            tooltip: {
                // show:'true',//默认:true;是否显示提示框组件,包括提示框浮层和 axisPointer。
                trigger: 'item',//默认:item;触发类型。item:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。'axis':座标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。'none':什么都不触发。
                //formatter: '{b}:{c}',
                hideDelay: 0 // chart.refresh();刷新时会维持当时图表的所有状态,所以设置隐藏延迟为0,否则在快速选择另一个节点时(尤其是数据比较多时)导致无法显示选择中的tooltip
                //无法完全避免但是很大减轻了副作用
            },
            series: [
                {
                    name: '树图',
                    type: 'tree',
                    orient: 'vertical',  // vertical horizontal
                    rootLocation: { x: 'center', y: 30 }, // 根节点位置  {x: 100, y: 'center'}
                    nodePadding: 50,//节点间距
                    symbolSize: 50,//tree图上的原型的大小
                    //symbol: 'circle',
                    //roam: true,//设置次参数后,针对该图表可以放大和缩小,移动
                    initialTreeDepth: 3,//初始显示节点深度
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: "{b}",
                                position: 'inside',
                                textStyle: {
                                    color: '#000',
                                    fontSize: 12,
                                    fontWeight: 'bolder'
                                }
                            },
                            lineStyle: {
                                color: '#48b',
                                shadowColor: '#000',
                                shadowBlur: 4,
                                shadowOffsetX: 3,
                                shadowOffsetY: 5,
                                type: 'curve' // 'curve'|'broken'|'solid'|'dotted'|'dashed'

                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },

                    data: [
                        {
                            name: '根节点',
                            value6,
                            children: [
                                {
                                    name: '节点1',
                                    value4,
                                    children: [
                                        {
                                            name: '叶子节点1',
                                            value4
                                        },
                                        {
                                            name: '叶子节点2',
                                            value4
                                        },
                                        {
                                            name: '叶子节点3',
                                            value2
                                        }

                                    ]
                                },
                                {
                                    name: '节点2',
                                    value4,
                                    children: [{
                                        name: '叶子节点7',
                                        value4
                                    },
                                    {
                                        name: '叶子节点8',
                                        value4
                                    }]
                                },
                                {
                                    name: '节点3',
                                    value1,
                                    children: [
                                        {
                                            name: '叶子节点9',
                                            value4
                                        },
                                        {
                                            name: '叶子节点10',
                                            value4
                                        },
                                        {
                                            name: '叶子节点11',
                                            value2
                                        },
                                        {
                                            name: '叶子节点12',
                                            value2
                                        }
                                    ]
                                },
                                {
                                    name: '节点8',
                                    value1,
                                    children: [
                                        {
                                            name: '叶子节点9',
                                            value4
                                        },

                                        {
                                            name: '节点2',
                                            value4,
                                            children: [{
                                                name: '叶子节点7',
                                                value4
                                            },
                                            {
                                                name: '叶子节点8',
                                                value4
                                            }]
                                        }
                                    ]
                                }

                            ]
                        }
                    ]
                }
            ]
            };

        myChart.setOption(option);
    </script>



























































































































































Echarts官方示例

四、递归构建JSON

所以,从上面的Echarts使用可以知道,我们接下来需要做的就是生成一个对应结构的json传递到前端。
先说明一下,我的数据特点,ID是主键,不存在会有相同列的数据,NAME_SHORT就是一个展示名称,BELONG_ID表示一个层级关系,相同根节点下的子节点,BELONG_ID相同,数据取自ID

1. 建立用来保存树结构数据的目标对象

public  class TreeObject
    {
        public string name { getset; }
        public string value { getset; }
        public IList<TreeObject> children = new List<TreeObject>();
        public  void Addchildren(TreeObject node)
        
{
            this.children.Add(node);
        }
    }








2.查询表获得数据源

        /// <summary>
        ///数据库的连接字符串
        /// </summary>
        private static readonly string connstr = @"server=.;database=userInfo;uid=sa;pwd=123456";;

public DataTable getTable(string cmdText)
        
{
            using (SqlConnection cnn = new SqlConnection(connstr))
            {
                using (SqlCommand comm = new SqlCommand(cmdText, cnn))
                {
                    comm.CommandType = CommandType.Text;
                    SqlDataAdapter da = new SqlDataAdapter();
                    da.SelectCommand = comm;
                    DataTable mytable = new DataTable();
                    da.Fill(mytable);
                    return mytable;
                }
            }
        }

 public DataTable GetDataTable()
        
{
            string sql = @"select ID,NAME_SHORT,BELONGTO_ID 
                            from UserInfo
                            order by BELONGTO_ID"

;
            DataTable dt = getTable(sql);
            return dt;
        }
























3.递归循环生成树

       //全局变量用于保存数据
       public List<TreeObject> treeNodes = new List<TreeObject>();

        //建立树的递归方法
        /// </summary>
        /// <param name="dtSource">数据源</param>
        /// <param name="parentNode">父节点</param>
        /// <param name="parentID">节点的归属ID</param>
        public void BindTree(DataTable dtSource, TreeObject parentNode, string parentID)
        
{
            DataRow[] rows = dtSource.Select(string.Format("BELONGTO_ID={0}", parentID));
            foreach (DataRow row in rows)
            {
                TreeObject tree = new TreeObject();
                tree.name = row["NAME_SHORT"].ToString();
                tree.value = row["ID"].ToString();
                //递归性质,函数内调用自身函数
                BindTree(dtSource, tree, row["ID"].ToString());
                //递归结束的终点条件
                if (parentNode == null)
                {
                    treeNodes.Add(tree);
                }
                else
                {
                    parentNode.children.Add(tree);
                }
            }
        }



























4.调用

//调用SQL,获取数据源
DataTable dt = GetDataTable();
//调用递归函数,传入数据源,根节点
BindTree(dt, null"0");
//反序列化对象,生成json字符串
string jsonData = JsonConvert.SerializeObject(treeNodes);
return jsonData;






5.效果

[{
    "name": 'A',
    "value": '10000',
    "children": [{
            "name": 'B1',
            "value": '10002',
            "children": [{
                    "children": [],
                    "name": 'C',
                    "value": '10007'
                },
                {
                    "children": [],
                    "name": 'D',
                    "value": '10008'
                },
                {
                    "children": [],
                    "name": 'E',
                    "value": '10009'
                }

            ]
        },
        {
            "name": 'B2',
            "value": '10003',
            "children": [{
                    "children": [],
                    "name": 'F',
                    "value": '10010'
                },
                {
                    "children": [],
                    "name": 'G',
                    "value": '10011'
                }
            ]
        },
        {
            "name": 'B3',
            "value": '10004',
            "children": [{
                    "children": [],
                    "name": 'H',
                    "value": '10012'
                },
                {
                    "children": [],
                    "name": 'I',
                    "value": '10013'
                },
                {
                    "children": [],
                    "name": 'J',
                    "value": '10014'
                }
            ]
        },
        {
            "name": 'B4',
            "value": '10005',
            "children": [{
                    "children": [],
                    "name": 'K',
                    "value": '10015'
                },

                {
                    "name": 'L',
                    "value": '10016',
                    "children": [{
                            "children": [],
                            "name": 'L1',
                            "value": '10017'
                        },
                        {
                            "children": [],
                            "name": 'L2',
                            "value": '10018'
                        }
                    ]
                }
            ]
        }

    ]
}]























































































图片效果图

五、总结

以上就是全部代码了,从代码来说,不难,整个过程就是引入Echarts,传递json数据。

因此最需要做的就是生成对应结构的json,而做这些循环嵌套,使用递归逐步深入还是比较简单,可能先尝试递归两三层来找到递归的规律,这个还是需要根据自己数据结构来做。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章