1. js 直接写在html页面上面,ibeetl 就可以动态地利用后台传上来的model List ,不需要每次点击都要ajax请求后台
2. 使用selectpicker 的时候,除了对selecct option的动态处理后,还需要
$("#contractId").selectpicker('refresh');// 重置option项目来重置搜索的显示行
3. 由于使用jquery 对修改项目的监听,在处理层级的时候,就需要避免进入死循环
因此不能像其他select option 那样直接使用
$("#warehouseId").empty();来处理下级筛选行,
因为这样会造成,上级修改的时候会empty下级的option,会造成下级已经选择的项刷新,而下级监听到该id selected option 修改后,会触发上级的修改,造成死循环
所以需要,
还有很多小坑,就不一一细说,直接上代码
@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>
@}