记录一次实现且或逻辑关系功能
原本是个很复杂得且或逻辑关系运算,可实现且或多层逻辑功能,经过产品沟通目前仅需实现,组间或,组内且得逻辑关系,功能效果图如下:
作为开发人员时刻谨记不能盲目开发,接到需求功能首先想到这个功能有什么意义,怎么去实现,难点儿在哪里?
这个功能主要是为了实现资质得可配化逻辑,纯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" onclick="deleteItem(this);">删除本组</a>
<a id="and_btn" onclick="addAnd(this)">且关系创建</a>
</li>
</ul>
</c:if>
<ul class="or">
<li>
<br>
<a id="or_btn" onclick="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" onclick="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" onclick="deleteItem(this);">删除本组</a>' +
'<a onclick="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();});
}