从阿里的UI框架扒出来的无限级联juqery扩展库

2017-01-12 09:58:03来源:oschina作者:雷小达人点击

第七城市
/**
* Created by huazhi.chz on 14-4-27.
* tree 2.0.0
* 由原来的一次性读取数据改为事件性获取数据
*/
!(function($){"use strict";var Redis=function(){this.data={};};Redis.prototype={constructor:Redis,query:function(key){return this.data[key];},insert:function(key,value){this.data[key]=value;},clear:function(){this.data={};}};var Tree=function(element,options){this.$element=$(element);this.options=options;this.redis=new Redis();};var methods={init:function(){this.destory();methods.bindChange.call(this);methods.bindUpdate.call(this);this.$element.trigger('tree:update');},getData:function(id,index){var that=this,data=that.redis.query(id);if(!that.options.src)return;if(data){methods.createDom.apply(that,[data,index])}else{$.ajax(that.options.src,{data:that.options.key+'='+id,cache:true,dataType:that.options.jsonp?'jsonp':'json'}).success(function(json){if(json.code==200&&json.data&&json.data.length){data=json.data;that.redis.insert(id,data);methods.createDom.apply(that,[data,index]);}})}},createDom:function(list,index){var dom=['');dom=$(dom.join('')).appendTo(this.$element).trigger('change');},bindChange:function(){var that=this;this.$element.on('change.sui.tree','select',function(e){var $this=$(this),v=$this.val();$this.nextAll().remove();methods.saveValue.call(that);if(!v)return;if(!$this.find('option:selected').data('isleaf'))methods.getData.apply(that,[v,$this.index()+1]);else that.options.val=[];})},bindUpdate:function(){var that=this;this.$element.on('tree:update',function(e){var $this=$(this);$this.empty();methods.getData.apply(that,[0,0]);})},saveValue:function(){var _val=[],_opt=[];this.$element.find('select').each(function(){_val.push(this.value);_opt.push($(this).find('option:selected').text());});this.datas={text:_opt,value:_val};}};Tree.prototype={constructor:Tree,getValue:$.noop,setValue:function(ary){this.options.val=ary;this.$element.trigger('tree:update');},destory:function(){this.$element.off('change.sui.tree').empty();}};var old=$.fn.tree;$.fn.extend({tree:function(){var args=Array.prototype.slice.call(arguments),arg0=args.shift();return this.each(function(){var $this=$(this),data=$this.data('tree'),options=$.extend({},$.fn.tree.defaults,$this.data(),typeof arg0==='object'&&arg0);if(!data)$this.data('tree',(data=new Tree(this,options)));if(typeof arg0==='string'&&typeof data[arg0]==='function')data[arg0].apply(data,args);else methods.init.call(data);});}});$.fn.tree.Constructor=Tree;$.fn.tree.defaults={src:'',treeType:'select',placeholder:'请选择',val:[],key:'id',title:'select'};$.fn.tree.noConflict=function(){$.fn.tree=old;return this;};$(function(){$('[data-toggle="tree"]').tree();});})(jQuery);

你可以保存上面的代码为 juqery_ajax_area_min.js


调用方法:








val:[初始化值],依次[一级、二级、三级、四级、N级]


非常方便吧。感谢阿里巴巴的huazhi.chz。

第七城市

相关文章

    无相关信息

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台