zoukankan      html  css  js  c++  java
  • js控制多层单选,多选按钮,做隐藏操作

    项目中遇到多层级单选,多选按钮的置灰/隐藏操作。特意写了一个公用组件:

    //置灰方式
    //controllerArr数组添加如下数据:
    //{ctrlName:"gds_anquanyuanshishi", hidType:1, hidArr:[{hidKey:"其他", hidName:"gds_qitashishi"},{hidKey:"aa", hidName:"gds_qitashishi1"}]}
    //ctrlName:radio名字
    //hidType:隐藏方式:1:disabled,2:hidden。
    //hidArr:需要控制的数组 hidKey:需要匹配的值 hidName:需要隐藏的input
    
    /*
    
    是radio时
        遍历规则 找到匹配checkbox的规则项
            匹配到key而且是checked时,隐藏框置亮, 遍历规则,找到对应的隐藏框
            否则
                隐藏级是text
                    清空置灰
                隐藏级是radio
                    遍历radio
                        是checked
                            全部置灰
                            触发事件
                隐藏级是checkbox
                    遍历checkbox隐藏级
                        状态是checked
                            触发click事件
    是checkbox时
        遍历规则 找到匹配checkbox的规则项
            是checked时,隐藏框置亮
            否则
                隐藏级是text
                    清空置灰
                隐藏级是radio
                    遍历radio
                        是checked
                            全部置灰
                            触发事件
                隐藏级是checkbox
                    遍历checkbox隐藏级
                        状态是checked
                            触发click事件
    */
    var HidItemUtil = {
        hidType : 1,//隐藏方式:1:disabled, 2:display
        controllerArr : [],
        doHidItem : function(item, hidType){
            var _self = this;
            hidType = typeof hidType == "undefined" ? _self.hidType : hidType;
            if(hidType == 1)
                item.prop("disabled", "disabled");
            else
                item.hide();
        },
        doShowItem : function(item, hidType){
            var _self = this;
            hidType = typeof hidType == "undefined" ? _self.hidType : hidType;
            if(hidType == 1)
                item.prop("disabled", "");
            else
                item.show();
        },
        initHidList : function(controllerObj){
            var _self = this;
            $.each(controllerObj.hidArr, function(){
                var hidType = typeof this.hidType != "undefined" ? this.hidType:controllerObj.hidType;
                _self.itemsHide(this.hidName, hidType);
            });
        },
        itemsShow : function(hidNameList, hidType){
            var _self = this;
            $.each(hidNameList, function(i, itemName){
                _self.doShowItem($("[name$='" + itemName + "']"), hidType);
            });
        },
        itemsHide : function(hidNameList, hidType){
            var _self = this;
            $.each(hidNameList, function(i, itemName) {
                $("[name$='" + itemName + "']").each(function (i) {
                    if ($(this).prop("type") == "radio") {
                        $(this).prop("checked", false);
                        $(this).trigger("change");
                    } else if ($(this).prop("type") == "checkbox") {
                        if ($(this).prop("checked")) {
                            $(this).click();
                        }
                    } else if ($(this).prop("type") == "text") {
                        $(this).val("");
                    }
                    _self.doHidItem($(this), hidType);
                });
            });
        },
        run : function(){
            var _self = this;
            if(_self.controllerArr.length == 0){return;}
            for(var i = 0; i < _self.controllerArr.length; i++){
                var controllerObj = _self.controllerArr[i];
                _self.initHidList(controllerObj);
    
                $("[name$='"+controllerObj.ctrlName+"']").on("change", controllerObj, function(obj){
                    var self = $(this);
                    var ctrlObj = obj.data;
                    var hidType = ctrlObj.hidType;
                    if(self.prop("type") == "radio"){ //radio时判断
                        for(var x=0; x<ctrlObj.hidArr.length; x++){
                            var hideObj = ctrlObj.hidArr[x];
                            hidType = typeof hideObj.hidType != "undefined" ? hideObj.hidType:hidType;
                            if($(this).val() == hideObj.hidKey && $(this).prop("checked")){ //$(this)是checked项
                                _self.itemsShow(hideObj.hidName, hidType);
                            }else{
                                _self.itemsHide(hideObj.hidName, hidType);
                            }
                        }
                    }else if(self.prop("type") == "checkbox"){//checkbox时判断
                        for(var j=0; j<ctrlObj.hidArr.length; j++){
                            var hideObj = ctrlObj.hidArr[j];
                            hidType = typeof hideObj.hidType != "undefined" ? hideObj.hidType:hidType;
                            if(self.val() == hideObj.hidKey){
                                if(self.prop("checked")){
                                    _self.itemsShow(hideObj.hidName, hidType);
                                }else{
                                    _self.itemsHide(hideObj.hidName, hidType);
                                }
                            }
                        }
                    }
                });
            }
        }
    };
    View Code

    调用方式:

    <script>
    $(document).ready(function(){
        HidItemUtil.controllerArr.push({
            ctrlName:"gds_ffshebei",
            hidArr:[{
                hidKey:"发放三合一红盘",
                hidName:["gds_hpbmbh","gds_hpsq"]
            },{
                hidKey:"发放三合一设备",
                hidName:["gds_sbbmbh","gds_sbsq"]
            },{
                hidKey:"发放其他设备",
                hidName:["gds_qtsbqibmbh","span1",'gds_ysmiji','gds_xmiji']
            },{
                hidKey:"按申请要求配置相关端口及策略",
                hidName:["gds_celue"]
            },{
                hidKey:"其他",
                hidName:["gds_qita"]
            }]
        });
        HidItemUtil.controllerArr.push({
            ctrlName:"gds_qtsbqibmbh",
            hidArr:[{
                hidKey:"转换线",
                hidName:["gds_qtsbzhxbmbh"]
            },{
                hidKey:"外接光驱",
                hidName:["gds_qtsbwjgqbmbh"]
            },{
                hidKey:"其他",
                hidName:["gds_sbbmbhqt","p1","level3"]
            }]
        });
        HidItemUtil.controllerArr.push({
            ctrlName:"level3",
            hidArr:[{
                hidKey:"选择1",
                hidName:["level41"]
            },{
                hidKey:"选择2",
                hidName:["level42"]
            },{
                hidKey:"选择3",
                hidName:["level43"]
            }]
        });
        HidItemUtil.run();
    });
    
    </script>
    View Code

    组件根据name匹配,html如下:

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="jquery-1.10.2.min.js" ></script>
    <script src="HidItemUtil.js" ></script>
    
    <script>
    $(document).ready(function(){
        HidItemUtil.controllerArr.push({
            ctrlName:"gds_ffshebei",
            hidArr:[{
                hidKey:"发放三合一红盘",
                hidName:["gds_hpbmbh","gds_hpsq"]
            },{
                hidKey:"发放三合一设备",
                hidName:["gds_sbbmbh","gds_sbsq"]
            },{
                hidKey:"发放其他设备",
                hidName:["gds_qtsbqibmbh","span1",'gds_ysmiji','gds_xmiji']
            },{
                hidKey:"按申请要求配置相关端口及策略",
                hidName:["gds_celue"]
            },{
                hidKey:"其他",
                hidName:["gds_qita"]
            }]
        });
        HidItemUtil.controllerArr.push({
            ctrlName:"gds_qtsbqibmbh",
            hidArr:[{
                hidKey:"转换线",
                hidName:["gds_qtsbzhxbmbh"]
            },{
                hidKey:"外接光驱",
                hidName:["gds_qtsbwjgqbmbh"]
            },{
                hidKey:"其他",
                hidName:["gds_sbbmbhqt","p1","level3"]
            }]
        });
        HidItemUtil.controllerArr.push({
            ctrlName:"level3",
            hidArr:[{
                hidKey:"选择1",
                hidName:["level41"]
            },{
                hidKey:"选择2",
                hidName:["level42"]
            },{
                hidKey:"选择3",
                hidName:["level43"]
            }]
        });
        HidItemUtil.run();
    });
    
    
    
    
    </script>
    <tr style="height:23px;">
        <td class="formInput" style="word-break:break-all;border-color:#666666;" rowspan="1" colspan="5">
            <p>
                <label><input name="m:gds_wcxdsmjsjspjjc:gds_ffshebei" type="checkbox" value="发放三合一红盘" validate="{}" />发放三合一红盘 保密编号</label><span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="a1" name="m:gds_wcxdsmjsjspjjc:gds_hpbmbh" class="inputText" style="200px;" type="text" isflag="tableflag" lablename="红盘保密编号" validate="{maxlength:100}" />     授权<span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="a2" name="m:gds_wcxdsmjsjspjjc:gds_hpsq" class="inputText" style="200px;" type="text" isflag="tableflag" lablename="红盘授权" validate="{maxlength:100}" /></span></span>
            </p>
            <p>
                <label><input name="m:gds_wcxdsmjsjspjjc:gds_ffshebei" type="checkbox" value="发放三合一设备" validate="{}" />发放三合一设备 保密编号</label><span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="b1" name="m:gds_wcxdsmjsjspjjc:gds_sbbmbh" class="inputText" style="200px;" type="text" isflag="tableflag" lablename="设备保密编号" validate="{maxlength:100}" />     授权<span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="b2" name="m:gds_wcxdsmjsjspjjc:gds_sbsq" class="inputText" style="200px;" type="text" isflag="tableflag" lablename="设备授权" validate="{maxlength:100}" /></span></span>
            </p>
            <p>
                <label><input name="m:gds_wcxdsmjsjspjjc:gds_ffshebei" type="checkbox" value="发放其他设备" validate="{}" />发放其他设备</label>
                <p>
                    <label><input name="m:gds_wcxdsmjsjspjjc:gds_qtsbqibmbh" type="radio" value="转换线" validate="{}" id="g1" />转换线</label>
                    <span style="display:inline-block;" name="span1" isflag="tableflag"><input id="c1" name="m:gds_wcxdsmjsjspjjc:gds_qtsbzhxbmbh" class="inputText" style="100px;" type="text" isflag="tableflag" lablename="其他设备转换线保密编号" validate="{maxlength:50}" /></span>
                    <label><input name="m:gds_wcxdsmjsjspjjc:gds_qtsbqibmbh" type="radio" value="外接光驱" validate="{}" id="g2" />外接光驱</label>
                    <span style="display:inline-block;" name="span1" isflag="tableflag"><input id="c2" name="m:gds_wcxdsmjsjspjjc:gds_qtsbwjgqbmbh" class="inputText" style="100px;" type="text" isflag="tableflag" lablename="其他设备外接光驱保密编号" validate="{maxlength:100}" /></span>
    
                    <label><input name="m:gds_wcxdsmjsjspjjc:gds_qtsbqibmbh" type="radio" value="其他" validate="{}" id="g3" />其他</label>
                    <span style="display:inline-block;" name="span1" isflag="tableflag">
    
                        <input id="c3" name="m:gds_wcxdsmjsjspjjc:gds_sbbmbhqt" class="inputText" style="100px;" type="text" isflag="tableflag" lablename="设备保密编号其他" validate="{maxlength:100}" />
                        <p name="p1">
                        <label><input name="m:gds_wcxdsmjsjspjjc:level3" type="checkbox" value="选择1" validate="{}" />选择1</label><span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="e4" name="m:gds_wcxdsmjsjspjjc:level41" class="inputText" style="200px;" type="text" isflag="tableflag" lablename="其他" validate="{maxlength:100}" /></span>
                        <label><input name="m:gds_wcxdsmjsjspjjc:level3" type="checkbox" value="选择2" validate="{}" />选择2</label><span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="e2" name="m:gds_wcxdsmjsjspjjc:level42" class="inputText" style="200px;" type="text" isflag="tableflag" lablename="其他" validate="{maxlength:100}" /></span>
                        <label><input name="m:gds_wcxdsmjsjspjjc:level3" type="checkbox" value="选择3" validate="{}" />选择3</label><span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="e3" name="m:gds_wcxdsmjsjspjjc:level43" class="inputText" style="200px;" type="text" isflag="tableflag" lablename="其他" validate="{maxlength:100}" /></span>
                        </p>
                    </span>
                </p>
            </p>
            <p>
                <label><input name="m:gds_wcxdsmjsjspjjc:gds_ffshebei" type="checkbox" value="按申请要求配置相关端口及策略" validate="{}" />按申请要求配置相关端口及策略</label><span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="d1" name="m:gds_wcxdsmjsjspjjc:gds_celue" class="inputText" style="200px;" type="text" isflag="tableflag" lablename="策略" validate="{maxlength:100}" /></span>
            </p>
            <p>
                <label><input name="m:gds_wcxdsmjsjspjjc:gds_ffshebei" type="checkbox" value="发放红黑电源" validate="{}" />发放红黑电源</label>
            </p>
            <p>
                <label><input name="m:gds_wcxdsmjsjspjjc:gds_ffshebei" type="checkbox" value="其他" validate="{}" />其他</label><span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="e1" name="m:gds_wcxdsmjsjspjjc:gds_qita" class="inputText" style="200px;" type="text" isflag="tableflag" lablename="其他" validate="{maxlength:100}" /></span>
            </p>
        </td>
    </tr>
    View Code
  • 相关阅读:
    30流的使用和分类
    使用EF Model First创建edmx模型,数据库有数据的情况下,如何同时更新模型和数据库
    29防止程序集被篡改仿冒,全局程序集缓存GAC
    报错:不允许保存更改。您所做的更改要求删除并重新创建以下表……
    28先判断是否存在,再创建文件夹或文件,递归计算文件夹大小
    27程序集资源
    MVC缓存02,使用数据层缓存,添加或修改时让缓存失效
    26复杂类型比较,使用Compare .NET objects组件
    25LINQ拾遗及实例
    MVC缓存01,使用控制器缓存或数据层缓存
  • 原文地址:https://www.cnblogs.com/PPBoy/p/10469699.html
Copyright © 2011-2022 走看看