0
여러 아코디언이있는 패널을 사용합니다.유형을 사용하는 jstree의 아이콘이 생성시 다시 그려지지 않습니다
아코디언이 열릴 때마다 콘텐츠가있는 트리가 만들어집니다.
잘 작동합니다.
그러나 아코디언 창에 트리가 표시되면 jstree는 data-jstree에 정의 된 아이콘 대신 themeicon을 사용합니다.
폴더의 첫 번째 확장 내에서 아이콘은 다시 그려지고 올바른 아이콘을 표시합니다. 간단한 refresh() 또는 redraw()을 만든 후에 작동하지 않습니다.
어디에 문제가 있습니까?
강제로 유형 아이콘을 사용할 수 있습니까?
$("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
사진 :이 아코디언의 클릭 이벤트의 코드가
<!--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>
입니다 :
이
코드의 일부이다
사진 : 첫 번째 폴더를 클릭하거나 펼친 후 :
나는 생각한다, 당신이 더 많은 도움을받을 것이다 :
이
수정 된 코드입니다. 여기있는 모든 사람들이 돕고 싶지만 이상적으로는 질문을 읽는 데 1 시간을 보내고 싶지 않은 경우) – karim