layui中怎么点击按钮添加新的标签页?不提layui-admin的方法

提问 已结 12 563
陈逗逗
陈逗逗 2020-5-18
悬赏:20飞吻
版本:layui 2.3.0 浏览器:火狐
各位大哥,layui有什么办法可以点击按钮在table上打开新的Tab标签页?别把layui-admin的那一套搬过来啊,有点浪费时间啊

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>服务器检测</title>
<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
</head>
<body>
<div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div>
<header style="height: 100%">
<div align="left">
<table style="width: 100%">
<tr>
<td>
<form class="form-inline" onsubmit="return false">
<div class="form-group">
服务器名称:
<input id="serverName" type="text" class="form-control" placeholder="名称">
服务器类型:
<select class="form-control input-sm" id="serverType">
<option value="all">全部</option>
<option value="服务器">服务器</option>
</select>
服务器状态:
<select class="form-control input-sm" id="serverState">
<option value="all">全部</option>
<option value="运行中">运行中</option>
<option value="未运行">未运行</option>
</select>
所属单位:
<select class="form-control input-sm" id="serverBelon">
<option value="all">全部</option>
<option value="市局">市局</option>
</select>
<button id="searchBt" class="layui-btn layui-btn-sm" ><i class="layui-icon"></i>搜索</button>
</div>
</form>
</td>
</tr>
</table>
</div>
</header>

<div>
<div class="widget-body no-padding">
<table id="serverCheckTab" lay-filter="serverCheckTab" class="table table-striped table-bordered table-hover" style="width:100%">

</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

<script type="text/javascript" src="/js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/jq.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/layui/index.js"></script>
<script type="text/javascript" src="/js/plugin/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/plugin/datatables/dataTables.bootstrap.min.js"></script>

<script type="text/html" id="barDemo">
<a type="button" lay-text="服务器设备详情" style="background-color: #22B6FF;" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="select">查看详情</a>
</script>
<script type="text/javascript">
var layer;
var form;
var table;
var laydate;
var element;
var serverCheckTab;
layui.use(['layer', 'form', 'table', 'laydate', 'element'], function() {
layer = layui.layer;
form = layui.form;
table = layui.table;
laydate = layui.laydate;
element = layui.element;
serverCheckTab = table.render({
elem: '#serverCheckTab',
//url: '/serverCheck/getTableList',
page: true,
limit: 15 ,
even: true,
cols: [
[{
field: 'id',
title: 'ID'
}, {
field: 'serverName',
title: '服务器名称'
}, {
field: 'serverType',
title: '服务器类型'
}, {
field: 'serverBelon',
title: '所属单位'
}, {
field: 'serverState',
title: '状态'
}, {
field: 'serverIp',
title: 'IP'
}, {
fixed: 'right',
title: '操作',
toolbar: '#barDemo',
}]
],
data: [{
"id": "1001",
"serverName": "东方",
"serverType": "服务器",
"serverBelon": "局",
"serverState": "运行中",
"serverIp": "XX.XX.XX.XX"
}],
text: {
none: '暂无相关数据'
},
});

table.on('tool(serverCheckTab)', function(obj){
var data = obj.data;
var layEvent = obj.event;
if(layEvent == 'select') {
alert(data.serverName);
tabAdd("服务器巡检详情","serverCheckDetails.html","50");
//window.open("../videoShareCheck/videoShareCheck.html?serverName=" + data.serverName);
}
});
table.resize("serverCheckTab");

//查询内容重新绑定列表
$('#searchBt').on('click', function () {
// 查询条件
var rolename = $("#rolename").val();
table.reload('serverCheckTab', {
method: 'get'
,where: {"rolename" : rolename}
,page: true
,limit: 15
});
});

});

var tabID= [];
function tabAdd(title,content,id) {
if($.inArray(id,tabID) < 0){
tabID.push(id);
//新增一个Tab项
element.tabAdd('serverCheckTab', {
title: title //用于演示
,content: content
,id: id //实际使用一般是规定好的id,这里以时间戳模拟下
})
}
element.tabChange('serverCheckTab', id);
}

</script>
回帖
  • IDyun
    2020-5-18
    右键检查定位到页面的选项卡或者F12鼠标定位到页面元素的界面,然后你截图一下。
    0 回复
  • function tabAdd(title,content,id) {
    if($.inArray(id,tabID) < 0){
    tabID.push(id);
    //新增一个Tab项
    element.tabAdd('tabDemo', {
    title: title //用于演示
    ,content: content
    ,id: id //实际使用一般是规定好的id,这里以时间戳模拟下
    })
    }
    element.tabChange('tabDemo', id);
    }

    //删除tab
    element.on('tabDelete(tabDemo)', function(data){
    tabID.splice(data.index - 1,1)
    });
    0 回复
  • 陈逗逗
    2020-5-18
    @Angel丨灬泪雨 点击菜单和按钮执行的流程都一样,最后都进了监听事情,但就是点击按钮的结果没有显示在标签页上面
    0 回复
  • @陈逗逗 首先确定dom是否写对了,
    0 回复
  • 要想实现一个完整的多标签框架,不是一两行代码能解决的,你让别人只给你发打开选项卡的代码?怎么发?别人都不知道你页面布局是怎么写的,选项卡的lay-filter是啥,是iframe还是单页,都是有不同的处理方法的
    0 回复
  • 陈逗逗
    2020-5-18
    哥哥你要是仔细看看我的标题你就知道了
    0 回复
  • 即使手把手教你如何打开一个选项卡后,你又会问怎么关闭一个选项卡,怎么跟侧边栏选中样式同步,怎么刷新,怎么传参数,你咋不让别人一步一步教你怎么写一套layuiadmin出来[哈哈]
    0 回复
  • 陈逗逗
    2020-5-18
    你说的关闭选项卡,侧边栏同步都是基于打开新的标签页,在这扯这没用的,而已我标题写的很详细,不用layuiadmin
    0 回复
  • @陈逗逗 叫我大佬,我帮你写一套[哈哈]
    0 回复