老生常谈combobox和combotree模糊查询


Posted in Javascript onApril 17, 2017

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=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, {  /** 
  * 扩展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);

以上这篇老生常谈combobox和combotree模糊查询就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
JavaScript控制台的更多功能
Apr 28 Javascript
vue实现简单表格组件实例详解
Apr 16 #Javascript
JavaScript实现网页头部进度条刷新
Apr 16 #Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 #Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 #Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 #Javascript
JavaScript简单计算人的年龄示例
Apr 15 #Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 #Javascript
You might like
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
JavaScript日历实现代码
2010/09/12 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Python实现括号匹配方法详解
2020/02/10 Python
python代码区分大小写吗
2020/06/17 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
制药工程专业应届生求职信
2013/09/24 职场文书
临床医学专业学生的自我评价分享
2013/11/21 职场文书
求职信范文英文版
2014/01/05 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
课程设计感想范文
2015/08/11 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL