首页 > 代码库 > ops-web运维平台data.jsp-jquery-mootools

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

 

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" onm ouseover="Mouse.over(this)" onm ouseout="Mouse.out(this)" onm ousedown="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="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" 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()方法
            **/