• 0
  • 0

jQuery手机移动端多级联动异步加载组件

2020-06-05 69 0 admin 所属分类:Javascript

原始模板

修改后的模板

从网站找了个JQ多级联动组件,做了一些修改

新增功能如下

① 支持多级联动,最多支持4级

② 实现异步加载下级元素,提供缓存机制,对已获取的数据缓存在JS中

③ 支持重新唤起筛选

④ 支持初始化分类设置

⑤ 去除部分元素 保留核心功能

⑥ 支持自定义主标题和子标题


兼容样式 

.ui-form-item input, .ui-form-item textarea {
 text-align: left;
 width: 100%;
 min-height: 25px;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-appearance: none;
 border: 0;
 background: 0 0;
 padding-left: 0;
 font-family: inherit;
 font-size: inherit;
 font-style: inherit;
 font-weight: inherit;
 outline: 0;
 font-size: 1rem;
}
.ui-form-item input, .ui-form-item input:focus, .ui-form-item input:active {
 user-select: text;
}
ul.area-list, li {
 list-style: none outside none;
}
.area-list ,.area-list li {
 padding: 0 10px;
 margin: 0;
 font-size: 14px;
 height: 44px;
 line-height: 44px;
}
.selet-area-wrap span {
 font-size: 14px;
 top: 10px;
}
.selet-area-wrap span.current:before {
 top: 24px;
}
.selet-area-wrap p {
 padding: 0;
 margin: 0;
}

使用演示

设定目标input元素 用如下css代码美化

<div class="item-content ui-select">
    <input class="inpu-box" id="expressArea1" data-name="custRa" data-required="true" data-label="居住地址" placeholder="选择省市区" readonly style="padding-left:0;">
</div>

引入JQ组件 

<script type="text/javascript" src="/assets/js/jquery-1.7.2.min.js"></script>

引入修改后的jquery.area组件 

<script src="/assets/js/area/jquery.area.js" type="text/javascript" charset="utf-8"></script>

初始化多级分类组件 传入json对象 在回调函数中实现每一级的列表对象集合,每个对象得包括 id,pid,name三个字段 

var mul_type = new mulTypes({'level':4,'selector':'.inpu-box','title':'选择省市区','sub_title':'选择省份/地区','callback':function(pid,callBack){
 //获取分类的函数
 $.post('/plugin.php?id=jy_yd:api&mod=types',{
  pid:pid,
 },function(res){
  if (res.status==1) {
   callBack(res.data);
  }
 })
}});


 json对象的参数如下

字段解释说明
level_1第一级元素集合{'id':'1','pid':0,'name':'aaa'},{},......] 可选不传入将异步加载
level_2第二级元素集合 与level1不同存放第二层列表 里面是 保留是一级PID:{数据}
level_3同上保留是二级PID:{数据}
level_4同上保留是三级PID:{数据}
level支持的分类级数默认支持三级分类
title主标题可为空
sub_title子标题可为空
selector绑定在input上的目标选择器样式必填 如 .myclass
callback回调函数如果需要异步加载必须在外部实现

外部常用操作

获取最终分类ID 最后一级的ID值 getLastResult()

初始化分类内容 showResult(data) data数据为数组 里面依次存储每一级的对象数据 [{'id':'','pid':'','name':''},{},{},{}]

返回分类结果 存储每一级的元素内容 返回数组 getResult()

 

 

 

返回顶部