如何在服务器端为MVC制作JStree

时间:2015-04-16 15:02:02

标签: ajax asp.net-mvc-4 server-side jstree

当我点击节点时,我想打开JStree节点,这意味着当我点击节点时,我接受节点的ID并发送到服务器(我的MVC方法),我想带走所有孩子这个节点,我的方法是这样做但我无法在其父节点下显示结果。 这是我的代码的一部分:

public JsonResult GetTreeRootPozs()
        {

            return Json(_pozService.GetTree(), JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetTreePozsAndMalzeme(int id)
        {

            var list = _pozService.GetPozsByParentId(id).Select(item => new Tree()
            {
                children = new List<Tree>(),
                icon = "fa fa-folder icon-lg icon-state-success",
                text = item.PozNo + " " + item.PozAdi,
                id = "poz_" + item.PozId.ToString(CultureInfo.InvariantCulture),
                state = new State() { disabled = false, opened = false, selected = false }
            }).ToList();
            list.AddRange(_malzemeService.GetMalzemesByPozId(id).Select(item => new Tree()
            {
                icon = "fa fa-folder icon-lg icon-state-success",
                text = item.MalzemeAdi,
                id = "mlzm_" + item.MalzemeId.ToString(CultureInfo.InvariantCulture),
                state = new State() { disabled = false, opened = false, selected = false }
            }));
            return Json(list, JsonRequestBehavior.AllowGet);
        }
    }

和客户方:

  $('#tree_poz').jstree({
        "core": {
            "animation": 0,
            "check_callback": true,
            "themes": { "stripes": true },
            'data': {
                'url': function (node) {
                    return node.id === '#' ?
                      '/Malzeme/GetTreeRootPozs' : '/Malzeme/GetTreePozsAndMalzeme';
                },
                'data': function (node) {
                    return { 'id': node.id };
                }
            }
        },
        "types": {
            "#": {
                "max_children": 1,
                "max_depth": 4,
                "valid_children": ["root"]
            },
            "root": {
                "icon": "/static/3.1.0/assets/images/tree_icon.png",
                "valid_children": ["default"]
            },
            "default": {
                "valid_children": ["default", "file"]
            },
            "file": {
                "icon": "glyphicon glyphicon-file",
                "valid_children": []
            }
        },
        "plugins": [
          "contextmenu", "dnd", "search",
          "state", "types", "wholerow"
        ]
    });

我在等你的帮助,谢谢。

1 个答案:

答案 0 :(得分:0)

我使用ajax调用并读取结果。如果结果是sucessfful,则重建树。

$.ajax({
    type: 'GET',
    url:'/Malzeme/GetTreePozsAndMalzeme',
    data: { 'id':node.id},
    async: true,                     
    success: function (result) {
        $("#treeViewDiv").jstree('destroy');
        createTree(result);
    },
    error: function (e) {

    }
})