asp.net MVC中使用EasyUI Treegrid 树形网格

前台代码:

<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>

后台代码:

  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; }
    }

猜你喜欢

转载自www.cnblogs.com/fengyeqingxiang/p/11018642.html
今日推荐