前臺代碼:css
<link href="~/Content/plugins/jquery-easyui-1.7.0/themes/default/easyui.css" rel="stylesheet" /> <script src="~/Content/plugins/jQuery/jquery-2.2.3.min.js"></script> <script src="~/Content/plugins/jquery-easyui-1.7.0/jquery.easyui.min.js"></script> <table id="tt" style="width:600px;height:400px"></table> <script> $(document).ready(function () { $.ajax({ type: 'get', url: '/Design/GetTreeData', dataType: 'json', success: function (data) { console.log(JSON.stringify(data)); $('#tt').treegrid({ data: data, idField: 'id', treeField: 'topic', columns: [[ { title: 'topic', field: 'topic', width: 180 }, { field: 'id', title: 'id', width: 100, align: 'right' }, { field: '_parentId', title: '_parentId', width: 200 } ]] }); }, error: function (xmlReq, err, c) { } }); }); </script>
後臺代碼:html
public JsonResult GetTreeData() { List<tests> list = new List<tests>(); list.Add(new tests() { id = 1, _parentId = 0, topic = "t1" }); list.Add(new tests() { id = 2, _parentId = 1, topic = "t2" }); list.Add(new tests() { id = 3, _parentId = 2, topic = "t3" }); Dictionary<string, object> json = new Dictionary<string, object>(); var newList = list.Select(n => new { id = n.id, topic = n.topic, _parentId = n._parentId == 0 ? null : n._parentId });//跟節點parentid賦爲0,否則easyui加載出錯 json.Add("total", 3); json.Add("rows", newList); return new JsonResult { Data = json, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; } public class tests { public int id { get; set; } public int? _parentId { get; set; } public string topic { get; set; } }