基於jquery的可查詢多級select控制元件(可記錄歷史選擇)
阿新 • • 發佈:2018-12-09
;(function($,window,document){ var pluginName = 'multiSelect', defaults = { type: '1',//select層級onetwo data:[], field:[],//資料欄位名 record: true, queryFun: function(){} }; function MultiSelect(element,options){ this.element = element; this.settings = $.extend({}, defaults, options); this.init(); } MultiSelect.prototype = { //初始化彈出框 init: function(){ var that = this, element = this.element; that.create(element); that.trigger(element); }, //建立select框 create: function(element){ var that = this, $this = $(element), selectElement = '<input type="text" name="selectinput" id="select_input" class="select-input" placeholder="請選擇" />' +'<span class="input-isfold glyphicon glyphicon-chevron-down"></span>' +'<div class="select-options-box" id="select_options_box"></div>'; $this.append(selectElement); that.initOption(); }, //初始化列表 initOption: function(){ var that = this, $options_box = $('#select_options_box'); var $options = that.parseOptions(); $options_box.html($options); }, //解析並處理options資料 parseOptions: function(){ var that = this, type = that.settings.type, field = that.settings.field, one = field[0], two = field[1], data = that.settings.data, twolist = '', optionsTwo = [], recordColumn = that.settings.recordColumn, record = that.settings.record, options = ''; var recordColumn = JSON.parse(window.localStorage.getItem("recordInfo"))?JSON.parse(window.localStorage.getItem("recordInfo")):[]; console.log("recordColumn" +recordColumn); options += '<div class="options-container">'; if (record && recordColumn.length > 0) { for (var i = 0; i < recordColumn.length; i++) { twolist += '<li class="options-container optionslist">'+'-- '+'<span class="options-data">'+ recordColumn[i] +'</span></li>'; } options += '<div class="options-record">' +'<span class="options-data">歷史記錄</span><span class="glyphicon glyphicon-chevron-up options-isfold"></span>' +'</div>' +'<ul class="options-two">'+ twolist +'</ul>'; } switch(type){ case '1': for (var i in data) { options+='<div class="optionslist"><span class="options-data">'+data[i][one]+'</span></div>'; } case '2': for (var i in data) { twolist = '', optionsTwo = []; var optionsTwo = data[i][two]; for (var j in optionsTwo){ twolist+='<li class="options-container optionslist">'+'-- '+'<span class="options-data">'+ optionsTwo[j][field[2]] +'</span></li>'; } options+= '<div class="options-one optionslist">' +'<span class="options-data">'+ data[i][one] +'</span><span class="glyphicon glyphicon-chevron-up options-isfold"></span>' +'</div>' +'<ul class="options-two">'+ twolist +'</ul>'; } } options += '</div>'; return options; }, //系列事件 trigger: function(element,event){ var that = this, $this = $(element), $options_box = $('#select_options_box'), $isfold = $('.options-isfold'), recordColumn = that.settings.recordColumn, record = that.settings.record, $input = $('#select_input'); var recordColumn = JSON.parse(window.localStorage.getItem("recordInfo"))?JSON.parse(window.localStorage.getItem("recordInfo")):[]; $input.on({ 'focus': function(){ $options_box.fadeIn(); that.selectFun(false); }, 'input propertychange': function(){ that.selectFun(false); }, 'click': function(){ return false; } }); $('.input-isfold').on('click', function(event){ $options_box.toggle(); $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); event.stopPropagation(); }) $isfold.on('click', function(event){ $(this).parent().next().toggle(); $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); $options_box.show(); event.stopPropagation(); }) $('.optionslist').on({ 'click':function(event){ $input.val($(this).find('.options-data').html()); debugger if($.isFunction(that.settings.queryFun)){ that.settings.queryFun(); } if (record) { var recordCol = $input.val(); // console.log("recordCol"+recordCol+"recordColumn" +recordColumn); if (JSON.stringify(recordColumn).indexOf(JSON.stringify(recordCol)) < 0){ recordColumn.unshift(recordCol); } window.localStorage.setItem("recordInfo", JSON.stringify(recordColumn)); } $options_box.fadeOut(); event.stopPropagation(); }, 'mouseover': function(){ $(this).css({'background':'#c2cad8'}); }, 'mouseout' : function(){ $(this).css({'background':'#fff'}); } }); $(document).keyup(function(event){ if(event.keyCode === 13){ that.selectFun(true); if($.isFunction(that.settings.queryFun)){ that.settings.queryFun(); } } event.stopPropagation(); }); $(document).on('click', function(){ $options_box.fadeOut(); }); }, // input與select同步 selectFun: function(enter){ var that = this, $options_box = $('#select_options_box'), $input = $('#select_input'), optiondata = $input.val(), options = $('.optionslist'), optionTop = 0, selectHTML = ''; $.each(options, function(i, item){ selectHTML = $(item).find('.options-data').html(); // console.log(selected); if(selectHTML.indexOf(optiondata) >= 0) { // $(item).trigger('hover'); options.css({'background':'#fff'}); $(item).css({'background':'#c2cad8'}); /*if ($(item).hasClass('options-one')) { optionTop = $(item).position().top; }else{ optionTop = $(item).parent().position().top; }*/ optionTop = $(item).position().top; // console.log(optionTop); $options_box.scrollTop(optionTop); if (enter) { $(item).trigger('click'); } } }); if (optiondata === '') { options.css({'background':'#fff'}); $options_box.scrollTop(0); } } }; $.fn[pluginName] = function(options) { this.each(function() { if (!$.data(this, "plugin_" + pluginName)) { $.data(this, "plugin_" + pluginName, new MultiSelect(this, options)); } }); return this; }; })(jQuery,window,document)