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

精帖 未结贴
2 655
本想整到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 回复
  • juqery 是什么?[疑问]
    0 回复
最近热帖
layui 1.0.8 发布,一次用心的小版本升级 5037
LayIM 发布 3.0.3,增加音频消息支持及移动端联系人界面 1341
基于LayUI的后台管理模板BeginnerAdmin更新啦~~~~~~~~~~~~~~ 484
Layer真心好用,有了它,我作为一个phper终于有信心抛开二次开发 300
layui不好用啊,好复杂啊 279
layui 三级联动 255
有偿求助作者大大,我有一个opencart商城网站,想集成layui的问答系统 243
不得不承认,非常棒的一个富文本编辑器 205
ThinkPHP基于Layui无刷提交数据表单,亲测可用 193
CSDN有人公开LayIM源码,弄他 173
layim下载
近期热议
layui 1.0.8 发布,一次用心的小版本升级 54
LayIM 发布 3.0.3,增加音频消息支持及移动端联系人界面 22
通过ajax动态生成的新checkbox添加到table里面样式不存在了,怎么才能重新渲染? 13
layui不好用啊,好复杂啊 13
基于LayUI的后台管理模板BeginnerAdmin更新啦~~~~~~~~~~~~~~ 12
关于富文本框的内容清空问题 10
layer.confirm弹出之后的keydown事件 10
layui的进度条总是无法显示 10
请问layui的tab切换,防止页面刷新效果重置是怎么实现的? 8
layim怎么接入php服务端啊,急急急 8