2021-07-07选中互斥问题
如图所示,我们想做一个对区县进行排名次的一个小功能。
比如,我们事先选好了【高新区第一名】,在我们想要切换为【寒亭区第一名】或者是【高新区第六名】,【高新区第一名】的选中状态都要被清除,反过来也一样。这就要同时考虑横向互斥和纵向互斥了。
css代码:
.check{
background: url(/qlc/static/images/duihao.png) no-repeat center;
}
html代码:
<tr>
<td class="tdbk" rowspan="2">排名</td>
<td class="tdbk" :colspan="cpdxList.length">测评对象</td>
</tr>
<tr>
<template v-for="cpdx in cpdxList">
<td class="tdbk">{{clean(cpdx.MC)}}</td>
</template>
</tr>
<tr v-for="i in cpdxList.length">
<td class="tdbk">{{i}}</td>
<template v-for="(cpdx,index) in cpdxList">
<td align="center" :id="clean(cpdx.ID)+'~'+i" :name="clean(cpdx.ID)" @click="getCheck($event)" :title="i">
</td>
</template>
</tr>
js代码:
getCheck(e){//e为$event 也就是当前触发的是什么事件(比如鼠标事件)
$(e.target).attr("class");//$event.target为该鼠标事件触发的目标
var classStyle = clean($(e.target).attr("class"));
var id = $(e.target).attr("id"); //此id为鼠标点击这一个元素(比如单元格)的id
var dxid = id.split("~")[0];//选中的区县的id
var pm = id.split("~")[1];//选中的区县的排名
if(classStyle.includes("check")){//说明这个元素已经选中了,再次点击需要清除选中状态
$(e.target).attr("class","");
fVue.mxList.forEach(function(mx){
if(clean(mx.CPDX_ID) == dxid){
mx.PM = "";
}
});
}else{//说明这个元素此时没选中,再次点击会选中
var flag = true;
for(var i = 0; i < fVue.mxList.length; i++) {
var mx = fVue.mxList[i];
//如果排名相等说明有人已经选择该排名,需要重新选择
if(clean(mx.PM) == pm){//横向互斥
$($("td[name='"+mx.CPDX_ID+"']")[pm - 1]).attr("class","");//已选中的清除选中状态
}
}
if(flag){
for(var i = 0; i < fVue.mxList.length; i++) {
var mx = fVue.mxList[i];
if(clean(mx.CPDX_ID) == dxid){//纵向互斥
mx.PM = pm;
$(e.target).attr("class","check");
$("td[name='"+dxid+"']").each(function(i){//因为纵向的dxid都是一样的,所以需要遍历
if(id != $(this).attr("id")){//除了当前选中的这个单元格,其余的全部都取消选中
$(this).attr("class","");
}
});
}
}
}
}
}
其中html代码中的【cpdxList】和js代码中出现的【mxList】都是List