jstree上手文档 [初始化时默认选中、全部展开、获取实例的数据等问题]

jstree官网:https://www.jstree.com/

-------------------

实例化tree .jstree() 

默认样式:

var container = $('#xxx');      //container:tree的目标容器(jqery对象)
container.jstree({              
    'plugins': ["state"],       
    'state': {                  //一些初始化状态
        "opened":true,
    },
    'core' : {
        'data' :_treeData,      //tree的数据
    }
});

多选框样式:

container.jstree({
    core: {
        animation: false,
        'data':_data
    },
    // 这两个必须要
    checkbox: {
        tie_selection: false,
        whole_node: false
    },
    plugins: ["checkbox", "wholerow"]
});

多选框初始化时默认选中:


_data.state =  {"checked":true}; 
//选中根节点,如需选中其他节点需遍历_data的所有节点并给他们加上此属性

右键菜单:

'plugins': ['contextmenu'],  //有这个就行
'core' : {
    'data' :_treeData,
    "check_callback" : true
},
//···
"contextmenu":{
    select_node:false,
    show_at_node:true,
    items:{
        "修改名称":{
            "separator_before"	: false,
            "separator_after"	: false,
            "_disabled"			: false,  //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
            "label"				: "修改名称",
            "shortcut_label"	: 'F2',
            "icon"				: "glyphicon glyphicon-leaf",
            "action"			: function (data) {
                var inst = $.jstree.reference(data.reference),
                    obj = inst.get_node(data.reference);
                inst.edit(obj);
            }
        },
        "删除XX":{
            "separator_before"	: false,
            "icon"				: false,
            "separator_after"	: false,
            "_disabled"			: false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
            "label"				: "删除XX",
            "icon"				:"glyphicon glyphicon-remove",
            "action"			: function (data) {
                var inst = $.jstree.reference(data.reference),
                obj = inst.get_node(data.reference);
                if(inst.is_selected(obj)) {
                    inst.delete_node(inst.get_selected());
                }
                else {
                    inst.delete_node(obj);
                }
            }
        },
        //其他菜单···
    }
}
//参考:https://blog.csdn.net/m0_37355951/article/details/77943933
//...

载入后,全部展开:

container.bind("loaded.jstree", function (e, data) {

    _treeContainer.jstree('open_all');

});

查看当前实例的数据

$("xxx").jstree()._model.data;

---------------------

额,好像这不是文档,全是案例了。。。 话说,这样好懂点|||

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

facing-screen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值