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

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 无限极分类、jquery 无限极分类、jquery无限极分类 c、jquery无限极联动菜单、php无限极分类,以便于您获取更多的相关知识。

时间: 2024-10-28 17:48:10

BootStrap无限级分类(无限极分类封装版)_jquery的相关文章

PHP实现无限极分类

利用两个for循环实现无限级分类 表: 字段名 字段类型 备注 默认值 id int 主键 auto-increment   name varchar 分类名称   pid int 父类id 0 顶级分类的 pid 默认就是0了.当我们想取出某个分类的子分类树的时候,基本思路就是递归,当然,出于效率问题不建议每次递归都查询数据库,通常的做法是先将所有分类取出来,数据保存到PHP数组里,再进行处理,最后还可以将结果缓存起来以提高下次请求的效率. 先来构建一个原始数组,这个直接从数据库中查询出来就行

实现php无限极分类的方法

今天写了下无限极分类 下面就把代码贴上来了 写的不怎么样. method of classify one <?php /* reader: 这是自己写的无限极分类实现方法 里面的编辑方法只是对分类名进行了编辑 没有进行移动操作 小弟能力有限忘大家多多包涵啊 第一种方法: CREATE TABLE `types` ( `type_id` int(11) NOT NULL AUTO_INCREMENT, `type_name` varchar(20) NOT NULL, `type_p_id` va

PHP超牛逼无限极分类生成树方法

  这篇文章主要介绍了PHP超牛逼无限极分类生成树方法,本文巧用PHP中的引用实现树的生成方法,比递归方法高端多了,需要的朋友可以参考下 你还在用浪费时间又浪费内存的递归遍历无限极分类吗,看了该篇文章,我觉得你应该换换了. 这是我在OSChina上看到的一段非常精简的PHP无限极分类生成树方法,巧在引用,整理分享了. 代码如下: function generateTree($items){ $tree = array(); foreach($items as $item){ if(isset($

PHP实现无限极分类图文教程_php实例

一般来说实现无限极分类都是使用递归或者迭代的方式,小伙伴们看下本文的实现方式吧. 1,数据库设计: 2,代码: 复制代码 代码如下: /**  * @author koma  * @todo   PHP无限极分类  */ $cn = mysql_connect('localhost', 'root', '') or die(mysql_error()); mysql_select_db('t', $cn) or die(mysql_error()); mysql_query('set names

php无限极分类递归排序实现方法_php技巧

本文实例讲述了php无限极分类递归排序实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function order ($array,$pid=0){     $arr = array();             foreach($array as $v){         if($v['pid']==$pid){             $arr[] = $v;             $arr = array_merge($arr,order($array,$v['

sqlserver实现树形结构递归查询(无限极分类)

SQL Server 2005开始,我们可以直接通过CTE来支持递归查询,CTE即公用表表达式 百度百科 公用表表达式(CTE),是一个在查询中定义的临时命名结果集将在from子句中使用它.每个CTE仅被定义一次(但在其作用域内可以被引用任意次),并且在该查询生存期间将一直生存.可以使用CTE来执行递归操作.创建的语法是: with <name of you cte>(<column names>) as( <actual query> ) select * from

查询-mysql无限极分类排序问题

问题描述 mysql无限极分类排序问题 表是这样设计的 2,4,5字段请无视 现在要查询出来这样格式的数据 一级分类 二级分类A 三级分类A 三级分类B 二级分类B 三级分类A 三级分类B 我使用的sql为 select * from vn_erp_healthprice order by sorts sorts字段为varchar类型 查询的结果如下 排序结果满足业务要求,但为什么1-11排在1-2前面 还有 根据字符串排序这是个什么原理来着 好久没用过这种分类了 一时想不起来了 求大神赐教

深入浅析PHP无限极分类的案例教程_php实例

平时开发中或多或少不可避免会遇到无限极分类的问题,因为效率.逻辑等问题也一直使这类问题比较尖锐.今天我们以yii2框架为基础,栏目无限极为例,对这个问题进行一个简单的处理. 首先我们有一张栏目数据表 tree 表结构如下图(原文有图) 看上去表结构很简单. 我们插入几条测试数据 INSERT INTO `tree` (`id`, `parent_id`, `name`) VALUES (1, 0, 'A'), (2, 0, 'B'), (3, 1, 'a'), (4, 3, 'aa'), (5,

php实现smarty模板无限极分类的方法_php实例

本文实例讲述了php实现smarty模板无限极分类的方法.分享给大家供大家参考,具体如下: <?php $conn = mysql_connect("localhost","admin","admin"); mysql_select_db("people_shop",$conn); mysql_query("SET NAMES 'UTF-8'"); $class_arr=array(); $sql =