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

精帖 未结贴
2 942
本想整到layui的扩展库里,时间有限还是直接依托juqery下了。有条件的可以整成layui的扩展库。

/**
* Created by huazhi.chz on 14-4-27.
* tree 2.0.0
* 由原来的一次性读取数据改为事件性获取数据
* Editor by jacochan on 16-12-12
* 新增表单名导入方法。方便创建多个级联项,调用数组的参数title值即为select的表单名
*/
!(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=['<select name="'+this.options.title+'['+index+']">'],placeholder=this.options.placeholder,val=this.options.val[index];placeholder&&dom.push('<option value="">'+placeholder+'</option>');$.each(list,function(i,n){dom.push('<option data-isleaf="'+n.isleaf+'" value="'+n.id+'" '+(n.id==val?'selected':'')+'>'+n.value+'</option>')});dom.push('</select>');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

调用方法:
<body>

<div id="treeGroup" name="area"></div>
<script>
$(function() { $(
'#treeGroup').tree({src : 'json.php',placeholder : '-- 请选择 --',val : [17, 240, 2038], key : 'id',jsonp : true,title:'area'});
})
</script>

<script src="jquery.v1.7.2.js"></script>
<script src="juqery_ajax_area_min.js"></script>

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

这里我所谓做了下小修改,主要是增加了一个表单名称传参。数组中的title就是表单名。方便创建多个级联项

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

  • Debug Debug
    2017-01-10 19:10:57
    其实官方有一个无限级的,不过那个是菜单树。而不是表单级联。有条件也可以去改造下。
    0 回复
  • 孤帆侠客 孤帆侠客
    2017-02-14 18:04:11
    juqery 是什么?[疑问]
    0 回复
最近热帖
vip-admin Html v1.6.0 更新了 - 基于layui的后台模板 1261
layui省市区三级联动数据库版 1222
基于thinkphp3.2.3+layui的超简洁企业网站后台管理模版 451
基于LayUI封装的一个简单表格.(好久没发贴了,发一下福利),用得上就拿去吧~~~ 396
layui渲染select或checkbox问题 319
重新修改了Fly社区模版,取消响应式,PC和移动独立分开 256
不依赖服务端渲染模板,前端实现模板渲染加载问题的一些思考。 255
贤心大大,我想改网址 252
百思不得其解的一个问题! 232
请问为什么layer中弹出层内容点击事件不起作用?? 231
近期热议
vip-admin Html v1.6.0 更新了 - 基于layui的后台模板 15
基于thinkphp3.2.3+layui的超简洁企业网站后台管理模版 13
百思不得其解的一个问题! 12
layui的use加载问题 11
范围的日历,怎么让第一个日历选中时间后,第二个立刻自动弹出 10
请问为什么layer中弹出层内容点击事件不起作用?? 10
jquery的layer弹出层框架,如果设置 iframe弹出一个页面里是表单提交,提交完怎么关闭 10
为什么select我不加selected他默认选中呀? 9
请问如何监听右上角的关闭事件 9
弹出层宽度高度自适应 7