在Net MVC中应用JsTree

先实现个基本用法

1 - 引入js和css

2 -  html

            <div id="list_left" class="col-md-2 pre-scrollable">
                <div class="list_wrap">
                    <p class="lead">数据列表</p>
                    <div id="jstree">
                    </div>
                </div>
            </div>

3 - js

    //初始化jstree控件
    function init_jstree() {
        $("#jstree").jstree({
            "core": {
                'data': {
                    'url': '/Home/GetTreeData',
                    'dataType': 'json',
                    success: function () {
                        //alert('ok');
                    }
                },
                'themes': {
                    'name': 'proton',
                    'responsive': true,
                    "dots": true,
                    "icons": true
                }

            }
        });
    };

View Code

4 - cs

        public JsonResult GetTreeData()
        {
            IBaseBll<TableInfo> tableBll = new BaseBll<TableInfo>();
            var treeNodes = tableBll.QueryAll().Select(m => new
            {
                id = m.Id,
                parent = m.ParentId.ToString() == "0" ? "#" : m.ParentId.ToString(),
                text = m.NameCh,
                icon = m.TreeIcon
            });
            return Json(treeNodes, JsonRequestBehavior.AllowGet);
        }

View Code

5 - 说明

• js中themes是选择的皮肤
• 后台代码中的treeNodes 是封装符合jstree中的,还有其他属性 详见http://www.cnblogs.com/wuhuacong/p/4759564.html
• 表设计 详见 http://www.cnblogs.com/jeffwongishandsome/archive/2010/10/26/1861633.html 评论里有更加方案

---

jstree的两个基本事件

1 - changed.jstree

    $('#jstree').on("changed.jstree", function (e, data) {
        //data.node是点击的节点信息,点击节点之后的逻辑都在这里处理
        init_TableInfo(data.node.id);
        var param = { TableId: data.node.id }
        table.settings()[0].ajax.data = param;
        table.ajax.reload();
        $(".introWrap").css("display", "none");
    });

View Code

2 - ready.jstree

    $("#jstree").on("ready.jstree", function (event, data) {
        data.instance.open_node(1); // 展开root节点
        //// 隐藏根节点 http://stackoverflow.com/questions/10429876/how-to-hide-root-node-from-jstree
        $("#1_anchor").css("visibility", "hidden");
        $("li#1").css("position", "relative");
        $("li#1").css("top", "-20px");
        $("li#1").css("left", "-20px");
        $(".jstree-last .jstree-icon").first().hide();
    });

View Code

3 - 说明

• changed中可以获取到所点击节点的所有信息,可以做逻辑判断
• ready是所有节点加载完成后触发的,在这里我隐藏了根目录
• jstree官网 https://www.jstree.com/
• 借鉴 https://www.cnblogs.com/ibgo/p/4025036.html

转载于:https://www.cnblogs.com/tanfuchao/p/10547665.html