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', '');
          }
        }
      }
    };
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章