不同的树视图图标和启用/禁用jstree中的复选框

时间:2015-05-26 08:28:10

标签: javascript jquery jstree

我需要更改树视图图标并启用/禁用复选框
请查看以下代码:

function LoadJSTree() {
        $.noConflict();

        $(function () {
            $('#demoTree').jstree({
                'checkbox': {
                    'keep_selected_style': false,
                    'two_state': true
                },
                "types": {
                    "#": {
                        "max_children": 1,
                        "max_depth": 4,
                        "valid_children": ["root"]
                    },
                    "root": {
                        "icon": "/static/3.1.1/assets/images/tree_icon.png",
                        "valid_children": ["default"],
                        "check_node": false,
                    },
                    "default": {
                        "valid_children": ["default", "file"],
                        "check_node": true,
                        "uncheck_node": true
                    },
                    "disabled":{
                        "check_node": false,
                        "uncheck_node": false

                    },

                    "file": {
                        "icon": "glyphicon glyphicon-file",
                        "valid_children": [],
                        "check_node": true,
                        "uncheck_node": true

                    }
                },

                "plugins": ["types"],
                'core': {
                    'data': [
                        {
                            "text": "Root node", "type": "root", "parent":"#", "children": [
                                  { "text": "Child node 1", "type": "default" },
                                  { "text": "Child node 2", "type": "default" },
                                  { "text": "Child node 3", "type": "default" },
                                  { "text": "Child node 4", "type": "default" },
                                  { "text": "Child node 5", "type": "default" },
                                  { "text": "Child node 6", "type": "default" },
                                  { "text": "Child node 7", "type": "default" },
                                  { "text": "Child node 8", "type": "default" }
                            ]
                        }
                    ],

                },
                'plugins': ["checkbox"]
            });

它似乎不起作用。

每个节点使用相同的文件夹图标显示树,并且每个节点始终显示复选框,是否应该禁用“root”节点? 你能告诉我什么是错的吗?

1 个答案:

答案 0 :(得分:1)

您已在配置中列出plugins两次:

"plugins": ["types"],
...
'plugins': ["checkbox"]

将其更改为单个条目:

"plugins": ["checkbox", "types"]

但请记住,没有选项(在第3版中,如果这是您正在使用的版本),以防止基于节点类型的操作。但是使用最新的jsTree提交,您可以使用节点的state属性禁用每个节点的复选框(您也可以禁用整个节点) - 如果这是您需要查看的内容:
jsTree disable some of the checkboxes