在開發過程中有乙個場景，樹是乙個專案迭代樹，每乙個節點都是乙個專案，樹上面也可以建立資料夾節點將同一型別或者同乙個專案的迭代版本放置到一起集中管理，這時候在頁面新增了乙個迭代版本，建立的時候邏輯並不是在樹上面走，但是建立完了之後希望能在樹上面體現出來，重新整理樹節點資料並且選中新建的這個節點，將新建迭代版本的內容呈現出來。
好了業務場景描述完了，這時候實現按理是很簡單的 $('#tree_1').jstree(true).select_node(data);這個方法按照給出的api是可以實現需求，但是實際應用的時候這個方法選中時可以，但是底色樣式並沒有變化，最後我是這樣解決的問題
//alert($("#"+data).attr("id"));
$('.jstree-wholerow-clicked').each(function())
//('.jstree-wholerow-clicked').removeclass('jstree-wholerow-clicked');
$("#"+data).children("div:first").addclass('jstree-wholerow-clicked');
//$('#tree_1').jstree(true).select_node(data);
當然了，可能會有更好的方式，然而select_node這個方法確實有很多問題，個人使用後覺得樣式不會隨著選擇同步，需要自己改
下面貼一些**大體都是寫樹的操作
var kanbanid ;
var onloadtrue = false;
var colnamediv = ''+'
';var uitree = function ()
);*/
var handlesample = function (treedata) ,
// so that create works
"check_callback" : true,
'data' : treedata
},"types":false,
/* "types" : ,
"file" :
},*/
"themes" : ,
"plugins" : [
"contextmenu", "dnd", "search",
"state", "types", "wholerow"
],"types": ,
"2":
},"contextmenu":, "last", function (my_node) ,500);
});}else
//alert(ss)
/*var inst = jquery.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
dialog.show();*/}},
"刪除資料夾":else
else
}}else
/* var inst = jquery.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
if(confirm("確定要刪除此選單？刪除後不可恢復。"))else
});}*/}},
"編輯資料夾":else
/* var inst = jquery.jstree.reference(data.reference),
obj = inst.get_node(data.reference);editmynode
dialog.show();*/}}
}}/* "contextmenu":
},"刪除選單":
},"修改選單":
},"上移選單":
},"下移選單":
},"新建子選單": }}
} */
}).bind("load_node.jstree", function (event,data) ).bind("create_node.jstree",function(event,data)).bind("rename_node.jstree",function(event,data)).bind("delete_node.jstree",function(event,data)).bind('move_node.jstree', function(event,data)else if(data.parent>3&&data.parent<1530843355688)else if(data.node.id >=1530843355688&&data.parent>3)else if(data.parent=="#")else;
//alert(parentid)
// alert(json.stringify(params) )
$.ajax().fail(function()).done(function(json)
})}else;
//alert(parentid)
// alert(json.stringify(params) )
$.ajax().fail(function()).done(function(json)})}
}/*var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
if(obj.parent=="#"), "last", function (my_node) ,500);
});}else*/
//alert(json.stringify(event));
//alert(data.old_parent);
//return false;
});$(document).bind("dnd_start.vakata", function(e, data) )
}return else if(type == 2)
}});}};
}();
function createcategory(event,data);
$.ajax().done(function(json),5000);*/
//$jstree = $.jstree._focused();
//$('#tree_1').refresh("#" + parentid);
//$('#tree_1').data('jstree', false).empty();
// $('#tree_1').jstree(true).refresh();
}else
}).fail(function(e))}}
function rename(event,data) ;
//alert(parentid)
// alert(json.stringify(params) )
$.ajax().fail(function()).done(function(json)
})}else
}function remove(event,data)
//var id = str.substring(1);
var params = ;
$.ajax().done(function(json)
}).fail(function(json))
}function freshtree()else if(type == 2)
}});
}//樹搜尋
function selecttreeproject(obj) ,
success : function(data) else
}obj.next().children("ul:last").html(htmlresp);
}});
obj.next().attr('style', 'display: block;margin-top: 34px;width:146.33px');
} else
}//選中後觸發的事件,把內容寫到是input中
function selectedtreerelatedproject(obj, id) ,
success : function(data) else,icon:"glyphicon glyphicon-tree-conifer myicon",parent:data.parentnodeid,text:data.versionnumber}, "last", false, true);
//createnode($('#tree_1').jstree("get_node", data.parentnodeid), data.id, data.versionnumber, "first");
tree.deselect_all();
tree.select_node(data.id);
}
}});
}
使用jsTree按需裝載子節點
一 jstree的基本使用方法 二 按需裝載子節點，即每次展開某節點時，才去伺服器裝載其子節點。jstree是基於jquery的乙個樹形外掛程式，該專案主頁 一 jstree的基本使用方法 1.在頁面匯入必要的庫檔案 2.在頁面需要顯示樹的地方 3.生成樹的js方法 mytree tree 其中ty...
DOM節點及高階操作
1 attributes得到dom屬性節點 包含所有的預設屬性 自定義屬性的屬性名和屬性值 2 getattribute 得到某個屬性值，括號裡為屬性名，可得到所有屬性 預設屬性和自定義屬性 console.log obox.getattribute id console.log obox.geta...
JS 操作節點的使用
名稱 描述document.createelement 元素名 建立元素節點 document.createtextnode 文字 建立文字節點 把b節點追加至a節點的末尾 insertbefore a,b 把a節點插入到b節點之前 clonenode deep 複製某個指定的節點 父節點.remo...