fms中使用的页签（使用的模板） - 云破月丶

先做一个tabs的页签页：

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/taglib/common.jsp"%>
<html>
<head>
<title>Kensite开发平台</title> //随便起名
<%@ include file="/WEB-INF/view/taglib/header.jsp"%>
<%@ include file="/WEB-INF/view/taglib/easyui.jsp"%>
<%@ include file="/WEB-INF/view/taglib/layer.jsp"%>
<style type="text/css">
</style>
</head>
<body>
<div style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%;">
    <div id="ks_tab_win" class="easyui-tabs" data-options="tabPosition:'bottom',plain:true" 
　　 style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%">
        <div id="0" title="企业信息" style="overflow: auto;">      //title是你打开的第一个页签名
            <c:if test="${empty url}">
            <span style="font-size:32px;color:red">URL都不传闹哪样</span>
            </c:if>
            <c:if test="${not empty url}">
            <iframe id="ifrm0" style="width:100%;height:100%;border:none" src="${ctx }${url}"></iframe>
            </c:if>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(document).ready( $(function () {
    }));
    
    function addTab(id, title, url) {
        if(url==null || url=='') {
            var content = '<span style="font-size:32px;color:red">URL都不传闹哪样</span>';
            $('#ks_tab_win').tabs('add',{
                title: 'I服了YOU',
                content: content,
                closable: true
            });
            return;
        }
        if(title==null && title=='') {
            title=='查看';
        }
        if(id!=null && id!='') {
            var tabIdx = getTabIndex(id);
            if ($('#ks_tab_win').tabs('exists', tabIdx)){
                $('#ks_tab_win').tabs('select', tabIdx);
            } else {
                var content = '<iframe id="ifrm'+id+'" style="width:100%;height:100%;border:none" src="'+url+'"></iframe>';
                $('#ks_tab_win').tabs('add', {
                    id: id,
                    title: title,
                    content: content,
                    closable: true
                });
            }
        } else {
            if ($('#ks_tab_win').tabs('exists', title)){
                $('#ks_tab_win').tabs('select', title);
            } else {
                var content = '<iframe id="ifrm'+title+'" style="width:100%;height:100%;border:none" src="'+url+'"></iframe>';
                $('#ks_tab_win').tabs('add', {
                    title: title,
                    content: content,
                    closable: true
                });
            }
        }
    }
    
    function closeTab(selector) {                                            //关闭打开的指定页签页
        if(selector!=null && selector!='') {
            var tabIdx = getTabIndex(selector);
            if(tabIdx != -1) {
                $('#ks_tab_win').tabs('close', tabIdx);
            } else {
                $('#ks_tab_win').tabs('close', selector);
            }
        } else {
        }
    }
    
    function refreshTab(selector) {　　　　　　　　　　　　　　　　　　　　　　　　//刷新指定页签页　　　　　　　　　　　　　　
        if(!selector) {　　　　　　　　　　　　　　
            var src = document.getElementById('ifrm'+selector+'').src;
            document.getElementById('ifrm'+selector+'').src = src;
        }
    }
    
    function getTabIndex(id) {
        var tabs = $('#ks_tab_win').tabs('tabs');
        for(var i=0; i<tabs.length; i++) {
            if(tabs[i].attr('id') == id) {
                return i;
            }
        }
        return -1;
    }
</script>
</html>

在导航菜单中的URL中先使用页签：/sysMenu/tabs?url= 然后再页签后边跟上页签中的第一个页面的地址，这样就能使用页签

从第一页打开之后的页，需要在这页中配置一下body中：

<table class="easyui-datagrid" style="width:400px;height:250px"   
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   
    <thead>   
        <tr>   
          <th data-options="field:'businessId',width:100" formatter="rowformater">企业编号</th>  //formatter方法
　　　　 </tr> 
　　</thead>
</table>

js：

function rowformater(value, row, index) { 
　　var str = "<a href='javascript:void(0)' onclick='warnMssage("+index+")'>"+value+"</a>"
　　return str;
}
            
function warnMssage(index){
　　$("#dataList").datagrid('selectRow',index);
　　var row = $("#dataList").datagrid('getSelected');
　　id = row.id;
　　title = "【"+row.businessName+"】"+"预警信息";
 　 url = "${ctx}/fms/warningMessage/list?row="+row.id;
　　parent.addTab(id,title,url);
}

这样就可以在这个页面中打开之后的页签页了

posted on 2017-06-05 15:45 云破月丶阅读(261) 评论(0) 收藏举报

刷新页面返回顶部