首页 / BOOTSTRAP / BootStrap无限级分类(无限极分类封装版)

BootStrap无限级分类(无限极分类封装版)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了BootStrap无限级分类(无限极分类封装版)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4855字，纯文字阅读大概需要7分钟。

内容图文

HTML部分

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>多级联动封装</title>
<link href="./css/bootstrap.css" rel="stylesheet">
<script src="./js/jquery.js"></script>
<script src="./duoji.js"></script>
</head>
<body>
<div class="row" style="margin:100px auto;">
<div class="col-md-12" id="box1"></div> 
</div>
<div class="row" style="margin:100px auto;">
<div class="col-md-12" id="box2"></div> 
</div>
<script>
//容器名,name名（新生成的class名）
$.select('box1','area1');
$.select('box2','area2');
</script>
</body>
</html>

duoji.js 代码

(function ($) {
$.select=function(box,addInputClass){
var i=new select;
return i.init(box,addInputClass)
}
//声明多级联动 方法类
var select = new Function();
select.prototype={
//定义类属性
init:function(box,addInputClass){
this.boxName=box;
this.box=$('#'+box); //需要添加元素的容器
this.eleClass=addInputClass;//每个事件的定位class
this.first();//新建一个select获取 
},
first:function(){
//声明外部变量
var boxName=this.boxName;
var eleClass= this.eleClass;
var box=this.box;
var obj=this;
$.get("http://127.0.0.1:83/areas", {id:'0'},
function(data){
var option="<option value=''>请选择</option>";
var list=data.data;
for(var key in list){
option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
}
$('<div class="col-md-2 pl0"><select name="'+eleClass+'[]" num="0" pnode="'+boxName+'" cname="'+eleClass+'" class="form-control input-sm '+eleClass+'">'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change($(this))});
},'jsonp');
},
//change事件
change:function(event){
//声明
var boxName=$(event).attr('pnode'); //获取触发事件者的pnode 
var className=$(event).attr('cname');//获取触发事件者的cname
var box =$("#"+boxName); //获取所有插入盒子的对象
var eleClass=$("."+className); //获取所有Class所在元素组
var num=eleClass.index($(event))+1; //获取num的值
var id=$(event).val(); //获取ajax发送id的头
var obj=this; //代表这个方法
//清除 后续添加的新的元素
eleClass.each(function(){
//这里的this 代表eleClass 遍历时的单个对象
//console.log($(this).attr('num'));
//console.log($().attr('num'));
if($(this).attr('num')>$(event).attr('num')){
$(this).parent().remove();
}
});
/*
console.log(boxName);
console.log(className);
console.log($(event));
console.log($(event).val());
*/
//循环ajax方法
$.ajax({
type: "get",
dataType:"jsonp",
url: "http://127.0.0.1:83/areas",
data: {id:id},
sync: false,//设置为同步
success: function(data){
//console.log(data);
var list =data.data
if(data.state==='1'){
var option="<option value=''>请选择</option>";
for(var key in list){
option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
}
$('<div class="col-md-2 pl0"><select name="'+className+'[]" num="'+num+'" pnode="'+boxName+'" cname="'+className+'" class="form-control input-sm '+className+'" >'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change(this)});
}
}
});
},
//查询当前盒子中的信息
log:function(){
var boxName=$(event).attr('pnode'); //获取触发事件者的pnode 
var className=$(event).attr('cname');//获取触发事件者的cname
var box =$("#"+boxName); //获取所有插入盒子的对象
var eleClass=$("."+className); //获取所有Class所在元素组
console.log("容器名:"+boxName+"\n 触发的class名:"+className);
},
//第一个select框获取信息
getFirstElement:function(){
var main=$('#'+this.main);
$.get("http://127.0.0.1:83/areas", {id:'0'},
function(data){
var option="<option value=''>请选择</option>";
var list=data.data;
for(var key in list){
option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
}
main.html(option);
},'jsonp');
}
}
})(jQuery)

后端提供的数据类型：json

如果有数据：state=1

例子：

data:{
110000:{id: "110000", areaname: "北京", pid: "0", shortname: "北京", level: "1", position: "tr_0", sort: "1"}
120000:{id: "120000", areaname: "天津", pid: "0", shortname: "天津", level: "1", position: "tr_0", sort: "2"}
130000:{id: "130000", areaname: "河北省", pid: "0", shortname: "河北", level: "1", position: "tr_0", sort: "3"}
140000:{id: "140000", areaname: "山西省", pid: "0", shortname: "山西", level: "1", position: "tr_0", sort: "4"}
150000:{id: "150000", areaname: "内蒙古自治区", pid: "0", shortname: "内蒙古", level: "1", position: "tr_0", sort: "5"}
210000:{id: "210000", areaname: "辽宁省", pid: "0", shortname: "辽宁", level: "1", position: "tr_0", sort: "6"}
220000:{id: "220000", areaname: "吉林省", pid: "0", shortname: "吉林", level: "1", position: "tr_0", sort: "7"}
230000:{id: "230000", areaname: "黑龙江省", pid: "0", shortname: "黑龙江", level: "1", position: "tr_0", sort: "8"}
310000:{id: "310000", areaname: "上海", pid: "0", shortname: "上海", level: "1", position: "tr_0", sort: "9"}
320000:{id: "320000", areaname: "江苏省", pid: "0", shortname: "江苏", level: "1", position: "tr_0", sort: "10"}
330000:{id: "330000", areaname: "浙江省", pid: "0", shortname: "浙江", level: "1", position: "tr_0", sort: "11"}
.....
},
state:"1"

如果没有数据 state=0

例子：

state:"0"

内容总结

以上是互联网集市为您收集整理的BootStrap无限级分类(无限极分类封装版)全部内容，希望文章能够帮你解决BootStrap无限级分类(无限极分类封装版)所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/350080.html

来源：【匿名】

【上一篇】妙用Bootstrap的 popover插件实现校验表单提示功能【下一篇】Bootstrap+PHP表单验证实例

更多 ►

【BootStrap无限级分类(无限极分类封装版)】教程文章相关的互联网学习教程文章

bootstrap无限级分类 jq拓展之前的无限级分类的封装版~【代码】

HTML部分<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>多级联动封装</title><link href="./css/bootstrap.css" rel="stylesheet"><script src="./js/jquery.js"></script><script src="./duoji.js"></script></head><body> <div class="row" style="margin:100px auto;"><div class="col-md-12" id="box1"></div> </div> <div class="row" style="margin:100px auto;"><div class="col-md-12" id=...

JS组件系列——分享自己封装的Bootstrap树形组件：jqTree【代码】【图】

前言：之前的一篇介绍了下如何封装自己的组件，这篇再次来体验下自己封装组件的乐趣。看过博主博客的园友应该记得之前分享过一篇树形菜单的使用JS组件系列——Bootstrap 树控件使用经验分享，这篇里面第一个Jquery Tree，只是用简单样式和js去实现了效果，没有给出一个系统的封装，这篇博主就来试试在此样式的基础上封装一个稍微完整点的树形组件。一、组件效果预览其实效果和之前的那个差不多，博主只是在之前的基础上加了一个选中...

Bootstrap树形组件jqTree的简单封装_javascript技巧【图】

一、组件效果预览其实效果和之前的那个差不多，博主只是在之前的基础上加了一个选中的背景色。全部收起展开全部展开二、代码示例其实效果很简单，重点来看看代码是如何实现封装的。还是老规矩，将已经实现的代码贴出来，然后再来一步一步讲解。(function ($) {//使用js的严格模式'use strict';$.fn.jqtree = function (options) {//合并默认参数和用户传过来的参数options = $.extend({}, $.fn.jqtree.defaults, options || {})...

JS 组件系列之 bootstrap treegrid 组件封装过程【图】

正文前言：最近产品需要设计一套相对完整的组织架构的解决方案，由于组织架构涉及到层级关系，在表格里面展示层级关系，自然就要用到所谓的treegrid。可惜的是，一些轻量级的表格组件本身并没有自带树形表格的功能，比如bootstrapTable就没有这个功能，怎么办呢？如果是jqgrid、easyUI的表格，treegrid的效果可以说是轻而易举就能解决，而项目目前用的就是bootstrapTable，不可能这个时候因为这个需求去换组件吧。博主分析了下，无...

bootstrap select插件封装成Vue2.0组件【图】

因为bootstrap-select功能比较强大，而且样式还不错，所以在项目使用了vue，所以，觉得对bootstrap-select进行封装。 html代码如下:<my-select :options="input.options" v-model="input.value" ref="typeSelect" :index="index" :childidx="childIdx" :load="load" :multiple="input.multiple" :method="change"></my-select> js// select 插件 Vue.component(vm-select, {props : [options, value, multiple, method, load, inde...

Bootstrap fileinput组件封装及使用详解【图】

介绍通过本文，你可以学习到如何封装或者开发一个前端组件，同时学习Bootstrap-fileinput组件的使用，封装后使用更加简单方便。BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件，它支持支持多文件、在线预览、拖拽上传等功能，封装后BaseFile主要包括以下功能：弹出窗口的附件上传当前界面的附件上传显示附件明细可编辑的附件明细（删除、预览、不可新增）关于Bootstrap-fileinput的API文档可参考http://plugin...

一步一步封装自己的HtmlHelper组件BootstrapHelper（二）

前言：上篇介绍了下封装BootstrapHelper的一些基础知识，这篇继续来完善下。参考HtmlHelper的方式，这篇博主先来封装下一些常用的表单组件。关于BootstrapHelper封装的意义何在，上篇评论里面已经讨论得太多，这里也不想过多纠结。总之一句话：凡事有得必有失，就看你怎么去取舍。有兴趣的可以看看，没兴趣的权当博主讲了个“笑话”吧。 BootstrapHelper系列文章目录 C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHe...

一步一步封装自己的HtmlHelper组件BootstrapHelper（三）【图】

前言：之前的两篇封装了一些基础的表单组件，这篇继续来封装几个基于bootstrap的其他组件。和上篇不同的是，这篇的有几个组件需要某些js文件的支持。 BootstrapHelper系列文章目录 C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper（二） C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper（三：附源码）一、NumberBoxExtensi...

BootStrap无限级分类(无限极分类封装版)

HTML部分<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>多级联动封装</title> <link href="./css/bootstrap.css" rel="stylesheet"> <script src="./js/jquery.js"></script> <script src="./duoji.js"></script> </head> <body> <div class="row" style="margin:100px auto;"> <div class="col-md-12" id="box1"></div> </div> <div class="row" style="margin:100px auto;"> <div class="col-md-12" ...

封装的dialog插件基于bootstrap模态对话框的简单扩展

在使用bootstrap 模态对话框时需要在页面写对话框html，如果一个页面有许多地方需要对话框，那意味着需要写多个，感觉很麻烦，平时不太习惯bootstrap 模态对话框这种方式，所以做了个简单封装及扩展，增加了自定义标题，宽度和高度，并根据宽高居中显示。默认属性： id:"modal",//弹窗id title:"dialog",//弹窗标题 width:"600",//弹窗宽度，暂时不支持% height:"500",//弹窗高度,不支持% backdrop:true,//是否显示遮障，和原生bo...

Bootstrap被封装的弹层【图】

对于Bootstrap的弹层，插件有很多，今天主要用的是它自带的功能，通过bootstrap提供的模式窗口来实现的，而小编主要对使用方法进行了封装，开发人员可以自己动态传入弹层的ＨＴＭＬ内容，可以控制按钮的显示与隐藏，用户通过ＭＶＣ扩展方法对弹层进行生成，然后使用A标签进行调用．具体使用很简单@Html.GenerateDialog("测试",true, @<div> <form action="/home/index">hello world!</form> </div>) <a data-toggle=modal data-ta...

angularjs封装bootstrap时间插件datetimepicker【图】

背景：angular与jquery类库的协作第三方类库中，不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了。它灵活的dom操作，让很多web开发人员欲罢不能。再加上已经很成熟的jquery UI 库和大量jquery 插件，几乎是一个取之不尽用之不竭的宝库。然而，它是否能与angularjs结合呢？很多angularjs原教旨主义者对此持否定态度。他们认为，既然已经使用了angularjs做web应用框架，那就必须避免其他类库的干扰，做纯净的...

Bootstrap树形组件jqTree的简单封装【图】

一、组件效果预览其实效果和之前的那个差不多，博主只是在之前的基础上加了一个选中的背景色。全部收起展开全部展开二、代码示例其实效果很简单，重点来看看代码是如何实现封装的。还是老规矩，将已经实现的代码贴出来，然后再来一步一步讲解。(function ($) {//使用js的严格模式use strict;$.fn.jqtree = function (options) {//合并默认参数和用户传过来的参数options = $.extend({}, $.fn.jqtree.defaults, options || {});v...

首页 / BOOTSTRAP / BootStrap无限级分类(无限极分类封装版)

BootStrap无限级分类(无限极分类封装版)

内容导读

内容图文

内容总结

内容备注

内容手机端

【BootStrap无限级分类(无限极分类封装版)】教程文章相关的互联网学习教程文章

BOOTSTRAP - 相关标签

封装 - 相关标签

BOOTSTRAP - 技术教程分类

BOOTSTRAP - 最新教程

BOOTSTRAP - 最热教程