介绍
本实例主要实现一个省市联动选择器可对表格内容进行筛选(主要针对表格)。实例需求为先选择省份,根据选择的省份可以选择对应省份下面的市级,支持多选。点击选择器上的对应按钮即为选择该城市,再次点击已选城市即为取消选择该城市
已选项目将展示在指定的展示区域,需求:当选择省份时显示省份,当选择了该省份下面对应的城市时,显示选择的城市名,隐藏省份名,展示区域支持删除已选项,当对应省份的所有已选城市被删除时,显示该省份,当删除省份时,选择器中的对应省份的市级选择区域消失即未选择省份就无法选择市级城市。已选项目展示区域支持收缩隐藏及列表展开。
省市数据是通过TP5获取的,在js中会有ajax获取数据,在页面开发阶段可以自己模拟数据布局,
布局采用bootstrap,功能引入jquery,数据通过thinkphp获取mysql库数据
页面布局:
html页面部分只是做一个框架搭建,主要通过js中获取到数据之后进行页面的整体绘制。
全部
css样式代码根据装载环境自行定义,要能融入整体分隔,本demo开发时基于页面为深色背景,样式代码仅供参考:
html,body{
height: 100%;
background-color: #101A22;
}
li{
list-style: none;
text-align: center;
}
ul{
padding: 0;
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}
.choose-btn{
width: 100%;
font-size: 16px;
padding: 0;
line-height: 38px;
background: linear-gradient(to bottom,#04C7FF,#169AFF);
}
.choosen-list-all{
width: 80px;
height: 30px;
text-align: center;
background: linear-gradient(to top,#656b83,#8892b4);
display: inline-block;
line-height: 30px;
color: #dde4f3;
margin-top: 4px;
margin-bottom: 4px;
margin-right: 10px;
cursor: pointer;
}
.choosen-list-item{
width: 80px;
height: 30px;
text-align: center;
background: #53688e;
display: inline-block;
line-height: 30px;
color: #dde4f3;
margin: 4px 5px;
}
.choosen-list-item-text{
width: 56px;
overflow: hidden;
display: inline-block;
height: 30px;
}
.btn-box{
width: 135px;
}
.border-blue{
border: 1px solid blue;
}
.border-red{
border: 1px solid red;
}
.choose-city{
max-width: 840px;
}
.del-choosen{
float: right;
vertical-align: middle;
margin-top: 3px;
cursor: pointer;
}
.choose-list{
width: 260px;
display: none;
height: 356px;
background-color: #343c4c;
color: #DDE4F3;
border-radius: 4px;
position: absolute;
right: 11px;
top: 40px;
border: 1px solid #515C70;
z-index: 1000;
}
#choose_list>.nav-tabs>li.active>a,
#choose_list>.nav-tabs>li.active>a:hover,
#choose_list>.nav-tabs>li.active>a:focus {
color: #009FDA;
background-color: transparent;
border: none;
border-bottom:4px solid #009fda ;
cursor: default;
}
#choose_list>.nav-tabs>li>a{
border-bottom:2px solid #009fda ;
line-height: 30px;
font-size: 14px;
color: #dde4f3;
}
#choose_list>.nav-tabs>li>a:hover{
background-color: #2B323F;
border: none;
color: #009FDA;
border-bottom:2px solid #009fda ;
}
#choose_list>.nav-tabs{
border: none;
}
#choose_list>.nav-tabs>li:first-child,
#choose_list>.nav-tabs>li:first-child>a{
padding-right: 0;
margin-right: 0;
}
#choose_list>.nav-tabs>li:last-child,
#choose_list>.nav-tabs>li:last-child>a{
padding-left: 0;
margin-left: 0;
}
.provience-list-item{
float: left;
width: 70px;
height: 30px;
background-color: #2B323F;
border: 1px solid #515C70;
line-height: 30px;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
}
#provinceList>ul{
height: 240px;
padding-left: 8px;
padding-right: 6px;
overflow-y: scroll;
}
.city-box{
height: 240px;
padding-left: 8px;
padding-right: 6px;
overflow-y: scroll;
}
::-webkit-scrollbar {/滚动条整体样式/
width: 4px; /高宽分别对应横竖滚动条的尺寸/
height: 4px;
}
::-webkit-scrollbar-thumb {/滚动条里面小方块/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}
::-webkit-scrollbar-track {/滚动条里面轨道/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(255,255,255,0.1);
}
.hr-line{
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 230px;
border-top: 1px solid #515C70;
margin-bottom: 10px;
}
.reset-btn,.cancel-btn,.affirm-btn{
width: 70px;
height: 30px;
text-align: center;
color: #fff;
font-size: 12px;
padding: 0;
}
.reset-btn{
background: linear-gradient(to top,#656b83,#8892b4);
margin-right: 6px;
}
.affirm-btn{
margin-left: 6px;
background: linear-gradient(to bottom,#04C7FF,#169AFF);
}
.choose-btn-group{
margin-left: 15px;
}
.has-choose{
/background: linear-gradient(to bottom,#04C7FF,#169AFF);/
background-image: url("…/img/choosen.png");
background-repeat: no-repeat;
background-position: right top;
background-color:#04C7FF!important;
/background-color:#169AFF;/
}
.pro-title{
padding: 0px 16px;
color: #dde4f3;
line-height: 30px;
font-size: 12px;
display: inline-block;
border-radius: 4px;
border:1px solid #515C70;
}
.city-list-item-pro{
color: #515C70;
clear: both;
}
.city-list-item-pro h5{
margin-bottom: 0;
}
.city-list-item {
float: left;
width: 70px;
height: 30px;
background-color: #2B323F;
border: 1px solid #515C70;
line-height: 30px;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
border-radius: 4px;
cursor: pointer;
overflow: hidden;
}
.city-ul-box li:last-child{
clear: right;
}
.provhidden{
display: none!important;
}
.table-plane{
background-color: #2B323F;
}
#myTable tbody tr{
height: 36px;
color: #CBD4F4;
}
#myTable thead tr th{
background-color: #101A22;
color: #CBD4F4;
}
#myTable tr.odd {
background-color: #515C70;
}
.tr-hide{
display: none!important;
}
.tr-show{
}
JS功能方法:
1、获取数据:
$(function () {
$.ajax({
url: “getCity”,
type:“post”,
success:function(result){
result = eval(’(’ + result + ‘)’)
var prodata = result.prodata?result.prodata:[];
var citydata = result.citydata?result.citydata:[];
drawChoosePage(prodata,citydata);
}
});
});
2、通过数据绘制页面
//绘制选择器
function drawChoosePage(prodata,citydata){
//省份页面
for(var i=0;i
var len = $(".choosen-list-item").length;
for(var i=0;i
});
//点击隐藏选择列表
$(function () {
var isshow = true;
$(’.choosen-list-all’).click(function () {
if(isshow){
$(".choose-city").hide();
$(".choosen-list-all").html(‘展开全部’);
isshow=false;
}else {
$(".choose-city").show();
$(".choosen-list-all").html(‘收起全部’);
isshow=true;
}
});
});
//删除已选项
function deleteChoose(){
$(".del-choosen").off(‘click’).on(‘click’,function () {
var areano = $(this).parent().data(‘area’),
level = ( t h i s ) . p a r e n t ( ) . d a t a ( ′ l e v e l ′ ) , p r o v = (this).parent().data('level'), prov= (this).parent().data(′level′),prov=(this).parent().data(‘prov’),
li = $(this).parent();
li.remove();
if(level==1){
var len = KaTeX parse error: Expected '}', got 'EOF' at end of input: … var area=(".provience-list-item").eq(i).data(‘area’);
if(area == areano){
KaTeX parse error: Expected 'EOF', got '}' at position 102: … }̲ } …(’.city-ul-box’).eq(i).data(‘area’)==areano){
$(’.city-ul-box’).eq(i).hide();
}
}
}else{
var len = KaTeX parse error: Expected '}', got 'EOF' at end of input: … var area=(".city-list-item").eq(i).data(‘area’);
if(area == areano){
KaTeX parse error: Expected 'EOF', got '}' at position 97: … }̲ } …(".choosen-list-item").eq(i).data(‘prov’)prov){
count++;
}
}
if(count0){
var hiddenlen = KaTeX parse error: Expected '}', got 'EOF' at end of input: … if((’.provhidden’).eq(i).data(‘area’)==prov){
$(’.provhidden’).eq(i).removeClass(‘provhidden’);
}
}
}
}
changeTable();
});
}
//重置选择
$(’.reset-btn’).click(function () {
$(’.choosen-list-item’).remove();
$(".choosen-list-all").html(‘全部’);
$(’.provience-list-item’).removeClass(‘has-choose’);
$(’.city-list-item’).removeClass(‘has-choose’);
$(’.city-ul-box’).hide();
$(’.city-without-prov’).show();
});
//确认选择
$(’.affirm-btn’).click(function () {
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲choose_list").f…(’.choosen-list-item’).length;i++){
if(KaTeX parse error: Expected '}', got 'EOF' at end of input: … condition[i]=(’.choosen-list-item’).eq(i).text();
}
}
//调用处理页面表格数据
clear_arr_trim(condition);
if(condition.length>0){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲myTable tbody t…(’#myTable tbody tr’).length;j++){
for(var i=0;i
if(tablecity.split(" “)[0]==condition[i] || tablecity.split(” “)[1]==condition[i]){
$(’#myTable tbody tr’).eq(j).addClass(‘tr-show’).removeClass(‘tr-hide’);
}
}
}
$(”#myTable_info").html(’’ +
‘共’ +
’ 1 ’ +
‘页,筛选之后共’ +
’ 18 ’ +
‘条,初始’ +
’ 18 ’ +
‘条’ +
‘’);
( ′ . c h a n g e − t o t a l ′ ) . h t m l ( ('.change-total').html( (′.change−total′).html((’.tr-show’).length);
( ′ . o l d − t o t a l ′ ) . h t m l ( ('.old-total').html( (′.old−total′).html((’#myTable tbody tr’).length)
}else{
$(’#myTable tbody tr’).removeClass(‘tr-hide’).removeClass(‘tr-show’);
}
}
function clear_arr_trim(array) {
for(var i = 0 ;i
if(array[i] == " " || typeof(array[i]) == “undefined”)
{
array.splice(i,1);
i= i-1;
}
}
return array;
}