使用类型的jstree中的图标不会在create

Question

我使用带有几个手风琴的面板。

每次打开手风琴时，都会创建一个包含内容的树。

这很有效。

但是当手风琴窗格中显示树时，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&amp;i=1" >Programmieren
            <ul>
                <li data-jstree='{ "type" : "book", "opened" : false, "icon" : "" }' key="a=_03&amp;" >Javascript
                    <ul>
                        <li data-jstree='{ "type" : "book", "opened" : false, "icon" : "" }' key="a=_03&amp;" >JQuery
                            <ul>
                                <li data-jstree='{ "type" : "file"}' key="a=_03&amp;i=10" >UI Layout JQuery Plugin</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li data-jstree='{ "type" : "file"}' key="a=_03&amp;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

图片：创建后：

图片：点击/展开第一个文件夹后：

Answer 1

我找到了解决方案。 $.jstree.create( $('#panel_tree_div'), { options }); 函数的工作方式与$('#panel_tree_div').jstree({ options});的工作方式不同，或者事件绑定不同。

经过此次修改后，无法使用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
        $('#panel_tree_div').jstree({
        //$.jstree.create( $('#panel_tree_div'), { // does not redraw
                "core": {
                    "multiple" : false,
                    "expand_selected_onload" : true,
                    "id" : 1
                },
                "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"  //'<c:url value="../libs/jquery/jstree_themes/tools/book.png" />'
                        },
                        "file" : {
                            "icon" : "file-small"
                        },                                                          
                        "doc" : {
                            "icon" : "file"
                        }                                                       
                },
                "plugins" : [ "state", "types"]
                //, "plugins" : [ "checkbox", "contextmenu", "dnd", "search",   "state", "types", "wholerow"]
        })
        .on('select_node.jstree', function (e, data) {
            //alert("hello");
            // do something
        })
        .on('changed.jstree', function(e, data) {
            if (isset(data.node)) {
                strCall=(isset(data.node['li_attr']['key']))? data.node['li_attr']['key'] : "";
            } else {
                strCall="";
            }
            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'); //?
        objAcc.accordion({ active: intAccIndex});                                           
    }); // end of accordion click function