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


Posted in Javascript onJune 10, 2016

自制Jquery树形选择插件.

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

1.Jquery插件代码

(function (j) {
  j.fn.attrs = function (option) {
    var root = this, data = [];
    //默认参数
    var def = { url: '/ajax/GetSort/', str: root.attr("str") || '0', handel: function (v) {
      return "<option value=" + v.id + ">" + v.type + "</option>"

    }, path: root.attr("val") || 0, sChar: ',', change: function (v) { }
    };
    //参数合并
    def = j.extend({}, def, option);
    //是否初始化
    ispath() ? init() : create(def.str);
    //请求分类并选中
    function create(id, o, v) {
      if (!id || parseInt(id) == -1)
        return o.nextAll().remove();
      //创建select
      var select = j("<select></select>").hide();
      _b(select);
      //添加到容器内
      if (o) o.nextAll().remove();
      root.append(select);
      //发起Ajax请求
      j.ajax({
        type: "GET",
        url: def.url,
        data: { id: id },
        dataType: "json",
        cache: true,
        success: function (json) {
          datainit(select, json, v);
        }
      })

    }
    function datainit(select, data, v) {
      _c(select, data).val(v || -1);
      if (select.children("option").length <= 1) {
        select.remove();
        return;
      }
      else
        select.removeAttr("style");
    }
    //判断是否符合格式
    function ispath() {
      return def.path && /^(\d{1,},)*\d{1,}$/.test(def.path) && def.path != '0,0,0';
    }
    //创建值
    function _v() {
      var v = new Array(), vtext = new Array();
      v.push(0);
      root.children("select").each(function () {
        if (j(this).val() > 0) {
          v.push(j(this).val());
          vtext.push(j(this).children("option[selected]").text())
        }
      })
      root.attr("val", v.join(','));
      root.attr("vtext", vtext.join(">"));
      def.change(v);
    }
    //初始化
    function init() {
      if (ispath()) {
        var list = def.path.split(def.sChar);
        for (var i in list) {
          create(list[i], null, list[++i]);
        }
        return;
      }
      alert("Error:分类出错!")
    }
    //绑定事件
    function _b(select) {
      select.bind("change", function () {
        create(j(this).val(), j(this));
        _v();
      })
    }
    //创建下拉框
    function _c(select, data) {
      select.append(j("<option value='-1'>==请选择==</option>"));
      for (var i = 0; i < data.length; i++) {
        select.append(j(def.handel(data[i])));
      }
      return select;
    }
  }
})($)

2.对付省市选择

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

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

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

4.如何使用

<div id="attr"></div>
<script type="text/javascript">
(function($){
$("#attr").attr(
 {
 url: '/ajax/GetSort/',//ajax 获取的URL 服务器返回的是Json 数据
 str: root.attr("str") || '0',//获取初始化的分类path.例如:23,45,90。在编辑的情况下能正确还原
 handel: function (v) {//数据处理的回调函数,表明如何对后台数据进行解析。 如[{id:32,type:"分类"}]
   return "<option value=" + v.id + ">" + v.type + "</option>"
  },
 path: root.attr("val") || 0,
 sChar: ',',//path 拆分的字符如果,path 为23|45|90 则 ‘|'
 change: function (v) { }//选择框修改处理事件
  };
);
})(jQuery)
</script>

以上这篇3kb jQuery代码搞定各种树形选择的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 注意事项与常用语法小结
Jun 07 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
原生js实现日期联动
Jan 12 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
关于网页中的无缝滚动的js代码
Jun 09 #Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 #Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 #Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 #Javascript
JavaScript事件学习小结(一)事件流
Jun 09 #Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 #Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 #Javascript
You might like
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
解决中英文字符串长度问题函数
2007/01/16 PHP
PHP之变量、常量学习笔记
2008/03/27 PHP
php中使用websocket详解
2016/09/23 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
python远程连接MySQL数据库
2019/04/19 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
python面向对象 反射原理解析
2019/08/12 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
物业管理专业个人的自我评价
2013/11/19 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
财政局长个人总结
2015/03/04 职场文书
论文答辩开场白大全
2015/05/27 职场文书
初中语文教师研修日志
2015/11/13 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS