记录一次实现且或逻辑关系功能

朱雀 2022-05-15 13:48 217阅读 0赞

原本是个很复杂得且或逻辑关系运算，可实现且或多层逻辑功能，经过产品沟通目前仅需实现，组间或，组内且得逻辑关系，功能效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDQwMzUy_size_27_color_FFFFFF_t_70][]

作为开发人员时刻谨记不能盲目开发，接到需求功能首先想到这个功能有什么意义，怎么去实现，难点儿在哪里？

这个功能主要是为了实现资质得可配化逻辑，纯js、css技术，难点儿在于怎么分割存入数据库，

1.css如下:

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.增加组内且逻辑：

3.2.增加组间逻辑：

4.删除逻辑：

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');  
                    \});  
                \}  
            \});  
        \});

//判断两组数据是否相同

6.保存功能：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDQwMzUy_size_27_color_FFFFFF_t_70]: /images/20220503/240ee3959d124e2092c55cc5367e99bf.png