0
我使用帶有幾個手風琴的面板。使用類型的jstree中的圖標不會在創建內重繪
每次打開手風琴時都會創建一個帶有內容的樹。
這效果很好。
但是，當在手風琴窗格中顯示樹時，jstree使用的是themeicon，而不是在data-jstree中定義的圖標。
在文件夾的第一次展開中，圖標被重新繪製並顯示正確的圖標。創建後無法使用簡單的refresh()或redraw()。
問題在哪裏？
如何強制使用類型圖標？
這是代碼的一部分：
<!--added as html code in the content pane of the accordion-->
<div class="tree" id="panel_tree_div">
<ul>
<li data-jstree='{ "type" : "book", "opened" : false, "icon" : "" }' key="a=_03&i=1" >Programmieren
<ul>
<li data-jstree='{ "type" : "book", "opened" : false, "icon" : "" }' key="a=_03&" >Javascript
<ul>
<li data-jstree='{ "type" : "book", "opened" : false, "icon" : "" }' key="a=_03&" >JQuery
<ul>
<li data-jstree='{ "type" : "file"}' key="a=_03&i=10" >UI Layout JQuery Plugin</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li data-jstree='{ "type" : "file"}' key="a=_03&i=2" >TnT's</li>
</ul>
</div>
這是手風琴的單擊事件的代碼：
$("h3","#accordion1").click(function(evt, ui) {
intAccIndex = $("#accordion1").accordion("option", "active");
if (intPreviousActiveIndex == intAccIndex) {
// We can stop here. We do not want to load the same thing twice
return ;
}
// Get the panel content from the server
strAnswer= send_request("c=2&panIdx="+(intAccIndex));
// destroy a former tree or other elements, if exists (in the former active panel)
if (intPreviousActiveIndex != -1 && intPreviousActiveIndex != intAccIndex) {
objPrevContent = $("#accordion1").find("#accordion1_content_" + intPreviousActiveIndex);
objPrevContent.empty();
}
// Save the current index
intPreviousActiveIndex= intAccIndex;
// Get the content element of the current selected panel
objContent = $("#accordion1").find("#accordion1_content_" + intAccIndex);
// Make sure the content area is empty
objContent.empty();
// Deploy the new panel content
objContent.append(strAnswer);
if (! $('#panel_tree_div')) {
// It seems the current content has no tree element
// We can stop here
return;
}
// Now the html elements are in place
// We can add the js object(s) of the tree
// create the tree using the new applied tree sceleton in the accordion pane
$.jstree.create($('#panel_tree_div'), {
"core": {
"multiple" : false,
"expand_selected_onload" : true
},
"themes": {
"name" : 'tools',
"variant" : 'small',
"stripes" : true,
"dots" : false
},
"types" : {
'lockedFolder' : {
'icon': '<c:url value="/css/jstree_themes/default/lockedFolder.png" />'
},
"default": {
},
"custom": {
},
"folder" : {
"icon" : "file-folder"
},
"book" : {
"icon" : "file-book"
},
"file" : {
"icon" : " file-small"
},
"doc" : {
"icon" : "file"
}
},
"plugins" : [ "state", "types"]
//, "plugins" : [ "checkbox", "contextmenu", "dnd", "search", "state", "types", "wholerow"]
});
$('#panel_tree_div').jstree().on('changed.jstree', function(e, data) {
strCall=(data.node['li_attr']['key'] != 'undefined')? data.node['li_attr']['key'] : "";
if (strCall !="") {
// set title
oContentTitle= $("#content_title");
oContentTitle.empty();
intAccIndex = $("#accordion1").accordion("option", "active");
strCaption= $("#accordion1 h3").eq(intAccIndex).text();
// call page
strAnswer = send_request(strCall);
oContentTitle.append(strCaption);
oIFrame=$("#content");
oIFrameDoc= oIFrame[0].contentDocument || oIFrame[0].contentWindow.document;
oIFrameDoc.write(strAnswer);
oIFrameDoc.close();
}
});
// because the settings in themes does not work!
$('#panel_tree_div').jstree('set_theme','tools');
$('#panel_tree_div').jstree('set_theme_variant','small');
$('#panel_tree_div').jstree('show_icons');
$('#panel_tree_div').jstree('show_dots');
$('#panel_tree_div').jstree('show_stripes'); //? no stripes
$('#panel_tree_div').jstree('redraw',true); // no effect!
//$("#accordion1").accordion("refresh");
objAcc.accordion({ active: intAccIndex});
}); // end of accordion click function
圖片：
圖片：點擊/展開第一個文件夾後：
我認爲，如果你問一個更緊湊的問題，減少了問題的本質問題，你會得到更多的幫助。畢竟這裏所有的人都喜歡幫忙，但理想上他們不想花一個小時來閱讀這個問題;） – karim