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

精帖 未结贴
2 1216
本想整到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。

空闲广告位,联系:xianxin@layui.com
  • Debug Debug
    2017-01-10 19:10:57
    其实官方有一个无限级的,不过那个是菜单树。而不是表单级联。有条件也可以去改造下。
    0 回复
  • 孤帆侠客 孤帆侠客
    2017-02-14 18:04:11
    juqery 是什么?[疑问]
    0 回复
最近热帖
完全基于 layui 开发的后台管理模板 2608
三层导航怎么做? 615
「源码市场」 正式版本上线 基于layui开发 546
2.0啥时候出啊,新项目要启动了 485
给2.0一些期待 416
麻烦朋友们投个票呗,FLY社区模板+thinkphp5驱动+个人DIY 367
layui整合datatable了么 301
ajax修改资料成功后 怎么进行初始化 页面刷新还是调用登录时的缓存 258
form.render('select') 更新渲染问题 229
select 动态操作不起作用,求助 195
近期热议
完全基于 layui 开发的后台管理模板 35
layui富文本编辑器图片上传无法回显 15
表单校验无效,找了好长时间找不到原因,求大神看下 14
select 动态操作不起作用,求助 10
ajax修改资料成功后 怎么进行初始化 页面刷新还是调用登录时的缓存 10
给2.0一些期待 9
如何给弹出层传参数? 8
文本编辑器出不来 8
laytpl不解析 8
content: 如果是调用本地的html,怎么写 7