0

有一次我有这个工作,然后当我更新代码以添加其他功能时,搜索功能不知何故坏了。我试过到处寻找,但我没有想法。有任何想法吗?

这是我的代码:

<!-- jsTree -->
<script type="text/javascript" src="<?php echo $ROOTPATH; ?>assets/jstree/_lib/jquery.cookie.js"></script>
<script type="text/javascript" src="<?php echo $ROOTPATH; ?>assets/jstree/_lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="<?php echo $ROOTPATH; ?>assets/jstree/jquery.jstree.js"></script>

<div id="description">
    <div id="mmenu" style="height:30px; overflow:auto;">
        <input type="button" class="button_tasklist" id="add_folder" value="Add Unit" style="display:block; float:left;"/>
        <input type="button" class="button_tasklist" id="add_default" value="Add Task" style="display:block; float:left;"/>
        <!-- <input type="button" class="button_tasklist" id="rename" value="Rename" style="display:block; float:left;"/> -->
        <input type="button" class="button_tasklist" id="remove" value="Remove" style="display:block; float:left;"/>
        <input type="button" class="button_tasklist" id="cut" value="Cut" style="display:block; float:left;"/>
        <input type="button" class="button_tasklist" id="copy" value="Copy" style="display:block; float:left;"/>
        <input type="button" class="button_tasklist" id="paste" value="Paste" style="display:block; float:left;"/>
        <input type="button" class="button_tasklist" id="clear_search" value="Clear" style="display:block; float:right;"/>
        <input type="button" class="button_tasklist" id="search" value="Search" style="display:block; float:right;"/>
        <input type="text" id="search_text" value="" style="display:block; float:right;" />
    </div>
</div>

<!-- the tree container (notice NOT an UL node) -->
<div id="demo" class="demo" style="min-height: 400px; overflow-y:visible; overflow-x:scroll"></div>

    <!-- JavaScript neccessary for the tree -->
    <script type="text/javascript">
        $(function () {

        $("#demo")
            .bind("loaded.jstree", function (e, data) {
                    data.inst.open_all(-1); // -1 opens all nodes in the container
                })
            .jstree({ 

                // List of active plugins
                "plugins" : [ 
                    "themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu" 
                ],

                // I usually configure the plugin that handles the data first
                // This example uses JSON as it is most common
                "json_data" : { 
                    // This tree is ajax enabled - as this is most common, and maybe a bit more complex
                    // All the options are almost the same as jQuery's AJAX (read the docs)
                    "ajax" : {
                        // the URL to fetch the data
                        "url" : "server.php",
                        // the `data` function is executed in the instance's scope
                        // the parameter is the node being loaded 
                        // (may be -1, 0, or undefined when loading the root nodes)
                        "data" : function (n) { 
                            // the result is fed to the AJAX request `data` option
                            return { 
                                "operation" : "get_children", 
                                "id" : n.attr ? n.attr("id").replace("node_","") : 1 
                            }; 
                        }
                    }
                },
                // Configuring the search plugin
                "search" : {
                    "case_insensitive" : true,

                    // As this has been a common question - async search
                    // Same as above - the `ajax` config option is actually jQuery's AJAX object
                    "ajax" : {
                        "url" : "server.php",
                        // You get the search string as a parameter
                        "data" : function (str) {
                            return { 
                                "operation" : "search", 
                                "search_str" : str 
                            }; 
                        }
                    }
                },
                // Using types - most of the time this is an overkill
                // read the docs carefully to decide whether you need types
                "types" : {
                    // I set both options to -2, as I do not need depth and children count checking
                    // Those two checks may slow jstree a lot, so use only when needed
                    "max_depth" : 3,
                    "max_children" : -2,
                    // I want only `drive` nodes to be root nodes 
                    // This will prevent moving or creating any other type as a root node
                    "valid_children" : [ "drive" ],
                    "types" : {
                        // The default type
                        "default" : {
                            // I want this type to have no children (so only leaf nodes)
                            // In my case - those are files
                            "valid_children" : "none",
                            // If we specify an icon for the default type it WILL OVERRIDE the theme icons
                            "icon" : {
                                "image" : "file.png"
                            }
                        },
                        // The `folder` type
                        "folder" : {
                            // can have files and other folders inside of it, but NOT `drive` nodes
                            "valid_children" : [ "default" ],
                            "icon" : {
                                "image" : "folder.png"
                            }
                        },
                        // The `drive` nodes 
                        "drive" : {
                            // can have files and folders inside, but NOT other `drive` nodes
                            "valid_children" : [ "folder" ],
                            "icon" : {
                                "image" : "root.png"
                            },
                            // those prevent the functions with the same name to be used on `drive` nodes
                            // internally the `before` event is used
                            "start_drag" : false,
                            "move_node" : false,
                            "delete_node" : false,
                            "remove" : false
                        }
                    }
                },
                // UI & core - the nodes to initially select and open will be overwritten by the cookie plugin

                // the UI plugin - it handles selecting/deselecting/hovering nodes
                "ui" : {
                    // this makes the node with ID node_2 selected onload
                    "initially_select" : [ "node_2" ]
                },
                // the core plugin - not many options here
                "core" : { 
                    // just open those two nodes up
                    // as this is an AJAX enabled tree, both will be downloaded from the server
                    //"initially_open" : [ "node_2" , "node_3" ],
                    "strings" : { "new_node" : "Type task/unit title..." } 
                }
            })
            .bind("create.jstree", function (e, data) {
                $.post(
                    "server.php", 
                    { 
                        "operation" : "create_node", 
                        "id" : data.rslt.parent.attr("id").replace("node_",""), 
                        "position" : data.rslt.position,
                        "title" : data.rslt.name,
                        "type" : data.rslt.obj.attr("rel")
                    }, 
                    function (r) {
                        if(r.status) {
                            $(data.rslt.obj).attr("id", "node_" + r.id);
                        }
                        else {
                            $.jstree.rollback(data.rlbk);
                        }
                    }
                );
            })
            .bind("search.jstree", function (e, data) {
                alert("Found " + data.rslt.nodes.length + " nodes matching '" + data.rslt.str + "'.");
            })
            .bind("remove.jstree", function (e, data) {
                data.rslt.obj.each(function () {
                    $.ajax({
                        async : false,
                        type: 'POST',
                        url: "server.php",
                        data : { 
                            "operation" : "remove_node", 
                            "id" : this.id.replace("node_","")
                        }, 
                        success : function (r) {
                            if(!r.status) {
                                data.inst.refresh();
                            }
                        }
                    });
                });
            })
            .bind("rename.jstree", function (e, data) {
                $.post(
                    "server.php", 
                    { 
                        "operation" : "rename_node", 
                        "id" : data.rslt.obj.attr("id").replace("node_",""),
                        "title" : data.rslt.new_name
                    }, 
                    function (r) {
                        if(!r.status) {
                            $.jstree.rollback(data.rlbk);
                        }
                    }
                );
            })
            .bind("move_node.jstree", function (e, data) {
                data.rslt.o.each(function (i) {
                    $.ajax({
                        async : false,
                        type: 'POST',
                        url: "server.php",
                        data : { 
                            "operation" : "move_node", 
                            "id" : $(this).attr("id").replace("node_",""), 
                            "ref" : data.rslt.cr === -1 ? 1 : data.rslt.np.attr("id").replace("node_",""), 
                            "position" : data.rslt.cp + i,
                            "title" : data.rslt.name,
                            "copy" : data.rslt.cy ? 1 : 0
                        },
                        success : function (r) {
                            if(!r.status) {
                                $.jstree.rollback(data.rlbk);
                            }
                            else {
                                $(data.rslt.oc).attr("id", "node_" + r.id);
                                if(data.rslt.cy && $(data.rslt.oc).children("UL").length) {
                                    data.inst.refresh(data.inst._get_parent(data.rslt.oc));
                                }
                            }
                            $("#analyze").click();
                        }
                    });
                });
            });
        });

        $("#demo").on("dblclick", "a", function(e) {
            // double-click to add additional info for each node
            var node = $(event.target).closest("li");
            var data = node.data("jstree");
            var idn = $(this).parent().attr("id").split("_")[1];
            // or
            //var id = node[0].id; //id of the selected node

            //alert("Dbl-clicked Node ID: "+idn); //return NodeID   

            showFancybox("edit_task.php?id="+idn);

            // or do something via ajax!
            //$.ajax({
            //  type: "POST",
            //    url: "http://www.google.com",
            //  data: "id="+$(this).parent().get(0).id,
            //  success: function(data){
            //      $("#ajaxcontent").html(data);
            //  }
            //});
        });

        $("#demo").bind("before.jstree", function (e, data) { 
          if(data.func === "remove" && !confirm("Are you sure you want to delete?")) { 
            e.stopImmediatePropagation(); 
            return false; 
          } 
        })
    </script>
    <script type="text/javascript">
        // Code for the menu buttons
        $(function () { 
            $("#mmenu input").click(function () {
                switch(this.id) {
                    case "add_default":
                    case "add_folder":
                        $("#demo").jstree("create", null, "last", { "attr" : { "rel" : this.id.toString().replace("add_", "") } });
                        break;
                    case "search":
                        $("#demo").jstree("search", document.getElementById("search_text").value);
                        break;
                    case "text": break;
                    default:
                        $("#demo").jstree(this.id);
                        break;
                }
            });
        });
    </script>
</div>

这是错误所在:

在此处输入图像描述

4

1 回答 1

0

我不太确定问题出在哪里,但它似乎已经自行解决,现在又可以正常工作了。我认为我在页面某处的其他代码与 jsTree 冲突?没有把握。

于 2012-08-26T03:02:51.903 回答