easyui-tree代码js封装，带搜索查询

来源：互联网发布：钻井液计算软件编辑：程序博客网时间：2024/06/05 18:23

(function($) {     $.extend($.fn.tree.methods, {        search: function(jqTree, searchText) {            var tree = this;            var nodeList = getAllNodes(jqTree, tree);            searchText = $.trim(searchText);            if (searchText == "") {                for (var i=0; i<nodeList.length; i++) {                    $(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");                    $(nodeList[i].target).show();                }                tree.collapseAll(jqTree);                var selectedNode = tree.getSelected(jqTree);                if (selectedNode) {                    tree.expandTo(jqTree, selectedNode.target);                }                return;            }            var matchedNodeList = [];            if (nodeList && nodeList.length>0) {                var node = null;                for (var i=0; i<nodeList.length; i++) {                    node = nodeList[i];                    if (isMatch(searchText, node.text)) {                        matchedNodeList.push(node);                    }                }                for (var i=0; i<nodeList.length; i++) {                    $(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");                    $(nodeList[i].target).hide();                }                           tree.collapseAll(jqTree);                       for (var i=0; i<matchedNodeList.length; i++) {                    showMatchedNode(jqTree, tree, matchedNodeList[i]);                }            }            },        showChildren: function(jqTree, node) {            var tree = this;            if (!tree.isLeaf(jqTree, node.target)) {                var children = tree.getChildren(jqTree, node.target);                if (children && children.length>0) {                    for (var i=0; i<children.length; i++) {                        if ($(children[i].target).is(":hidden")) {                            $(children[i].target).show();                        }                    }                }            }           },        scrollTo: function(jqTree, param) {            var tree = this;            var targetNode = param && param.targetNode ? param.targetNode : tree.getSelected(jqTree);            if (targetNode != null) {                               var root = tree.getRoot(jqTree);                var $targetNode = $(targetNode.target);                var container = param && param.treeContainer ? param.treeContainer : jqTree.parent();                var containerH = container.height();                var nodeOffsetHeight = $targetNode.offset().top - container.offset().top;                if (nodeOffsetHeight > (containerH - 30)) {                    var scrollHeight = container.scrollTop() + nodeOffsetHeight - containerH + 30;                    container.scrollTop(scrollHeight);                }                                       }        }    });    function showMatchedNode(jqTree, tree, node) {        $(node.target).show();        $(".tree-title", node.target).addClass("tree-node-targeted");        var pNode = node;        while ((pNode = tree.getParent(jqTree, pNode.target))) {            $(pNode.target).show();                    }        tree.expandTo(jqTree, node.target);         if (!tree.isLeaf(jqTree, node.target)) {            tree.collapse(jqTree, node.target);        }    }        function isMatch(searchText, targetText) {        return $.trim(targetText)!="" && targetText.indexOf(searchText)!=-1;    }    function getAllNodes(jqTree, tree) {        var allNodeList = jqTree.data("allNodeList");        if (!allNodeList) {            var roots = tree.getRoots(jqTree);            allNodeList = getChildNodeList(jqTree, tree, roots);            jqTree.data("allNodeList", allNodeList);        }        return allNodeList;    }    function getChildNodeList(jqTree, tree, nodes) {        var childNodeList = [];        if (nodes && nodes.length>0) {                          var node = null;            for (var i=0; i<nodes.length; i++) {                node = nodes[i];                childNodeList.push(node);                if (!tree.isLeaf(jqTree, node.target)) {                    var children = tree.getChildren(jqTree, node.target);                    childNodeList = childNodeList.concat(getChildNodeList(jqTree, tree, children));                }            }        }        return childNodeList;    }})(jQuery);

<div data-options="region:'west',border:false" style="border-right: 1px solid #eee;width:300px;border-top: 1px solid #eee;">            <div id="p"  style="height:60%;padding:10px 0px 5px 0;">            <div style="margin-bottom:5px;border-bottom:1px solid #eee;height:33px;padding-left:5px;padding-top:1px;padding-right:10px;">                <a href="javascript:void(0);" plain="true" class="easyui-linkbutton" iconCls="icon-standard-arrow-refresh" onclick="refreshTreeAAA()"  style="margin-top:-1px;float:right;">刷新</a>                <a href="javascript:void(0);" plain="true" class="easyui-linkbutton" iconCls="icon-hamburg-zoom" onclick="searchAAA()" style="margin-top:-1px;float:right;">查询</a>                <input id="org_name" name="org_name" class="easyui-textbox"  data-options="prompt:'输入机构查询'"  style="width:55%;"/>            </div>             <ul class="easyui-tree" id="treeList"                data-options="                    url:'<%=path %>/org/getTreeList?state='+'0',                    animate:true,                    lines:true,                    onClick:function(node){                      nodeClick(node.id,node.text,node.org_type_id);                    }">            </ul>             </div>        </div>

function searchAAA(){    $("#treeList").tree("search", $("#org_name").val());   }function refreshTreeAAA(){    $('#org_name').textbox('setValue','');    $("#treeList").tree("search", "");}

阅读全文

0 0