proj-iott/modules/universal_table/index.html.erb

155 lines
5.6 KiB
Plaintext
Raw Normal View History

2024-08-11 13:36:34 +00:00
<style>
.universal-th-text{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
white-space: normal;
}
.universal-dropdown-menu {
padding: 15px 18px;
white-space: nowrap;
}
.universal-th-text {
padding: 8px 0 0 0;
display: inline;
margin-right: 5px;
color: #888;
}
.universal-dropdown {
display: inline-block;
}
a.universal-btn {
vertical-align: baseline;
color: #fff;
}
.universal-table-index {
border-collapse: collapse;
border: 1px solid #eee;
table-layout: fixed;
word-wrap: break-word;
}
.universal-table-index h3 {
float: left;
margin: 0;
}
.universal-table-index.table td{
padding: 15px 18px;
}
.universal-table-index thead th:last-child .dropdown-menu {
left: auto;
right: 0;
}
.universal-th-icon {
border: 1px solid #eee;
padding: 5px 8px;
margin-right: 5px;
color: gray;
cursor: pointer;
}
.universal-th-text.no-sort.no-search {
position: relative;
top: -6px;
}
.image-preview {
width: 120px;
}
</style>
<table class="table table-hover table-striped universal-table-index" style="position:relative;">
<div class="searchbtn ken-click"><div class="searchbtn2"><i class="fa-solid fa-magnifying-glass"></i>查詢</div></div>
<div class="searchbox">
<thead class="theadsearch2">
<tr data-list="head-columns" data-level="0">
<th class="col-sm-3">
<div class="universal-th-text {{title-class}}">{{title}}</div>
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
<div class="dropdown universal-dropdown {{search}}">
<button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-search"></i>
<span class="caret"></span>
</button>
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
<form class="form-inline universal-form-inline" action="{{url}}" method="get">
<div class="form-group">
{{form-field}}
<input type="hidden" value="{{key}}" name="column" >
</div>
<button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
</form>
</div>
</div>
</th>
</tr>
</thead></diV>
<caption>
<h3>{{table-name}}</h3>
<a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
</caption>
<thead class="theadsearch">
<tr data-list="head-columns" data-level="0">
<th class="col-sm-3">
<div class="universal-th-text {{title-class}}">{{title}}</div>
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
<div class="dropdown universal-dropdown {{search}}">
<button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-search"></i>
<span class="caret"></span>
</button>
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
<form class="form-inline universal-form-inline" action="{{url}}" method="get">
<div class="form-group">
{{form-field}}
<input type="hidden" value="{{key}}" name="column" >
</div>
<button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
</form>
</div>
</div>
</th>
</tr>
</thead>
<tbody data-level="0" data-list="rows">
<tr data-level="1" data-list="columns">
<td>{{text}}</td>
</tr>
</tbody>
</table>
<div>{{total_entries}}</div>
<div>{{export_button}}</div>
{{pagination_goes_here}}
<script>
// $('.universal-table-index th').eq(1).attr('class', 'desktop tablet-l tablet-p');
// $('.universal-table-index th').filter(':gt(1)').attr('class', 'desktop tablet-l tablet-p mobile-l');
// $('.universal-table-index').each(function(){
// if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
// $(this).DataTable({
// searching: false,
// paging: false,
// ordering: false,
// info: false,
// order: false,
// autoWidth: false,
// responsive: true
// });
// }
// });
$(document).ready(function(){
$("tr>th:first-child").removeClass("col-sm-3");
$("tr>th:first-child").addClass("col-sm-4");
$("tr>th:nth-child(2)").removeClass("col-sm-3");
$("tr>th:nth-child(2)").addClass("col-sm-2");
$("tr>th:nth-child(3)").removeClass("col-sm-3");
$("tr>th:nth-child(3)").addClass("col-sm-2");
$("tr>th:nth-child(4)").removeClass("col-sm-3");
$("tr>th:nth-child(4)").addClass("col-sm-2");
$("tr>th:nth-child(5)").removeClass("col-sm-3");
$("tr>th:nth-child(5)").addClass("col-sm-2");
});
</script>
<style>
.universal-table-index.dtr-inline.collapsed td.dtr-control{
vertical-align: middle;
}
</style>