原本是个很复杂得且或逻辑关系运算，可实现且或多层逻辑功能，经过产品沟通目前仅需实现，组间或，组内且得逻辑关系，功能效果图如下：
作为开发人员时刻谨记不能盲目开发，接到需求功能首先想到这个功能有什么意义，怎么去实现，难点儿在哪里？
这个功能主要是为了实现资质得可配化逻辑，纯js、css技术，难点儿在于怎么分割存入数据库，
1.css如下:
<style type="text/css"> .and{ padding:0px 15px 15px; border: 1px dashed #5fd67e; background-color: aliceblue; margin-top:15px; } .and li{ margin-top:15px; } .and li a{ margin-left:15px; } .or{ margin-bottom:50px; } </style>
2.html如下:
<table class="sag_edit_table"> <tr> <td id="zz"> <c:if test="${empty expressionEXC}"> <ul class="and"> <li> <select name="goodsCateQualificationVO.qualifications" required="true"> <option value="-1">----请选择----</option> <c:forEach items="${qualificationTypeList}" var="qualificationVO" varStatus="sta"> <option value="${qualificationVO.qualificationCode}">${qualificationVO.qualificationName}</option> </c:forEach> </select> <a class="del_btn" οnclick="deleteItem(this);">删除本组</a> <a id="and_btn" οnclick="addAnd(this)">且关系创建</a> </li> </ul> </c:if> <ul class="or"> <li> <br> <a id="or_btn" οnclick="addOr();">或关系创建</a> </li> </ul> </td> </tr> </table>
3.1.增加组内且逻辑：
function addAnd(that){ var str = '<li>' + '<select name="goodsCateQualificationVO.qualifications" required="true">' + '<option value="-1">----请选择----</option>' + '<c:forEach items="${qualificationTypeList}" var="qualificationVO" varStatus="sta">' + '<option value="${qualificationVO.qualificationCode}">${qualificationVO.qualificationName}</option>' + '</c:forEach>' + '</select>' + '<a class="sag_btn" οnclick="deleteItem(this);">删除</a>' + '</li>'; var strObj=$(str); var strLength=strObj.find('select[name="goodsCateQualificationVO.qualifications"]>option').length; var thatLength=$(that).parent().parent().find('li>select[name="goodsCateQualificationVO.qualifications"]').length+1; if(strLength>thatLength){ $(that).parent().parent().find('li>select[name="goodsCateQualificationVO.qualifications"]').each(function(){ var liSelect=$(this).val(); if(liSelect!='-1'){ strObj.find('option[value="'+liSelect+'"]').css('display','none'); } }); $(that).parent().parent().append(strObj); }else{ sagalert('提示','资质共'+(strLength-1)+'种，本组已添加'+(thatLength-1)+'种，已无资质可添加！'); } }
3.2.增加组间逻辑：
function addOr() { var st = '<ul class="and">' + '<li>' + '<select name="goodsCateQualificationVO.qualifications" required="true">' + '<option value="-1">----请选择----</option>' + '<c:forEach items="${qualificationTypeList}" var="qualificationVO" varStatus="sta">' + '<option value="${qualificationVO.qualificationCode}">${qualificationVO.qualificationName}</option>' + '</c:forEach>' + '</select>' + '<a class="del_btn" οnclick="deleteItem(this);">删除本组</a>' + '<a οnclick="addAnd(this)">且关系创建</a>' + '</li>' + '</ul>'; /* var stLength=$(st).find('select[name="goodsCateQualificationVO.qualifications"]>option').length-1; var andLength=$('#zz').find('.and').length+1; if(andLength>stLength) sagalert('提示','关系组合共'+stLength+'种，已添加'+(andLength-1)+'种，已无关系组合可添加！'); else */ $('.or').before(st); }
4.删除逻辑：
function deleteItem(obj){ if($(obj).attr('class')=='del_btn'){ /* var andLength=$('#zz').find('.and').length; if(andLength==1){ sagalert('提示','请至少保留一组资质！'); }else */ $(obj).parent().parent()._release(); }else{ var selectVal=$(obj).parent().find('select').val(); if(selectVal!=-1){ $(obj).parent().parent().find('li>select[name="goodsCateQualificationVO.qualifications"]').each(function(){ $(this).find('option[value="'+selectVal+'"]').css('display',''); }); } //组间检查 var thisAnd=$(obj).parent().parent(); var selectList=new Array(); thisAnd.find('li>select[name="goodsCateQualificationVO.qualifications"]').not($(obj).parent().find('select')).each(function(){ if($(this).val()!='-1') selectList.push($(this).val()); }); $('#zz').find('.and').not(thisAnd).each(function(){ var thisList=new Array(); $(this).find('li>select[name="goodsCateQualificationVO.qualifications"]').each(function(){ if($(this).val()!='-1') thisList.push($(this).val()); }); if(equalsArray(selectList,thisList)){ sagalert('提示','删除后重复组资质！请重新选择删除！'); return false; }else{ $(obj).parent()._release(); } }); } }
5.组能更改，并限制组内相同，组间相同：
$(document).on('change','select[name="goodsCateQualificationVO.qualifications"]',function(){ //组内检查 var selectVal=$(this).val(); var selectObj=$(this); var selectList=new Array(); $(this).parent().parent().find('li>select[name="goodsCateQualificationVO.qualifications"]').each(function(){ if($(this).val()!='-1') selectList.push($(this).val()); $(this).find('option').css('display',''); }); $(this).parent().parent().find('li>select[name="goodsCateQualificationVO.qualifications"]').each(function(){ var thisSelectVal=$(this).val(); for(var i=0;i<selectList.length;i++){ if(thisSelectVal!=selectList[i]) $(this).find('option[value="'+selectList[i]+'"]').css('display','none'); } }); //组间检查 var thisAnd=$(this).parent().parent(); $('#zz').find('.and').not(thisAnd).each(function(){ var thisList=new Array(); $(this).find('li>select[name="goodsCateQualificationVO.qualifications"]').each(function(){ if($(this).val()!='-1') thisList.push($(this).val()); }); if(equalsArray(selectList,thisList)){ sagalert('提示','重复组资质！请重新选择！',function(){ selectObj.val('-1'); }); } }); });
//判断两组数据是否相同
function equalsArray(n1,n2){ n1=n1.sort(); n2=n2.sort(); if(n1.length==n2.length&&n1.length){ var bool=true; $.each(n1,function(i,value){ if(value!=n2[i]) bool=false; }); if(bool) return true; else return false; }else return false; }
6.保存功能：
function save(){ var expression="("; $('select[name="goodsCateQualificationVO.qualifications"]').each(function(){ if($(this).parent().parent().children('li').length==1) expression+=")("+$(this).val()+")"; else if($(this).parent().children('a[class="del_btn"]').length) expression+=")("+$(this).val(); else expression+=" and "+$(this).val(); }); expression+=")"; expression=expression.replace(/\(\)/g,'').replace(/\)\)/g,')').replace(/\)\(/g,') or ('); var params={ data:$("form").serialize()+"&goodsCateQualificationVO.expression="+expression } sagDispatch('updateCateQualification.do',params.data,function(){parent.document.forms[0].submit();}); }
