我是jsTree的新手。由于我需要表示节点类型以及节点名称,因此我已移至jsTreeGrid。我需要创建节点,重命名,删除,编辑树节点以及编辑jsTreeGrid第二列中的节点类型。不知何故,我可以编辑第二列(即,类型列),但jsTree只显示contextmenu但不调用它们的相应函数。对此的帮助非常有用。这是我的代码:
<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>