利用ibeetl 实现selectpicker 的三级联动
1. js 直接写在html页面上面,ibeetl 就能够动态地利用后台传上来的model List ,不须要每次点击都要ajax请求后台javascript
2. 使用selectpicker 的时候,除了对selecct option的动态处理后,还须要html
$("#contractId").selectpicker('refresh');// 重置option项目
来重置搜索的显示行java
3. 因为使用jquery 对修改项目的监听,在处理层级的时候,就须要避免进入死循环jquery
所以不能像其余select option 那样直接使用ajax
$("#warehouseId").empty();
来处理下级筛选行,bootstrap
由于这样会形成,上级修改的时候会empty下级的option,会形成下级已经选择的项刷新,而下级监听到该id selected option 修改后,会触发上级的修改,形成死循环app
因此须要,this
还有不少小坑,就不一一细说,直接上代码spa
@layout("/common/_container.html"){
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>货主管理</h5>
</div>
<div class="ibox-content">
<div class="row row-lg">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3" >
<#NameCon id="consignerNo" name="货主代码" placeholder="输入货主代码"/>
</div>
<div class="col-sm-3" >
<#NameCon id="consignerName" name="货主名称" placeholder="输入货主名称"/>
</div>
<div class="col-sm-3" >
<#SelectCon2 id="logisticsCompanyId" name="物流公司" >
<option value=""></option>
@for(item in logistics_company_list){
<option value="${item.id}">${item.logisticsCompanyName}</option>
@}
</#SelectCon2>
</div>
<div class="col-sm-3" id="contract">
<#SelectCon2 id="contractId" name="域" >
<option value=""></option>
@for(item in contract_list){
<option value="${item.id}">${item.contract}</option>
@}
</#SelectCon2>
</div>
<div class="col-sm-3" >
<#SelectCon2 id="warehouseId" name="仓库" >
<option value=""></option>
@for(item in warehouse_list){
<option value="${item.id}">${item.warehouse}</option>
@}
</#SelectCon2>
</div>
<div class="col-sm-3" >
<#SelectCon id="status" name="状态" >
<option value=""></option>
<option value="0">未激活</option>
<option value="1">已激活</option>
</#SelectCon>
</div>
<div class="col-sm-3">
<#button name="搜索" icon="fa-search" clickFun="Consigner.search()"/>
<#button name="清空" icon="fa-trash" clickFun="Consigner.resetSearch()" space="true"/>
</div>
</div>
<div class="hidden-xs" id="ConsignerTableToolbar" role="group">
@if(shiro.hasPermission("/consigner/add")){
<#button name="添加" icon="fa-plus" clickFun="Consigner.openAddConsigner()"/>
@}
@if(shiro.hasPermission("/consigner/unfreeze")){
<#button name="激活" icon="fa-check-circle" clickFun="Consigner.unfreeze()" space="true"/>
@}
@if(shiro.hasPermission("/consigner/freeze")){
<#button name="取消激活" icon="fa-warning" clickFun="Consigner.freeze()" space="true"/>
@}
@if(shiro.hasPermission("/consigner/update")){
<input type="hidden" id="consigner_update" value="1">
@}
@if(shiro.hasPermission("/consigner/delete")){
<input type="hidden" id="consigner_delete" value="1">
@}
</div>
<#table id="ConsignerTable"/>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="${ctxPath}/static/modular/server/consigner/consigner.js"></script>
<script>
/**
* 判断是否存在option
*/
function isExistOption(id,value) {
var isExist = false;
var count = $('#'+id).find('option').length;
for(var i=0;i<count;i++)
{
if($('#'+id).get(0).options[i].value == value)
{
isExist = true;
break;
}
}
return isExist;
}
/**
* 检查originContractId 是否在对应的logisticsCompanyId
*/
function checkOriginContractIdInLogisticsCompanyId(logisticsCompanyId ,originContractId){
var isExist = false;
@for( item in contract_list){
if(logisticsCompanyId == ${item.logisticsCompanyId} ) {
if(originContractId == ${item.id}){
isExist = true;
}
}
@}
return isExist;
}
/**
* 检查originWarehouseId 是否在对应的logisticsCompanyId
*/
function checkOriginWarehouseIdInLogisticsCompanyId(logisticsCompanyId ,originWarehouseId){
var isExist = false;
@for( item in warehouse_list){
if(logisticsCompanyId == ${item.logisticsCompanyId} ) {
if(originWarehouseId == ${item.id}){
isExist = true;
}
}
@}
return isExist;
}
/**
* 检查originWarehouseId 是否在对应的contractId
*/
function checkOriginWarehouseIdIncContractId(contractId ,originWarehouseId){
var isExist = false;
@for( item in warehouse_list){
if(contractId == ${item.contractId} ) {
if(originWarehouseId == ${item.id}){
isExist = true;
}
}
@}
return isExist;
}
/**
* 第一级logisticsCompanyId 监听改变
*/
$(document).on("change",'#logisticsCompanyId',function () {
var logisticsCompanyId = $(this).val();
var originContractId = $("#contractId").val();
var originWarehouseId = $("#warehouseId").val();
if((logisticsCompanyId != null) && (logisticsCompanyId != '') ){
<!-- contractId option选项动态操做 -->
if((isExistOption('contractId' , originContractId)) && (originContractId != '') && (checkOriginContractIdInLogisticsCompanyId(logisticsCompanyId ,originContractId))){
// originContractId 存在对应option 而且为不为空'' 而且originContractId在对应的logisticsCompanyId里面 则只须要移除多于项目,
// 才能够保留默认选项显示,不做任何修改,避免死循环(修改了二级,二级监听到修改,修改一级,一级监听修改,又修改二级)
@for( item in contract_list){
if(logisticsCompanyId != ${item.logisticsCompanyId} ){
$("#contractId option[value='${item.id}']").remove();
}
@}
}else{
// originContractId 不存在对应option 或者为空'' 或originContractId不在对应的logisticsCompanyId里面 则清空option项目从新赋值
$("#contractId").empty();
$("#contractId").prepend("<option value=''></option>")
@for( item in contract_list){
if(logisticsCompanyId == ${item.logisticsCompanyId} ){
$("#contractId").append("<option value='${item.id}'>${item.contract}</option>");
}
@}
}
$("#contractId").selectpicker('refresh');// 重置option项目
<!-- contractId option选项动态操做 -->
<!-- warehouseId option选项动态操做 -->
if((isExistOption('warehouseId' , originWarehouseId)) && (originWarehouseId != '') && checkOriginWarehouseIdInLogisticsCompanyId(logisticsCompanyId , originWarehouseId)){
// warehouseId 存在对应option 而且为不为空'' 而且warehouseId在对应的logisticsCompanyId里面 则只须要移除多于项目,
@for( item in warehouse_list){
if(logisticsCompanyId != ${item.logisticsCompanyId} ){
$("#warehouseId option[value='${item.id}']").remove();
}
@}
}else{
// warehouseId 不存在对应option 或者为空''或warehouseId不在对应的logisticsCompanyId里面 则清空option项目从新赋值
$("#warehouseId").empty();
$("#warehouseId").prepend("<option value=''></option>")
@for( item in warehouse_list){
if(logisticsCompanyId == ${item.logisticsCompanyId} ){
$("#warehouseId").append("<option value='${item.id}'>${item.warehouse}</option>");
}
@}
}
$("#warehouseId").selectpicker('refresh');// 重置option项目
<!-- warehouseId option选项动态操做 -->
}else{
// logisticsCompanyId 选择空值从新配置选则项目
<!-- contractId option选项动态操做 -->
$("#contractId").empty();
$("#contractId").prepend("<option value=''></option>")
@for( item in contract_list){
$("#contractId").append("<option value='${item.id}'>${item.contract}</option>");
@}
$("#contractId").selectpicker('refresh');// 重置option项目
<!-- contractId option选项动态操做 -->
<!-- warehouseId option选项动态操做 -->
$("#warehouseId").empty();
$("#warehouseId").prepend("<option value=''></option>")
@for( item in warehouse_list){
$("#warehouseId").append("<option value='${item.id}'>${item.warehouse}</option>");
@}
$("#warehouseId").selectpicker('refresh');// 重置option项目
<!-- warehouseId option选项动态操做 -->
}
});
/**
* 第二级contractId 监听改变
*/
$(document).on("change",'#contractId',function () {
var contractId = $(this).val();
var originLogisticsCompanyId = $("#logisticsCompanyId").val()
var originWarehouseId = $("#warehouseId").val();
if((contractId != null) && (contractId != '') ) {
<!-- logisticsCompanyId option自动匹配选择 -->
@for( item in contract_list){
if(contractId == ${item.id} ){
$('#logisticsCompanyId').selectpicker('val',${item.logisticsCompanyId});
}
@}
<!-- logisticsCompanyId option自动匹配选择 -->
<!-- warehouseId option选项动态操做 -->
if((isExistOption('warehouseId' , originWarehouseId)) && (originWarehouseId != '') && (checkOriginWarehouseIdIncContractId(contractId ,originWarehouseId ))){
// warehouseId 存在对应option 而且为不为空'' 而且warehouseId在对应的contractId里面 则只须要移除多于项目,
@for( item in warehouse_list){
if(contractId != ${item.contractId} ){
$("#warehouseId option[value='${item.id}']").remove();
}
@}
}else{
// warehouseId 不存在对应option 或者为空''或warehouseId不在对应的contractId里面 则清空option项目从新赋值
$("#warehouseId").empty();
$("#warehouseId").prepend("<option value=''></option>")
@for( item in warehouse_list){
if(contractId == ${item.contractId} ){
$("#warehouseId").append("<option value='${item.id}'>${item.warehouse}</option>");
}
@}
}
$("#warehouseId").selectpicker('refresh');// 重置option项目
<!-- warehouseId option选项动态操做 -->
}else if ((originLogisticsCompanyId != null) && (originLogisticsCompanyId != '')){
// contractId 选择空值 但 originLogisticsCompanyId 不是空值 从新配置选则项目
<!-- warehouseId option选项动态操做 -->
$("#warehouseId").empty();
$("#warehouseId").prepend("<option value=''></option>")
@for( item in warehouse_list){
if(originLogisticsCompanyId == ${item.logisticsCompanyId} ){
$("#warehouseId").append("<option value='${item.id}'>${item.warehouse}</option>");
}
@}
<!-- warehouseId option选项动态操做 -->
}else{
// logisticsCompanyId 选择空值从新配置选则项目
<!-- warehouseId option选项动态操做 -->
$("#warehouseId").empty();
$("#warehouseId").prepend("<option value=''></option>")
@for( item in warehouse_list){
$("#warehouseId").append("<option value='${item.id}'>${item.warehouse}</option>");
@}
$("#warehouseId").selectpicker('refresh');// 重置option项目
<!-- warehouseId option选项动态操做 -->
}
});
/**
* 第三级warehouseId 监听改变
*/
$(document).on("change",'#warehouseId',function () {
var originLogisticsCompanyId = $("#logisticsCompanyId").val();
var origincontractId = $("#contractId").val();
var warehouseId = $(this).val();
if((warehouseId != null) && (warehouseId != '') ) {
<!-- contractId option自动匹配选择 -->
@for( item in warehouse_list){
if(warehouseId == ${item.id} ){
$('#contractId').selectpicker('val',${item.contractId});
}
@}
<!-- contractId option自动匹配选择 -->
}
});
/**
* 清空文本框内容
*/
Consigner.resetSearch = function(){
// 清空输入框内容
$(".form-control").val("");
//从新填充contractId , warehouseId 的选择
$('#logisticsCompanyId').selectpicker('val','');
// 清空下拉框内容
$(".filter-option-inner-inner").empty();
$(".bootstrap-select button:first").attr("title","");
}
</script>
@}
相关文章
- 1. 三级联动实现
- 2. Django Web实现动态三级联动
- 3. PHP ajax 实现三级联动
- 4. 城市三级联动功能实现
- 5. vue.js实现省市区三级联动
- 6. mint-ui picker 三级联动实现
- 7. java实现省市区三级联动
- 8. jQuery实现省市县三级联动
- 9. vue中实现三级联动效果
- 10. 原生js实现三级联动
- 更多相关文章...
- • Hibernate的级联与反转 - Hibernate教程
- • MyBatis级联查询 - MyBatis教程
- • ☆基于Java Instrument的Agent实现
- • Spring Cloud 微服务实战(三) - 服务注册与发现
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他进程嵌入到qt FindWindow获得窗口句柄 报错无法链接的外部符号 [email protected] 无法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的应用-TOPK问题
- 6. 实例演示ElasticSearch索引查询term,match,match_phase,query_string之间的区别
- 7. 数学基础知识 集合
- 8. amazeUI 复择框问题解决
- 9. 背包问题理解
- 10. 算数平均-几何平均不等式的证明,从麦克劳林到柯西
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 三级联动实现
- 2. Django Web实现动态三级联动
- 3. PHP ajax 实现三级联动
- 4. 城市三级联动功能实现
- 5. vue.js实现省市区三级联动
- 6. mint-ui picker 三级联动实现
- 7. java实现省市区三级联动
- 8. jQuery实现省市县三级联动
- 9. vue中实现三级联动效果
- 10. 原生js实现三级联动