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
  • 相关阅读:
    C# 实现任务栏图标程序
    C#实现的木马之客户端
    sql基本语法
    水晶报表引用DataSet做数据源
    解决多线程操作控件时可能出现的异常:“在某个线程上创建的控件不能成为在另一个线程上创建的控件的父级”
    电子书籍制作工具软件大全
    C#实现的木马之服务端
    2进制、8进制、10进制、16进制...各种进制间的轻松转换
    VC# .Net中使用Crystal Report水晶报表
    P2P技术学习
  • 原文地址:https://www.cnblogs.com/PPBoy/p/10469699.html
Copyright © 2011-2022 走看看