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;
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"