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

精帖 未结贴
1 476
Debug Debug 发布于7天前
悬赏:5飞吻
本想整到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。

热忱回答1

  • Debug Debug
    7天前
    其实官方有一个无限级的,不过那个是菜单树。而不是表单级联。有条件也可以去改造下。
    0 回复

最近热帖

  1. layui 分页如何自己用JS 跳转到指定页? 7008
  2. 建议。layer相册,不能实时增加图片。 4046
  3. 近期服务器遭受不明来源的持续攻击 1647
  4. layui的form组件的响应数据怎么获取 1562
  5. 为什么社区里搜索后跳转到必应? 1471
  6. .Net WebCMS后台管理系统 1377
  7. layui 社区2016年度十佳案例 1351
  8. 蓝狐宝社区,一个成长中的社区 412
  9. 分享自己的一点劳动成果 389
  10. ifram 父页面的 【确定】按钮触发页面的form验证 356
layim下载

近期热议

  1. layui能否支持 select2.的功能 27
  2. 近期服务器遭受不明来源的持续攻击 24
  3. .Net WebCMS后台管理系统 21
  4. 表单开关按钮放在模态框内就不显示了,怎么办,急! 15
  5. layer如何获取 拖动后的坐标位置 offset left和to'p 13
  6. 分享自己的一点劳动成果 11
  7. layui 社区2016年度十佳案例 11
  8. 关于layui树形菜单当前元素高亮的问题 10
  9. 关于lauyi单选框的问题 9
  10. 贤心是一个人吗?男的还是女的。。。 9