ops-web运维平台-create.jsp-mootools下拉框-复选框

浏览数：26 / 时间：2015年06月09日

create.jsp页面的，body部分

<body onload="Page.init(‘${pageError}‘,‘${pageMessage}‘,${isSubmit},true)">
        <div id="title">${pageTitle}</div>
        <s:form id="MYFORM" action="%{pageAction}" method="post" theme="simple">
        <div id="content">
            <table>
         
       　　　　<!-- 仅仅是一个例子-->
                <tr>
                    <th width="13%">设备所有权类型:</th>
                    <td width="35%">
                        <s:select name="deviceInfo.owenerType" 
                            id="ownerType"
                            list="owenerTypeList" 
                            listKey="realValue"
                            listValue="displayValue"
                            headerKey=""
                            headerValue="请选择"/>
                    </td>  
                </tr>
               
                <tr >
                    <td colspan="4" width="100%">&nbsp; </td>
                </tr>
                
                <tr >
                    <th width="13%">设备类型-模块信息</th>
                    <td id="modelpart" colspan="3" >
                        
                    </td>
                </tr>
            </table>
        </div>
        <div id="operator">
            <div class="left"></div>
            <div class="middle" onclick="Page.submit()">提交</div>
            <div class="right"></div>
            <div class="left"></div>
            <div class="middle" onclick="Page.close()">关闭</div>
            <div class="right"></div>
        </div>
        </s:form>
    </body>

　　js-mootools框架-实现的功能：

　　根据下拉框选中的类型，生成复选框，放到<td id="modelpart" colspan="3" > </td>里面

head部分的 javascript，是mootools实现的

        
        <script type="text/javascript" >
        
             window.addEvent(‘domready‘, function(){
                 
                 /**
                  * 对于选中下拉框进行ajax异步请求的操作
                  */
                  
                  //这个是获取到 设备类型 隐藏域字段
                  $$("#content #ownerType").addEvent(‘change‘,function(event){
                         
                     
                     if($(this).value==""){
                         //清空元素
                         var td=$$("#content tr #modelpart");
                         td.set("html","")
                         return;
                     }else{
                         
                        var jsonRequest = new Request.JSON({
                            url: ‘deviceinfo!loadDeviceModelByType.jspa‘,
                            onSuccess: function(responseJSON, responseText){
                                    
                                    var td=$$("#content tr #modelpart");
                                    td.set("html",""); //清空子元素
                                       responseJSON.each(function(item,index){
                                           //生成checkbox
                                           var checkbox=new Element(‘input‘,{id:"checkbox"+index,type:"checkbox", "class":"checkbox" ,checked:"true"});
                                           
                                           //追加到 td中 //括号里面是当前元素 
                                           var label=new Element("label",{"for":"checkbox"+index,text:item.displayValue+"  "});
                                           td.adopt(checkbox); //这才是追加元素的方式
                                           td.adopt(label);
                                       
                                       });
                                       
                                       
                                },
                            onFailure: function(xhr){
                                    alert(xhr);
                                }
                            }).post({‘deviceType‘: ‘1‘});
                          
                          
                     }
                     
                  });
                  
                  
             });
        </script>