界面数据列表,表头浮动

This commit is contained in:
leijun
2018-09-27 17:18:07 +08:00
parent 80accfdfa9
commit 1246062bf2
63 changed files with 158 additions and 101 deletions

View File

@@ -8,6 +8,10 @@
border-color: #eed3d7;
color: #b94a48;
}
.alert{
margin-top: 20px;
margin-bottom: 0px;
}
</style>
<script type="text/javascript">top.$.jBox.closeTip();</script>
<c:if test="${not empty content}">

View File

@@ -218,8 +218,8 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -208,8 +208,8 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -270,9 +270,9 @@
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="treeTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -294,9 +294,9 @@
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="treeTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -153,9 +153,9 @@
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -240,8 +240,9 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -330,8 +330,8 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -327,8 +327,8 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -276,8 +276,8 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<sys:message content="${message}" />
<div class="table-responsive">
<sys:message content="${message}" />
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -330,8 +330,9 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -328,8 +328,8 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -285,8 +285,9 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<sys:message content="${message}" />
<div class="table-responsive">
<sys:message content="${message}" />
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -637,8 +637,8 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -651,8 +651,8 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -267,8 +267,9 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -331,8 +331,9 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<c:forEach items="${serviceList}" var="service">
<c:if test="${service.action==64}">

View File

@@ -282,8 +282,8 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -313,8 +313,9 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -262,8 +262,9 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -267,8 +267,9 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -318,7 +318,6 @@
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -262,8 +262,9 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -263,8 +263,9 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}" />
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -165,13 +165,9 @@
</div>
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -173,9 +173,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -164,9 +164,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -162,8 +162,8 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -151,9 +151,9 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -170,8 +170,9 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -164,9 +164,9 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -169,8 +169,9 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -162,8 +162,9 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -150,9 +150,9 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -161,9 +161,9 @@
</form:form>
</div>
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -162,8 +162,8 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -162,9 +162,9 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -162,9 +162,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -162,9 +162,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -159,9 +159,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -162,9 +162,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -162,9 +162,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -219,9 +219,8 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<sys:message content="${message}" />
<div class="table-responsive">
<sys:message content="${message}" />
<table id="contentTable"
class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>

View File

@@ -162,9 +162,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -162,9 +162,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -161,9 +161,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -162,9 +162,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -162,9 +162,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -162,9 +162,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -162,9 +162,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -162,9 +162,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -164,9 +164,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -179,8 +179,8 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -161,9 +161,8 @@
</form:form>
</div>
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -164,9 +164,8 @@ $(document).ready(function(){
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<div class="table-responsive">
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -170,9 +170,8 @@
</form:form>
</div>
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -149,8 +149,8 @@
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap logTb">
<thead>
<tr>

View File

@@ -310,14 +310,44 @@ function customColumnClick(){
setTimeout(function (){
var height=document.documentElement.clientHeight;
if($('.table-responsive')){
$('.table-responsive').css({'height':height-166+'px'});
$('.table-responsive').css({'height':height-186+'px'});
}
},510);
var reportBusinessType=$("#reportBusinessType").val()
var tableId="tagTable";
if(reportBusinessType=="label_report"){
tableId="tagTable";
}else if(reportBusinessType=="lwhh_report"){
tableId="lwhhTable";
}else if(reportBusinessType=="src_ip_report"){
tableId="contentTable1";
}else if(reportBusinessType=="attr_type_report"){
tableId="attrTypeTable";
}else if(reportBusinessType=="dest_ip_report"){
tableId="destIpTable";
}else if(reportBusinessType=="isp_report"){
tableId="entranceIdTable";
}
var tableCont = document.querySelector('.table-responsive');
function scrollHandle (e){
console.log(this);
var scrollTop = this.scrollTop;
$('th').css('transform','translateY(' + scrollTop + 'px)');
$('thead tr').css('z-index','2147482468');
$('thead tr').css('position','relative');
$('th').css('border','1px solid rgb(255, 255, 255)');
$('th').css('background-clip','padding-box');
}
tableCont.addEventListener('scroll',scrollHandle);
$('#'+tableId).attr("margin-top",'0px');
}
window.onresize=function (){
var height=document.documentElement.clientHeight;
if($('.table-responsive')){
$('.table-responsive').css({'height':height-166+'px'});
$('.table-responsive').css({'height':height-186+'px'});
}
}
</script>
@@ -513,5 +543,8 @@ function customColumnClick(){
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>

View File

@@ -276,9 +276,9 @@
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="treeTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -372,9 +372,8 @@
<sys:message content="${message}"/>
<div class="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>

View File

@@ -176,7 +176,8 @@ optgroup {
table {
border-collapse: collapse;
border-spacing: 0; }
border-spacing: 0;
}
td,
th {
@@ -1542,7 +1543,7 @@ pre {
clear: both; }
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
position: relative;
min-height: 1px;
/* padding-left: 15px;
padding-right: 15px; */
@@ -2038,7 +2039,7 @@ th {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
margin-top: 10px;
margin-top: -1px;
}
.table > thead > tr > th,
.table > thead > tr > td,
@@ -2230,6 +2231,7 @@ table th[class*="col-"] {
position: fixed;
right: 14px;
left: 14px;
margin-top: 20px;
}
@media screen and (max-width: 767px) {
.table-responsive {

View File

@@ -547,6 +547,10 @@ $(function(){
$(".protocol").removeClass("hidden").removeClass("disabled");
$(".btn-red-hollow").addClass("hidden");
}
$("#messageBox .close").on("click",function(){
heightDiv(1);
})
});
window.onload=function(){
$("span[id^=open]").click(function(){
@@ -596,6 +600,18 @@ window.onload=function(){
heightDiv();
},500);
var tableCont = document.querySelector('.table-responsive');
function scrollHandle (e){
console.log(this);
var scrollTop = this.scrollTop;
$('th').css('transform','translateY(' + scrollTop + 'px)');
$('thead tr').css('z-index','2147482468');
$('thead tr').css('position','relative');
$('th').css('border','1px solid rgb(255, 255, 255)');
$('th').css('background-clip','padding-box');
}
tableCont.addEventListener('scroll',scrollHandle);
$('#contentTable').attr("margin-top",'0px');
}
var setInterceptDefaultInfo=function(cfgId){
var action=$("input[name='action']:checked").val();
@@ -1835,14 +1851,23 @@ var initCommIpVal=function(){
}
}
function heightDiv(){
function heightDiv(type){
var hei=document.documentElement.clientHeight;
hei=hei-71;
hei=hei-91;
var rowheigth=0;
if($('.row')){
rowheigth=$('.row').height();
hei=hei-rowheigth;
}
if(type != 1){
if($("#messageBox")){
var messageH=$("#messageBox").height();
if(messageH > 0){
hei=hei-messageH-52;
}
}
}
if($('.table-responsive')){
$('.table-responsive').css({'height':hei+'px'});
}

View File

@@ -325,12 +325,18 @@ function filterActionInit() {
function tzheight(){
var hei=document.documentElement.clientHeight;
hei=hei-71;
hei=hei-91;
var rowheigth=0;
if($('.row')){
rowheigth=$('.row').height();
hei=hei-rowheigth;
}
if($("#messageBox")){
var messageH=$("#messageBox").height();
if(messageH > 0){
hei=hei-messageH-52;
}
}
if($('.table-responsive')){
$('.table-responsive').css({'height':hei+'px'});
}