老生常談combobox和combotree模糊查詢
更新時(shí)間：2017年04月17日 08:04:43 投稿：jingxian
下面小編就為大家?guī)硪黄仙Ｕ刢ombobox和combotree模糊查詢。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
First
/**
* combobox和combotree模糊查詢
* combotree 結(jié)果顯示兩級父節(jié)點(diǎn)(手動(dòng)設(shè)置數(shù)量)
* 鍵盤上下鍵選擇葉子節(jié)點(diǎn)
* 鍵盤回車鍵設(shè)置文本的值
*/
(function(){
//combobox可編輯，自定義模糊查詢
$.fn.combobox.defaults.editable = true;
$.fn.combobox.defaults.filter = function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) >= 0;
};
//combotree可編輯，自定義模糊查詢
$.fn.combotree.defaults.editable = true;
//選中行索引
var leafBlockIndex=0;
//當(dāng)前選中行索引
var nowLeafBlockIndex=-1;
//combotree 組件
var comboTree=null;
//葉子節(jié)點(diǎn)DOM Array
var leafBlocks=null;;
//將所有的結(jié)果葉子節(jié)點(diǎn)放入 DOM Array中
function getDOMArray(data){
comboTree = $(data).combotree('tree');
leafBlocks=new Array();
var leafs = comboTree.tree('getChildren');
for (var i = 0; i < leafs.length; i++) {
var leaf = leafs[i];
var dis =$(leaf.target).css('display')+'';
if('block' == dis){
if(comboTree.tree('isLeaf',leaf.target)){
leafBlocks.push(leaf.target);
}
}
};
};
//-------------------------------------
$.extend($.fn.combotree.defaults.keyHandler,{
up:function(e){
leafBlockIndex=nowLeafBlockIndex;
leafBlockIndex--;
getDOMArray(this);
if(leafBlockIndex <0){
leafBlockIndex=leafBlocks.length-1;
}
comboTree.tree('select',leafBlocks[leafBlockIndex]);
// easyui 1.3.4版開始可用
// comboTree.tree('scrollTo',leafBlocks[leafBlockIndex]);
nowLeafBlockIndex=leafBlockIndex;
},
down:function(e){
leafBlockIndex=nowLeafBlockIndex;
leafBlockIndex++;
getDOMArray(this);
if(leafBlockIndex >= leafBlocks.length){
leafBlockIndex=0;
}
comboTree.tree('select',leafBlocks[leafBlockIndex]);
// easyui 1.3.4版開始可用
// comboTree.tree('scrollTo',leafBlocks[leafBlockIndex]);
nowLeafBlockIndex=leafBlockIndex;
},
left: function(e){
console.log('left');
// var val = $(this).combo('getText');
// $(this).combo('setText',val+' ');
},
right: function(e){
console.log('right');
// var val = $(this).combo('getText');
// console.log(val);
// $(this).combo('setText',val+' ');
},
enter:function(e){
var leaf =$(leafBlocks[nowLeafBlockIndex]);
var value =leaf.children('span').last().text();
$(this).combo('setText',value);
$(this).combo('hidePanel')
},
query:function(q){
var t = $(this).combotree('tree');
var nodes = t.tree('getChildren');
for(var i=0; i<nodes.length; i++){
var node = nodes[i];
if (node.text.indexOf(q) >= 0){
$(node.target).show();
var parent=t.tree('getParent',node.target);
if(parent){
$(parent.target).show();
if(parent){
parent=t.tree('getParent',parent.target);
$(parent.target).show();
}
}
} else {
$(node.target).hide();
}
}
var opts = $(this).combotree('options');
if (!opts.hasSetEvents){
opts.hasSetEvents = true;
var onShowPanel = opts.onShowPanel;
opts.onShowPanel = function(){
var nodes = t.tree('getChildren');
for(var i=0; i<nodes.length; i++){
$(nodes[i].target).show();
}
onShowPanel.call(this);
};
$(this).combo('options').onShowPanel = opts.onShowPanel;
}
}
});
})(jQuery);
Second
(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, { /**
* 擴(kuò)展easyui tree的搜索方法
* @param tree easyui tree的根DOM節(jié)點(diǎn)(UL節(jié)點(diǎn))的jQuery對象 * @param searchText 檢索的文本
* @param this-context easyui tree的tree對象 */
search: function (jqTree, searchText) {
//easyui tree的tree對象?？梢酝ㄟ^tree.methodName(jqTree)方式調(diào)用easyui tree的方法
var tree = this;
//獲取所有的樹節(jié)點(diǎn)
var nodeList = getAllNodes(jqTree, tree);
//如果沒有搜索條件，則展示所有樹節(jié)點(diǎn)
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();
}
//展開已選擇的節(jié)點(diǎn)（如果之前選擇了）
var selectedNode = tree.getSelected(jqTree);
if (selectedNode) {
tree.expandTo(jqTree, selectedNode.target);
}
return;
}
//搜索匹配的節(jié)點(diǎn)并高亮顯示
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);
}
}
//隱藏所有節(jié)點(diǎn)
for (var i = 0; i < nodeList.length; i++) {
$(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");
$(nodeList[i].target).hide();
}
//折疊所有節(jié)點(diǎn)
tree.collapseAll(jqTree);
//展示所有匹配的節(jié)點(diǎn)以及父節(jié)點(diǎn)
for (var i = 0; i < matchedNodeList.length; i++) {
showMatchedNode(jqTree, tree, matchedNodeList[i]);
}
}
},
/**
* 展示節(jié)點(diǎn)的子節(jié)點(diǎn)（子節(jié)點(diǎn)有可能在搜索的過程中被隱藏了）
* @param node easyui tree節(jié)點(diǎn)
*/
showChildren: function (jqTree, node) {
//easyui tree的tree對象?？梢酝ㄟ^tree.methodName(jqTree)方式調(diào)用easyui tree的方法
var tree = this;
//展示子節(jié)點(diǎn)
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();
}
}
}
}
},
/**
* 將滾動(dòng)條滾動(dòng)到指定的節(jié)點(diǎn)位置，使該節(jié)點(diǎn)可見（如果有滾動(dòng)條才滾動(dòng)，沒有滾動(dòng)條就不滾動(dòng)）
* @param param {
* treeContainer: easyui tree的容器（即存在滾動(dòng)條的樹容器）。如果為null，則取easyui tree的根UL節(jié)點(diǎn)的父節(jié)點(diǎn)。
* argetNode: 將要滾動(dòng)到的easyui tree節(jié)點(diǎn)。如果targetNode為空，則默認(rèn)滾動(dòng)到當(dāng)前已選中的節(jié)點(diǎn)，如果沒有選中的節(jié)點(diǎn)，則不滾動(dòng) * } */
scrollTo: function (jqTree, param) {
//easyui tree的tree對象?？梢酝ㄟ^tree.methodName(jqTree)方式調(diào)用easyui tree的方法
var tree = this;
//如果node為空，則獲取當(dāng)前選中的node
var targetNode = param && param.targetNode ? param.targetNode : tree.getSelected(jqTree);
if (targetNode != null) {
//判斷節(jié)點(diǎn)是否在可視區(qū)域 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);
}
}
}
});
/**
* 展示搜索匹配的節(jié)點(diǎn) */
function showMatchedNode(jqTree, tree, node) {
//展示所有父節(jié)點(diǎn)
$(node.target).show();
$(".tree-title", node.target).addClass("tree-node-targeted");
var pNode = node;
while ((pNode = tree.getParent(jqTree, pNode.target))) {
$(pNode.target).show();
}
//展開到該節(jié)點(diǎn)
tree.expandTo(jqTree, node.target);
//如果是非葉子節(jié)點(diǎn)，需折疊該節(jié)點(diǎn)的所有子節(jié)點(diǎn)
if (!tree.isLeaf(jqTree, node.target)) {
tree.collapse(jqTree, node.target);
}
}
/**
* 判斷searchText是否與targetText匹配
* @param searchText 檢索的文本 * @param targetText 目標(biāo)文本
* @return true-檢索的文本與目標(biāo)文本匹配；否則為false.
*/
function isMatch(searchText, targetText) {
return $.trim(targetText) != "" && targetText.indexOf(searchText) != -1;
}
/**
* 獲取easyui tree的所有node節(jié)點(diǎn) */
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的子節(jié)點(diǎn)的遞歸算法 */
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);
以上這篇老生常談combobox和combotree模糊查詢就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
jQuery基于ajax實(shí)現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法,結(jié)合實(shí)例形式較為詳細(xì)分析了jQuery結(jié)合ajax進(jìn)行表單登陸驗(yàn)證操作的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了jQuery中:file選擇器用法,實(shí)例分析了:file選擇器的功能、定義及選取類型為file的<input>元素的使用技巧,需要的朋友可以參考下2015-01-01
Bootstrap是最流行的前端開發(fā)框架。本文涉及到bootstrap的特性介紹，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-10-10
最近在使用JQuery的ajax方法時(shí)，要求返回的數(shù)據(jù)為json數(shù)據(jù)，在處理的過程中遇到下面的幾個(gè)問題，那就是采用不同的方式來生成json數(shù)據(jù)的時(shí)候，在$.ajax方法中應(yīng)該是如何來處理的，下面依次來進(jìn)行說明。2015-04-04
jQuery提供的Load的函數(shù)可能可以說是實(shí)現(xiàn)ajax功能的最輕巧的方法。2010-07-07
easyUI 實(shí)現(xiàn)的后臺分頁與前臺顯示功能示例
這篇文章主要介紹了easyUI 實(shí)現(xiàn)的后臺分頁與前臺顯示功能,結(jié)合實(shí)例形式分析了easyUI 后臺數(shù)據(jù)交互、分頁與前臺顯示相關(guān)操作技巧及注意事項(xiàng),需要的朋友可以參考下2020-06-06
jQuery實(shí)現(xiàn)手機(jī)號碼輸入提示功能實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)手機(jī)號碼輸入提示功能,實(shí)例分析了jQuery針對手機(jī)號碼的判斷與提示相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
jquery實(shí)現(xiàn)手風(fēng)琴效果
這篇文章主要介紹了jquery實(shí)現(xiàn)手風(fēng)琴效果，像手風(fēng)琴一樣打開，立體感效果比較強(qiáng)，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細(xì)介紹了jQuery呼吸輪播圖制作原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
JQuery使用數(shù)組遍歷跳出each循環(huán)
這篇文章主要介紹了JQuery使用數(shù)組遍歷跳出each循環(huán),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09