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

精帖 未结贴
2 818
本想整到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.5.0 更新了 - 基于layui的后台模板 1308
meTools - 基于layui+vue的在线工具网站 916
基于layui的后台模板 - 反正我觉得我的界面是最漂亮的 800
你的案例或技术分享,将会被置顶推荐 757
一个为您省时省力的后台模板jqadmin 709
LayuiHelp,一个良心插件,为你的代码插上翅膀! 677
LayUI SELECT 多级级联实现,理论上是无限级的 565
Admin-Template 后台模板(开发中...) 465
基于TP5加Layui的轻社区系统,争取下个月上线 268
laypage分页模块扩展之pagesize.js(layui2.0不知道会不会有这个功能) 197
近期热议
基于layui的后台模板 - 反正我觉得我的界面是最漂亮的 20
一个为您省时省力的后台模板jqadmin 18
LayuiHelp,一个良心插件,为你的代码插上翅膀! 17
layer的使用,以前用的时候还没挺好的怎么现在layer的弹出框一直报错,求大神给指点一下 15
form表单提交,监听提交按钮,用ajax异步检测名称是否已存在,ajax 不执行! 14
vip-admin Html v1.5.0 更新了 - 基于layui的后台模板 14
layui点击左侧固定导航栏时,如何在右侧显示,而并不是打开新窗口呢 12
遮罩通过parent 可以全屏,但窗口不能传值了? 12
为什么layui分页只有一页的情况下不无法显示组件呢? 11
select联动初始化数据form.render();不能逐个渲染的问题。 11