ops-web运维平台data.jsp-jquery-mootools

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

data.jsp页面, 下面列出的是 <body>部分

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  
    <body>
        <table id="content">
            <tr id="title">
                <th width="11%" title="设备ID">设备ID</th> 
                <th width="12%" title="设备名称">设备名称</th>
                <th width="11%" title="设备状态">设备状态</th>
        　　　　　<!--  其它字段略去 -->
                <th width="11%" title="授权码">授权码</th>
                <th width="11%" title="审批状态">审批状态</th>
            </tr>
            
　　　　　　　　<!-- 会调用后台 action的 getDeviceTypeList()方法-->
            <s:set name="deviceTypeResource" value="deviceTypeList"/>
            <s:set name="deviceStateResource" value="deviceStateList"/>
        
        
            <s:iterator value="dataList"> 
                <tr class="mouseOut" onmouseover="Mouse.over(this)" 
                onmouseout="Mouse.out(this)" onmousedown="Mouse.down(this)"
                ondblclick="Buttondata.dbclick(this)">
                
                 <td title="${deviceId}">${deviceId}</td>
                 <td title="${deviceName}">${deviceName}</td>
                
                <td title="<h:resource list="deviceStateResource" value="deviceState"/>">
                    <h:resource list="deviceStateResource" value="deviceState"/>
                </td>
               
               <!-- 其它略去-->
                
                <td title="${licenseKey}">${licenseKey}</td>
                
                <td title="${approvalState}">
                    <h:resource list="deviceApprovalStateList" value="approvalState"/>
　　　　　　　　　　　
                  　<!-- <s:hidden /> 会自动将设置id值，id值与name值一样，如果没有认为指定的话-->
 
                    <s:hidden name="approvalState" />
                    <s:hidden name="deviceState" />
                    <s:hidden name="licenseKey" />
                </td>
　　　　　　　　　　<!-- 选中该记录后，进行其它操作，如更新 查看 删除 会将deviceId传递到action中，多个参数用& 分割 -->

                <td id="params" class="hidden">deviceId=${deviceId}</td>
            </tr>
            </s:iterator>
        </table>
    </body>
</html>

data.jsp页面, 下面列出的是 <head>部分, 里面有js 先列出 jQuery实现

界面上原子操作菜单按钮是如下的形式

<div>
　　<a code="${permisCode}" href="#" style="background-image:url(‘${imageUrl}‘)"
                onclick="ThirdMenu.click(‘${permisUrl}‘, ‘${permisName}‘, ‘${permisId}‘, ‘${showType}‘)" 
                onfocus="this.blur()">${permisName}
　　</a>
</div>

jQuery实现，未必对应这个界面，方法都是一样的

<script type="text/javascript">
            $(document).ready(function(){
                $("#content tr.data").mousedown(function(e){
                    auditFlag = $(this).find(‘>td input[id="auditFlag"]‘).val()
                    status = $(this).find(‘>td input[id="status"]‘).val()
                   
                    showButton(false,‘DEVICEINFO_SIGN‘)
                        // 列一个调用showButton即可
                });
            })
            
            function showButton(show, code){
                btn = $(parent.parent.document).find(‘#THIRDMENUFRAME‘).contents().find(‘a[code="‘+code+‘"]‘);
                if(show){
                    btn.show()
                } else {
                    btn.hide()
                }
            }
        </script>

mootools实现，未必对应这个界面，方法都是一样的

界面上原子操作菜单按钮是如下的形式

<div>
    <a code="${permisName}" href="#" style="background-image:url(‘${imageUrl}‘)"
                onclick="ThirdMenu.click(‘${permisUrl}‘, ‘${permisName}‘, ‘${permisId}‘, ‘${showType}‘)" 
                onfocus="this.blur()">${permisName}
    </a>
</div>

        <script type="text/javascript">
        
        
            window.addEvent(‘domready‘, function() {
                
                //初始化时只加载新建，修改，删除，查看功能
                
                //其它按钮请自己加
                showButton(false,"生成授权码");
               //鼠标点击某一条记录
                $$("#content tr.mouseOut").addEvent(‘mousedown‘,function(event){
                    
                    //感觉不能使用  ">td input[id=‘approvalState‘]"
                   //设备状态
                    var stateFlag = $(this).getElement(‘td input[id="deviceState"]‘).value;
                    //licenseKey 授权码 
                    var licenseKey = $(this).getElement(‘td input[id="licenseKey"]‘).value;
                    
                    if(licenseKey==""){
                        //授权码为空是，生成授权码按钮可以使用
                        showButton(true,"生成授权码");
                    }else{
                        showButton(false,"生成授权码");
                    }
                    
                    //对于审批状态，还没有理清，暂时只加入少量的
                
                    if(stateFlag=="5"){ //调试状态
                        //显示启用，其它不显示
                        showButton(true,"设备启动");
                       
                    }
                });
             
            });    
        
            /**
            *    显示或隐藏按钮
            */
            function showButton(show, code){
                // contentDocument属性，是获取标准的jframe的html内容的属性
                 btn = $(parent.parent.document).getElement(‘#THIRDMENUFRAME ‘).contentDocument.getElement(‘a[code="‘+code+‘"]‘) ;
                 if(btn==null){
                     return;
                 }
                 if(show){
                     //btn.fade(1); //1代表可见
                     btn.getParent().setStyle("display","block");
                 }else{
                     //btn.fade(0); // 0代表不可见
                     btn.getParent().setStyle("display","none");
                 }
            }
            
            /**
            *  getElement 类似于 jQuery的 find()方法
            **/