1. 程式人生 > >easyui combotree 模糊搜尋

easyui combotree 模糊搜尋

只需把此js引入到專案中即可

(function ($) {
    //combotree可編輯,自定義模糊查詢  
    $.fn.combotree.defaults.editable = true;
    $.extend($.fn.combotree.defaults.keyHandler, {
        query: function (q) {
            var t = $(this).combotree('tree');
            t.tree("search", q);
        }
    });
    $.extend($.fn.tree.methods, {           /**   
         * 擴充套件easyui tree的搜尋方法 
         * @param tree easyui tree的根DOM節點(UL節點)的jQuery物件          * @param searchText 檢索的文字 
         * @param this-context easyui tree的tree物件          */
        search: function (jqTree, searchText) {
            //easyui tree的tree物件。可以通過tree.methodName(jqTree)方式呼叫easyui tree的方法 
            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();
                }
                //展開已選擇的節點(如果之前選擇了)            
                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]);
                }
            }
        },
        /**   
        * 展示節點的子節點(子節點有可能在搜尋的過程中被隱藏了)        
        * @param node easyui tree節點         
        */
        showChildren: function (jqTree, node) {
            //easyui tree的tree物件。可以通過tree.methodName(jqTree)方式呼叫easyui tree的方法 
            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();
                        }
                    }
                }
            }
        },
        /**   
        * 將滾動條滾動到指定的節點位置,使該節點可見(如果有滾動條才滾動,沒有滾動條就不滾動) 
        * @param param {   
        * treeContainer: easyui tree的容器(即存在滾動條的樹容器)。如果為null,則取easyui tree的根UL節點的父節點。 
        * argetNode:  將要滾動到的easyui tree節點。如果targetNode為空,則預設滾動到當前已選中的節點,如果沒有選中的節點,則不滾動          * }             */
        scrollTo: function (jqTree, param) {
            //easyui tree的tree物件。可以通過tree.methodName(jqTree)方式呼叫easyui tree的方法 
            var tree = this;
            //如果node為空,則獲取當前選中的node   
            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);
        }
    }
    /**   
     * 判斷searchText是否與targetText匹配 
     * @param searchText 檢索的文字      * @param targetText 目標文字 
     * @return true-檢索的文字與目標文字匹配;否則為false.        
    */
    function isMatch(searchText, targetText) {
        return $.trim(targetText) != "" && targetText.indexOf(searchText) != -1;
    }
    /**   
     * 獲取easyui tree的所有node節點      */
    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;
    }
    /**   
     * 定義獲取easyui tree的子節點的遞迴演算法      */
    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);

相關推薦

easyui combotree 模糊搜尋

只需把此js引入到專案中即可 (function ($) {     //combotree可編輯,自定義模糊查詢       $.fn.combotree.defaults.editable = true;     $.extend($.fn.combotree.def

easyui combotree模糊查詢 , combobox模糊查詢

/** * combobox和combotree模糊查詢 */ (function(){ //combobox可編輯,自定義模糊查詢 $.fn.combobox.defaults.editable = true; $.fn.combobox.defau

EasyUI--combotree模糊查詢

<head> <meta charset="utf-8" /> <title>EASY_UI搜尋框</title> </head> <script src="jquery-easyui-1.5.

easyUI combobox 文字框模糊搜尋問題

優點:ajax 非同步獲取資料,動態繫結,支援半模糊查詢(順序查詢) 缺點:不支援純模糊查詢 上圖:           html 頁面程式碼 <input class="easyui-

Jquery EasyUI Combotree 初始化賦值

multiple pat spa align tip 點擊 ces === ucc Jquery EasyUI Combotree 初始化賦值 ================================ ?Copyright 蕃薯耀 2018年5月7日 https

easyui combobox模糊搜索

require clas 分享圖片 options con sig nbsp AR tex combobox實現模糊搜索功能 <input class="easyui-combobox" id="hybq_PADD" name="hybq_PADD"

Jquery外掛(下拉框帶本地模糊搜尋值的外掛)jquery.searchableSelect.js

jquery.searchableSelect.css需要引入的js和Css   <script src="/js/plugins/searchableSelect/jquery.searchableSelect.js"></script> <link h

combobox和combotree模糊查詢

直接將對應的程式碼貼上上就可以了。不需要修改其他內容     //combobox可編輯,自定義模糊查詢       $.fn.combobox.defaults.editable = true;      

easyui combobox自動搜尋提示功能

                         

vue 實現模糊搜尋功能,vue-element ui改編input模糊查詢

 vue實現模糊搜尋功能 根據輸入的內容進行查詢資料,然後展示含有輸入內容的資料 <input v-model="issue_content" v-on:input ="inputFunc" type="text" placeholder="如何修改密碼"> <di

Mr.J--Javascript表格建立 模糊搜尋 關鍵詞搜尋

本文章主要是瞭解js製作表格,不過現在前端一般都是用div+CSS佈局,所以有興趣的可以瞭解一下這種思想。在我們現實生活中表格是非常普遍的,也是非常好用的,現在我們有Excel,Word,WPS也可以來製作表格。(為什麼說table表格佈局不好?) 製作表格: <!DOCTYPE

vue 多條件和模糊搜尋

html <div class="content"> <div class="right"> <select name="sex" width='100' v-model="formData.sex">

springboot+mybatis 模糊搜尋

首先看是單表查詢還是多表查詢 1.單表查詢         使用mybatisGeneratorConfig.xml逆向生成實體類和mapper,在 Service中使用Example進行模糊搜尋 /** * 根據地理位置和分類篩選banner

PostgreSQL給模糊搜尋加索引

PostgrSQL有個模組叫pg_trgm,可以對字串來進行比較相似度,並通過加GIST或者GIN索引來達到提速的效果。在一般的RDBMS中這種需求都會進行全表掃描的,但是PG如果加了這個模組,在一定場景下就可以使用索引來提速了。 一、背景 我們有一個需求根據人員的拼音碼(或者藥品的拼音碼)進行

jstree-左選擇_點箭頭再輸出_且只輸出末級店_模糊搜尋

  <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>左選擇_點箭頭再輸出_且只輸出末級店_模糊搜尋</title> &

處理jqueryeasy ui combobox中文模糊搜尋及資料多處理

##小計一下,備查: combobox預設初始化,資料多時就會出現卡頓的現象(1800多條的下拉確實有點多)。搜尋中文不及時,下拉麵板始終有延遲。 三種解決思路: 1、網上有一種思路:就是修改easyui 原檔案combobox部分(這個與版本還有關係  反正我是pass)ht

destoon-自定義欄位新增到供應列表模糊搜尋

/module/sell/sell.class.php $keyword = $item['title'].','.$TYPE[$item['typeid']].','.strip_tags(cat_pos(get_cat($item['catid']), ','));

vue+ElementUI+高德API地址模糊搜尋(自定義UI元件)

開發環境描述: Vue.js ElementUI 高德地圖API   需求描述: 在新增地址資訊的時候,我們需要根據input輸入的關鍵字呼叫地圖的輸入提示API,獲取到返回的資料,並根據這些資料生成下拉列表,選擇某一個即獲取當前的地址相關資訊(包括位置名稱、經緯度、街區、城市、id等資

EasyUI combotree單選的使用

$('#waterMeter_waterMeterInfo_tool_roomNo').combotree({ url: '../../json/roomNo.json', multiple : true,//設定可以多選,顯示多

element UI 製作模糊搜尋

如圖所示,當你輸入某個關鍵字時,去掉用某個介面,然後通過關鍵字獲取資料。 View Code <el-autocomplete class="inline-input" v-model="form.tName"