combotree下拉树模糊查询联动查询

combotree下拉树模糊查询联动查询

combotree基本查询js写法

默认折叠子节点,想要联想搜索好使 把这注释掉,默认展开所有节点

<div style="margin-bottom:20px">
            <input id="organTree" class="easyui-combotree"  prompt="请选择机构" style="width:100%;height: 32px;">
        </div>
$('#organTree').combotree({
            url: ctx+app_public+"/organ/organ/sys/treeLogin",
            method: 'get',
            editable:true,//true 输入框可输入
            label: 'Select Node:',
            labelPosition: 'top',
            /*onLoadSuccess: function () {
              $("#organTree").combotree('tree').tree("collapseAll");//默认折叠子节点,想要联想搜索好使  把这注释掉,默认展开所有节点
            },*/
            onBeforeSelect: function (node) {
                // 只能选中叶子节点
                /*if (!$(this).tree('isLeaf', node.target)) {
                    return false;
                }*/
            }
        });

联想搜索

所需引入的js

在这里插入图片描述
以下代码直接复制到js里 ,直接好使。什么id不id的 全都不用传。复制下边的就行,一点都不需要改。
特别声明:查树数据的后台Controller方法,模糊搜索的时候 也无需次次传参,完全无参数传递。
combotree的联想搜索 是纯纯的前端功能,后台一点都不用改

js代码

$(function(){
      debugger
      $.fn.combotree.defaults.editable = true;
      $.extend($.fn.combotree.defaults.keyHandler,{
        up:function(){
          console.log('up');
        },
        down:function(){
          console.log('down');
        },
        enter:function(){
          console.log('enter');
        },
        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();
            } 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;
          }
        }
      });
    });


    // $.fn.datagrid.defaults.url = rootpath+'/platform/common/easyui/data.json';
    // 可输入下拉框输入值校验,如果下拉框数据中不存在输入的值,则将下拉框置空
    $.fn.combobox.defaults.onHidePanel = function() {
      var text = $(this).combobox('getText');
      if (text) {
        var data = $(this).combobox('getData');
        var opt = $(this).combobox('options');
        if (data == null || data.length == 0) {
          $(this).combobox('setValue', '');
        } else {
          var flag = false;
          var textarr = text;
          if (opt && opt.multiple) {
            textarr = text.split(',');
          }
          $(data).each(function(i, d) {
            if (opt && opt.multiple) {
              for (var i = 0; i < textarr.length; i++) {
                if (d.text == textarr[i] || d.value == textarr[i]) {
                  flag = true;
                  return;
                }
              }
            } else {
              if (d.text == text || d.value == text) {
                flag = true;
                return;
              }
            }
          });
          if (!flag) {
            $(this).combobox('setValue', '');
          }
        }
      }
    };
发布了60 篇原创文章 · 获赞 121 · 访问量 10万+

猜你喜欢

转载自blog.csdn.net/han_xiaoxue/article/details/103703782
今日推荐