jsTree contextmenu 不能与 jsTreeGrid 一起使用答案

【问题标题】：jsTree contextmenu does not work along with jsTreeGridjsTree contextmenu 不能与 jsTreeGrid 一起使用
【发布时间】：2016-03-23 21:46:18
【问题描述】：

我是 jsTree 的新手。由于我还需要表示节点类型以及节点名称，因此我已移至 jsTreeGrid。我需要在 jsTreeGrid 的第二列中创建节点、重命名、删除、编辑树节点以及编辑节点类型。不知何故，我可以编辑第二列（即类型列），但 jsTree 只显示上下文菜单，但没有调用它们的相应函数。这方面的帮助将非常有用。这是我的代码：

<div id="container"></div>
<script type="text/javascript">
        $(document).ready(function(){
            var data;

            data = [{
                text: "Satellite City",
                data: {type: "<b>Project</b>", size: "30",spanclass:"root"},
                children: [
                    {text: "Phase-1", data: {type: "<i>Phase</i>", size: "50",spanclass:"first"}},
                    {text: "Phase-2", data: {type: "<i>Phase</i>", size: "50",spanclass:"second"}, children:[
                        {text:"Ruby Towers",data:{type: "<i>Tower</i>",size:"50",spanclass:"third"}}
                    ]}
                ]
            }];


            $("div#container").jstree({
                plugins: ["themes", "json", "grid", "dnd", "contextmenu", "search"],
                core: {
                    data: data
                },
                grid: {
                    columns: [
                        {width: 300, header: "WBS Tree",title:"_DATA_"},
                        {width: 100, 
                         cellClass: "col1", 
                         value: "type", 
                         header: "<i>Node Type</i>",                
                         valueClass:"spanclass"                                        
                        },
                    ],
                    resizable:true,
                    contextmenu:true
                },
                dnd: {
                    drop_finish : function () { 
                    }, 
                    drag_finish : function () { 
                    }, 
                    drag_check : function (data) { 
                        return { 
                            after : true, 
                            before : true, 
                            inside : true 
                        }; 
                    } 
                }
            });

            $("input#search").keyup(function (e) {
                var tree = $("div#container").jstree();
                tree.search($(this).val());
            });

        });
</script>

【问题讨论】：

标签： jstree

【解决方案1】：

我认为您的问题可能出在 jsTree 配置中。尝试将"check_callback": true 添加到其core。

或查看工作小提琴 - JS Fiddle。

【讨论】：

在 jsTree 配置中添加 "check_callback": true 允许我仅在树中创建新节点，但它们对应的网格元素列不可编辑（带有“编辑”选项的菜单可用）。当我尝试编辑第二列时，它会抛出错误：Uncaught TypeError: Cannot read property 'type' of null。避免此错误的建议可能会帮助我完成我的工作。我认为在创建树节点时，我们可能必须添加类型或默认提供某种类型，以便可以轻松编辑列。请建议如何做到这一点。
我可以在我的小提琴中编辑第二列绝对没问题。请再次检查相同的小提琴。我还添加了第三列。它也可以在那里工作。
嗨 Ermakov，我分析了你的 JS Fiddle。我可以看到您添加第三列并编辑数据中定义的节点的第二或第三列。您是否尝试过编辑新创建节点的第 2 列或第 3 列？我可以添加新节点，但不能编辑第 2 列或第 3 列中的值。我没有看到你在 Fiddle 中这样做。
那是因为我们还需要将带有列设置的data 对象传递给新创建的节点。 Type 它正在寻找的是您的列的值参数。请再次检查小提琴。现在它按您的计划工作 - https://jsfiddle.net/ermakovnikolay/2wLLL6hk/.
非常感谢埃尔马科夫！！！我将使用'create_node.jstree 事件处理函数并专注于我项目的其他方面。