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

2024-12-08 22:46:30

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 Table使用方法详解

bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,具有简便灵活,快速前端开发的优势.对与bootstrap在此就不在叙述.本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它. 首先交代一下,jquery ,bootstrap
BootStrap无限级分类(无限极分类封装版)

HTML部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>多级联动封装</title> <link href="./css/bootstrap.css" rel="stylesheet"> <script src="./js/jque
PHP实现无限极分类生成分类树的方法

本文实例讲述了PHP实现无限极分类生成分类树的方法.分享给大家供大家参考,具体如下: 现在的分类数据库设计基本都是:每一个分类有一个id主键字段,一个pid指向父类的id,这样便可实现无限级分类,取出的数据就是如下的格式: $arr = array( array("id" => 1 , "pid" => 0 , 'cat' => '栏目一'), array("id" => 2 , "pid" =>
如何使用Laravel Eloquent来开发无限极分类

目录概述数据库迁移 Eloquent 模型和关联关系路由和控制器方法视图和递归子视图概述我们会创建一个微型项目来展示儿童商店的分类,总共有 5 级,如下: 数据库迁移简单的数据表结构: Schema::create('categories', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('name'); $table->unsignedBigInteger('catego
php通过前序遍历树实现无需递归的无限极分类

本文实例讲述了php通过前序遍历树实现无需递归的无限极分类.分享给大家供大家参考.具体如下: 大家通常都是使用递归实现无限极分类都知道递归效率很低,下面介绍一种改进的前序遍历树算法,不适用递归实现无限极分类,在大数据量实现树状层级结构的时候效率更高. sql代码如下: CREATE TABLE IF NOT EXISTS `category` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(50) NOT NULL, `lft` i
yii框架无限极分类的实现方法

用yii框架做了一个无限极分类,主要的数组转换都是粘贴的别人的代码,但还是不要脸的写出来,方便以后自己看用的是递归,不是path路径控制器: protected function subtree($arr,$id=0,$lev=1){ $subs = array(); // 子孙数组 foreach($arr as $v) { if($v['parent_id'] == $id) { $v['lev'] = $lev; $subs[] = $v; // 举例说找到array('id'=>1,
深入浅析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实现无限极分类图文教程

一般来说实现无限极分类都是使用递归或者迭代的方式,小伙伴们看下本文的实现方式吧. 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实现smarty模板无限极分类的方法

本文实例讲述了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 =
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['
PHP超牛逼无限极分类生成树方法

你还在用浪费时间又浪费内存的递归遍历无限极分类吗,看了该篇文章,我觉得你应该换换了. 这是我在OSChina上看到的一段非常精简的PHP无限极分类生成树方法,巧在引用,整理分享了. 复制代码代码如下: function generateTree($items){ $tree = array(); foreach($items as $item){ if(isset($items[$item['pid']])){ $items[$item[

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

相关推荐

随机推荐