手机版

3kb jQuery代码搞定各种树形选择的实现方法

时间:2021-10-27 来源:互联网 编辑:宝哥软件园 浏览:

自制框架树形选择插件。

对付各种树形选择(省市,分类.)90行框架代码搞定,少说废话直接上插件代码。稍后介绍使用说明。是之前写的一个插件的精简版。

1.框架插件代码

(函数(j) { j.fn.attrs=函数(选项){ var root=this,data=[];//默认参数var def={ URL : '/Ajax/GetSort/',str : root。attr(' str ')| ' 0 ',Handel :函数(v){ return ' option value=' v . id ' ' v . type '/option ' },path: root.attr('val') || 0,sChar: ',',change :函数(v){ };//参数合并def=j.extend({},def,option);//是否初始化ispath()?init(): create(def。str);//请求分类并选中函数创建(id,o,v) { if(!id || parseInt(id)==-1)返回o.nextAll().移除();//创建选择var select=j('select/select ').hide();_b(选择);//添加到容器内if (o) o.nextAll().移除();root.append(选择);//发起埃阿斯请求j.ajax({ type: 'GET ',url: def.url,data : { id : },dataType: 'json ',cache: true,success 3360 function(json){ datainit(select,JSON,v);} }) }函数datainit(选择,数据,v) { _c(选择,数据).val(v | |-1);if (select.children('option ').长度=1){选择。移除();返回;} else select。remove attr(' style ');} //判断是否符合格式函数ispath(){ return def。/^(\d{1,},)*\d{1,}$/.之路test(def.path) def.path!='0,0,0';} //创建值function _v() { var v=new Array(),vt ext=new Array();v . push(0);root.children('select ').每个(函数(){ if (j(this)).val(0){ v . push(j(this)).val());v分机。推动(这个).子项('选项[选中])。text()) } }) root.attr('val ',v.join(',');root.attr('vtext ',vtext。join(');净化变革(五);} //初始化函数init(){ if(is path()){ var list=def。路径。拆分(def。schar);用于(列表中的var(I){ create(列表[i],null,列表[I]);}返回;}警报(' Error:分类出错!') } //绑定事件function _ b(选择){ select。bind(' change ',function () { create(j(this)).val(),j(this));_ v();}) } //创建下拉框function _c(选择,数据){ select。追加(j('选项值='-1 '==)请选择==/option’);for(var I=0;一。数据。长度;I){ select。追加(j(def。汉德尔(数据[I]);}返回选择} }})($)2。对付省市选择

3.对付各种让你蛋疼的无限级选择

4.如何使用

div id=' attr '/div脚本类型=' text/JavaScript '(函数($){$('#attr ').attr({ url: '/ajax/GetSort/',//ajax获取的统一资源定位器服务器返回的是数据数据str: root.attr('str') || '0 ',//获取初始化的分类路径。例如:23,45,90。在编辑的情况下能正确还原handel:函数{//数据处理的回调函数,表明如何对后台数据进行解析。如[{id:32,type: '分类}]return ' option value=' v . id ' ' v . type '/option ' },path: root.attr('val') || 0,sChar: ',',//path拆分的字符如果,路径为23|45|90 则|' change:函数{ }//选择框修改处理事件};);})(jQuery)/脚本以上这篇3kb jQuery代码搞定各种树形选择的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

版权声明:3kb jQuery代码搞定各种树形选择的实现方法是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。