老生常谈combobox和combotree模糊查询

老生常谈combobox和combotree模糊查询

First

/**

* combobox和combotree模糊查询

* combotree 结果显示两级父节点(手动设置数量)

* 键盘上下键选择叶子节点

* 键盘回车键设置文本的值

*/

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

//当前选中行索引

var nowLeafBlockIndex=-1;

//combotree 组件

var comboTree=null;

//叶子节点DOM Array

var leafBlocks=null;;

//将所有的结果叶子节点放入 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=leafBlNrTPvxlQockIndex;

},

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

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[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, { /**

* 扩展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 < nodehttp://List.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);

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[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, { /**

* 扩展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 < nodehttp://List.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);

$(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, { /**

* 扩展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 < nodehttp://List.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);

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。