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