bootstrap ace treeview树的使用 --ASP.NET

bootstrap-Ace是一个轻量，功能丰富，HTML5、响应式、支持手机及平板电脑上浏览的管理后台模板。

关于tree的使用,Ace官网上给了静态数据的例子 --》 传送门  此篇博客是基于asp.net mvc 通过递归得到的数据源

先上后台返回的Json

{
	"code": 0,
	"msg": "Success",
	"count": 0,
	"data": [{
		"ID": 1,
		"text": "测试公司",
		"type": "folder",
		"itemSelect": false,
		"additionalParameters": [{
			"ID": 2,
			"text": "总经理部",
			"type": "folder",
			"itemSelect": false,
			"additionalParameters": [{
				"ID": 10,
				"text": "财务部",
				"type": "item",
				"itemSelect": false,
				"additionalParameters": [],
				"IsEnabled": 0
			}],
			"IsEnabled": 0
		}, {
			"ID": 12,
			"text": "IT",
			"type": "item",
			"itemSelect": false,
			"additionalParameters": [],
			"IsEnabled": 0
		}, {
			"ID": 13,
			"text": "GMO",
			"type": "item",
			"itemSelect": false,
			"additionalParameters": [],
			"IsEnabled": 0
		}, {
			"ID": 14,
			"text": "HR",
			"type": "item",
			"itemSelect": false,
			"additionalParameters": [],
			"IsEnabled": 0
		}, {
			"ID": 16,
			"text": "Risk",
			"type": "item",
			"itemSelect": false,
			"additionalParameters": [],
			"IsEnabled": 0
		}, {
			"ID": 17,
			"text": "Legal",
			"type": "item",
			"itemSelect": false,
			"additionalParameters": [],
			"IsEnabled": 0
		}, {
			"ID": 21,
			"text": "Bod",
			"type": "item",
			"itemSelect": false,
			"additionalParameters": [],
			"IsEnabled": 0
		}],
		"IsEnabled": 0
	}]
}

数据库字段就不多说什么了，能够体现出级联关系即可。

C#代码

使用到的类

public class Organization
    {
       public int ID { get; set; }

        /// <summary>
        /// 名称 显示在树上文本
        /// </summary>
        public string text { get; set; }
        /// <summary>
        /// 类型 有子级元素的 type为folder 没有的为item  --更多的去官网上查找
        /// </summary>
        public string type { get; set; }
        
        public bool itemSelect { get; set; } = false;

        /// <summary>
        /// 存放子级元素
        /// </summary>
        public List<Organization> additionalParameters { get; set; } = new List<Organization>();

        /// <summary>
        /// 是否被禁用
        /// </summary>
        public int? IsEnabled { get; set; }
    }

递归方法

[HttpPost]
        public HttpResponseMessage GetOrganization()
        {
            DataResult result = new DataResult();
            try
            {
                ///部门列表
                List<Department> listd = ozb.GetDepa();
                if (listd.Count() > 0)
                {
                    List<Organization> list = Getorz(listd, int.Parse("0"));
                    result.data = list;
                    string re = JsonConvert.SerializeObject(result);
                }
            }
            catch (Exception e)
            {
                result = new DataResult(e.Message.ToString());
            }
            return new HttpResponseMessage()
            {
                Content = new StringContent(JsonConvert.SerializeObject(result), Encoding.UTF8, "application/json")
            };

        }


        public List<Organization> Getorz(List<Department> listd, int ID)
        {
            List<Organization> listorz = new List<Organization>();
            Organization orz = new Organization();
            List<Department> listdd = listd.Where(x => x.ParentID == ID).ToList();
            foreach (var item in listdd)
            {
                orz = new Organization();
                orz.ID = item.ID;
                orz.IsEnabled = item.IsEnabled;
                orz.text = item.Name;
                List<Organization> list = Getorz(listd, item.ID);
                List<Organization> listchildren = new List<Organization>();
                if (list.Count > 0)
                {
                    orz.type = "folder";
                    listchildren = Getorz(listd, item.ID);
                }
                else
                {
                    orz.type = "item";
                }
                if (listchildren != null)
                {
                    orz.additionalParameters = listchildren;
                }
                listorz.Add(orz);
            }

            return listorz;
        }

html代码

<ul id="tree2" class="tree tree-unselectable tree-folder-select" style="overflow-y: hidden;
                    overflow-x: hidden;" role="tree"></ul>

将tree2渲染

<script type="text/javascript">

        jQuery(function ($) {

            var sampleData = initiateDemoData();
            $('#tree2').ace_tree({
                dataSource: sampleData['dataSource'],
                loadingHTML: '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',
                'open-icon': 'ace-icon fa fa-folder-open',
                'close-icon': 'ace-icon fa fa-folder',
                'itemSelect': true,
                'folderSelect': true,
                'multiSelect': false,//是否多选
                'selectable': true,//是否可以选择
                'selected-icon': null,
                'unselected-icon': null,
                'folder-open-icon': 'ace-icon tree-plus',
                'folder-close-icon': 'ace-icon tree-minus'
            }).on('selected.fu.tree', function (evt, data) {
                //获取被点击的节点信息
                console.log("selected items: ", data.target.ID);
            });
            
            function initiateDemoData() {
                var re = AjaxHelp('/api/System/GetOrganization', 'post', null);
                var dataSource = function (options, callback) {
                    var $data = null
                    if (!("text" in options) && !("type" in options)) {
                        $data = re.data;
                        callback({ data: $data });
                        return;
                    }
                    else if ("type" in options && options.type == "folder") {
                        if ("additionalParameters" in options)
                            $data = options.additionalParameters || {};
                        else $data = {}
                    }

                    if ($data != null)
                        setTimeout(function () { callback({ data: $data }); }, parseInt(Math.random() * 500) + 200);
                }
                return { 'dataSource': dataSource }
            }
        });

    </script>

treeview除了selected事件，还有unselected、opened、closed事件，有需要的可以自行加载