'萬用表格'
This commit is contained in:
parent
a1da2d695a
commit
d8347bf893
|
|
@ -2369,10 +2369,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
|
|||
}
|
||||
|
||||
.s-annc__flie-title {
|
||||
max-width: 9.375rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.s-annc__social > * {
|
||||
|
|
|
|||
|
|
@ -74,10 +74,11 @@
|
|||
cursor: pointer;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
right:1em;
|
||||
z-index: 99;
|
||||
@media(max-width: $screen-xs){
|
||||
margin-top: 0.5em;
|
||||
right:0;
|
||||
}
|
||||
.searchbtn2, .universal-btn {
|
||||
line-height: 2em;
|
||||
|
|
@ -203,3 +204,60 @@
|
|||
-o-transition: .3s all ease;
|
||||
transition: .3s all ease;
|
||||
}
|
||||
.universal-table-index.table td{
|
||||
padding: 15px 10px!important;
|
||||
}
|
||||
.universal-table-index1{
|
||||
.col-ken{
|
||||
@media(min-width: $screen-xs){
|
||||
width: auto!important;
|
||||
}
|
||||
|
||||
}
|
||||
@media(min-width: $screen-xs){
|
||||
.universal-th-icon{
|
||||
padding:5px!important;
|
||||
}
|
||||
.universal-dropdown{
|
||||
.btn{
|
||||
padding: 0.3125em!important;
|
||||
}
|
||||
}
|
||||
.universal-th-text{
|
||||
display: block!important;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
.universal-table-index3{
|
||||
.col-ken{
|
||||
@media(min-width: $screen-xs){
|
||||
width: auto!important;
|
||||
}
|
||||
|
||||
}
|
||||
@media(min-width: $screen-xs){
|
||||
.universal-th-icon{
|
||||
padding:5px!important;
|
||||
}
|
||||
.universal-dropdown{
|
||||
.btn{
|
||||
padding: 0.3125em!important;
|
||||
}
|
||||
}
|
||||
.universal-th-text{
|
||||
display: block!important;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
.universal-table-index4{
|
||||
.universal-th-text{
|
||||
margin: 0;
|
||||
}
|
||||
.col-ken{
|
||||
@media(min-width: $screen-xs){
|
||||
width: auto!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
// container setting
|
||||
.response-container {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
margin:auto!important;
|
||||
@media (max-width: $screen-xs) {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -501,5 +501,4 @@ input.search_box{
|
|||
display: flex;
|
||||
flex-wrap: wrap-reverse!important;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,38 @@
|
|||
<style>
|
||||
|
||||
.universal-dropdown{
|
||||
float:left;
|
||||
}
|
||||
tr>th:first-child{
|
||||
display: none!important;
|
||||
}
|
||||
tr>td:first-child{
|
||||
display: none!important;
|
||||
}
|
||||
.col-ken{
|
||||
min-width: 4em;
|
||||
&:first-child{
|
||||
min-width: unset!important;
|
||||
}
|
||||
}
|
||||
.universal-table-index3{
|
||||
table-layout: auto!important;
|
||||
.universal-th-icon{
|
||||
margin:0;
|
||||
}
|
||||
.universal-th-text {
|
||||
margin: 0;
|
||||
.universal-th-icon{
|
||||
margin:0;
|
||||
}
|
||||
.universal-th-text {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.universal-th-text{
|
||||
white-space: pre!important;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
|
|
@ -53,16 +86,15 @@
|
|||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
<table class="table table-hover table-striped universal-table-index">
|
||||
<table class="table table-hover table-striped universal-table-index universal-table-index1">
|
||||
<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>
|
||||
<tr data-list="head-columns" data-level="0">
|
||||
<th class="col-md-3">
|
||||
<th class="col-ken">
|
||||
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
|
||||
<div class="universal-th-text {{title-class}}">{{title}}</div>
|
||||
<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>
|
||||
|
|
@ -78,6 +110,7 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="universal-th-text {{title-class}}">{{title}}</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -91,33 +124,7 @@
|
|||
<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{
|
||||
|
|
|
|||
|
|
@ -1,4 +1,37 @@
|
|||
<style>
|
||||
|
||||
.universal-dropdown{
|
||||
float:left;
|
||||
}
|
||||
.col-ken{
|
||||
min-width: 4em;
|
||||
&:first-child{
|
||||
min-width: unset!important;
|
||||
}
|
||||
}
|
||||
.universal-table-index3{
|
||||
table-layout: auto!important;
|
||||
.universal-th-icon{
|
||||
margin:0;
|
||||
}
|
||||
.universal-th-text {
|
||||
margin: 0;
|
||||
.universal-th-icon{
|
||||
margin:0;
|
||||
}
|
||||
.universal-th-text {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.universal-th-text{
|
||||
white-space: pre!important;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
white-space: normal;
|
||||
}
|
||||
.universal-dropdown-menu {
|
||||
padding: 15px 18px;
|
||||
white-space: nowrap;
|
||||
|
|
@ -32,21 +65,6 @@
|
|||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.universal-table-index tbody {
|
||||
counter-reset: item;
|
||||
}
|
||||
|
||||
.universal-table-index tbody > tr > td:first-child:before {
|
||||
content: counter(item);
|
||||
counter-increment: item;
|
||||
}
|
||||
|
||||
|
||||
.universal-table-index thead > tr > th:first-child:before {
|
||||
content: "No.";
|
||||
}
|
||||
|
||||
|
||||
.universal-th-icon {
|
||||
border: 1px solid #eee;
|
||||
padding: 5px 8px;
|
||||
|
|
@ -62,45 +80,17 @@
|
|||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
<form class="form-inline universal-form-inline" action="{{url}}" method="get">
|
||||
<table class="table table-hover table-striped universal-table-index">
|
||||
<div class="searchbtn">
|
||||
<div class="ken-click">
|
||||
<div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
|
||||
<a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchbox">
|
||||
<div class="theadsearch2">
|
||||
<div class="row col-md-11 col-xs-12" data-list="searchable-columns" data-level="0">
|
||||
<div class="{{col-class}}">
|
||||
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
|
||||
<div class="universal-th-text {{title-class}}">{{title}}</div>
|
||||
<div class="dropdown universal-dropdown {{search}}">
|
||||
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
|
||||
<div class="form-group">
|
||||
{{form-field}}
|
||||
<input type="hidden" value="{{key}}" name="column" >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-1 col-xs-12 submit-btn-wrap">
|
||||
<button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table-hover table-striped universal-table-index universal-table-index3">
|
||||
<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">
|
||||
<thead>
|
||||
<tr data-list="head-columns" data-level="0">
|
||||
<th class="col-md-3">
|
||||
<th class="col-ken">
|
||||
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
|
||||
<div class="universal-th-text {{title-class}}">{{title}}</div>
|
||||
<div class="dropdown universal-dropdown {{search}}">
|
||||
<button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<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>
|
||||
|
|
@ -114,6 +104,7 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="universal-th-text {{title-class}}">{{title}}</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -123,25 +114,14 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
<div>{{total_entries}}</div>
|
||||
<div>{{export_button}}</div>
|
||||
{{pagination_goes_here}}
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('.universal-table-index thead tr').prepend('<th></th>')
|
||||
$('.universal-table-index tbody tr').prepend('<td></td>')
|
||||
$("tr>th:first-child").removeClass("col-md-3");
|
||||
$("tr>th:first-child").addClass("col-md-1");
|
||||
$("tr>th:nth-child(2)").removeClass("col-md-3");
|
||||
$("tr>th:nth-child(2)").addClass("col-md-6");
|
||||
$("tr>th:nth-child(3)").removeClass("col-md-3");
|
||||
$("tr>th:nth-child(3)").addClass("col-md-3");
|
||||
$("tr>th:nth-child(4)").removeClass("col-md-3");
|
||||
$("tr>th:nth-child(4)").addClass("col-md-2");
|
||||
$("tr>th:nth-child(5)").removeClass("col-md-3");
|
||||
$("tr>th:nth-child(5)").addClass("col-md-3");
|
||||
});
|
||||
// $('.universal-table-index thead tr').prepend('<th></th>')
|
||||
// $('.universal-table-index tbody tr').prepend('<td></td>')
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.universal-table-index.dtr-inline.collapsed td.dtr-control{
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,13 @@
|
|||
<style>
|
||||
tr>th:first-child{
|
||||
display: none!important;
|
||||
}
|
||||
tr>td:first-child{
|
||||
display: none!important;
|
||||
}
|
||||
.universal-table-index4{
|
||||
table-layout: auto!important;
|
||||
}
|
||||
.universal-dropdown-menu {
|
||||
padding: 15px 18px;
|
||||
white-space: nowrap;
|
||||
|
|
@ -50,8 +59,8 @@
|
|||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
<form class="form-inline universal-form-inline" action="{{url}}" method="get">
|
||||
<table class="table table-hover table-striped universal-table-index">
|
||||
<form class="form-inline universal-form-inline " action="{{url}}" method="get">
|
||||
<table class="table table-hover table-striped universal-table-index universal-table-index4">
|
||||
<div class="searchbtn">
|
||||
<div class="ken-click">
|
||||
<div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
|
||||
|
|
@ -84,7 +93,7 @@
|
|||
</caption>
|
||||
<thead class="theadsearch">
|
||||
<tr data-list="head-columns" data-level="0">
|
||||
<th class="col-md-3">
|
||||
<th class="col-ken">
|
||||
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
|
||||
<div class="universal-th-text {{title-class}}">{{title}}</div>
|
||||
<div class="dropdown universal-dropdown {{search}}">
|
||||
|
|
@ -116,18 +125,18 @@
|
|||
<div>{{export_button}}</div>
|
||||
{{pagination_goes_here}}
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("tr>th:first-child").removeClass("col-md-3");
|
||||
$("tr>th:first-child").addClass("col-md-1");
|
||||
$("tr>th:nth-child(2)").removeClass("col-md-3");
|
||||
$("tr>th:nth-child(2)").addClass("col-md-6");
|
||||
$("tr>th:nth-child(3)").removeClass("col-md-3");
|
||||
$("tr>th:nth-child(3)").addClass("col-md-3");
|
||||
$("tr>th:nth-child(4)").removeClass("col-md-3");
|
||||
$("tr>th:nth-child(4)").addClass("col-md-2");
|
||||
$("tr>th:nth-child(5)").removeClass("col-md-3");
|
||||
$("tr>th:nth-child(5)").addClass("col-md-3");
|
||||
});
|
||||
// $(document).ready(function(){
|
||||
// $("tr>th:first-child").removeClass("col-md-3");
|
||||
// $("tr>th:first-child").addClass("col-md-1");
|
||||
// $("tr>th:nth-child(2)").removeClass("col-md-3");
|
||||
// $("tr>th:nth-child(2)").addClass("col-md-6");
|
||||
// $("tr>th:nth-child(3)").removeClass("col-md-3");
|
||||
// $("tr>th:nth-child(3)").addClass("col-md-3");
|
||||
// $("tr>th:nth-child(4)").removeClass("col-md-3");
|
||||
// $("tr>th:nth-child(4)").addClass("col-md-2");
|
||||
// $("tr>th:nth-child(5)").removeClass("col-md-3");
|
||||
// $("tr>th:nth-child(5)").addClass("col-md-3");
|
||||
// });
|
||||
// $('.universal-table-index thead tr').prepend('<th></th>')
|
||||
// $('.universal-table-index tbody tr').prepend('<td></td>')
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
<style>
|
||||
.universal-table-index4{
|
||||
table-layout: auto!important;
|
||||
}
|
||||
.universal-dropdown-menu {
|
||||
padding: 15px 18px;
|
||||
white-space: nowrap;
|
||||
|
|
@ -50,8 +53,8 @@
|
|||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
<form class="form-inline universal-form-inline" action="{{url}}" method="get">
|
||||
<table class="table table-hover table-striped universal-table-index">
|
||||
<form class="form-inline universal-form-inline " action="{{url}}" method="get">
|
||||
<table class="table table-hover table-striped universal-table-index universal-table-index4">
|
||||
<div class="searchbtn">
|
||||
<div class="ken-click">
|
||||
<div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
|
||||
|
|
@ -84,7 +87,7 @@
|
|||
</caption>
|
||||
<thead class="theadsearch">
|
||||
<tr data-list="head-columns" data-level="0">
|
||||
<th class="col-md-3">
|
||||
<th class="col-ken">
|
||||
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
|
||||
<div class="universal-th-text {{title-class}}">{{title}}</div>
|
||||
<div class="dropdown universal-dropdown {{search}}">
|
||||
|
|
@ -116,18 +119,18 @@
|
|||
<div>{{export_button}}</div>
|
||||
{{pagination_goes_here}}
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("tr>th:first-child").removeClass("col-md-3");
|
||||
$("tr>th:first-child").addClass("col-md-1");
|
||||
$("tr>th:nth-child(2)").removeClass("col-md-3");
|
||||
$("tr>th:nth-child(2)").addClass("col-md-6");
|
||||
$("tr>th:nth-child(3)").removeClass("col-md-3");
|
||||
$("tr>th:nth-child(3)").addClass("col-md-3");
|
||||
$("tr>th:nth-child(4)").removeClass("col-md-3");
|
||||
$("tr>th:nth-child(4)").addClass("col-md-2");
|
||||
$("tr>th:nth-child(5)").removeClass("col-md-3");
|
||||
$("tr>th:nth-child(5)").addClass("col-md-3");
|
||||
});
|
||||
// $(document).ready(function(){
|
||||
// $("tr>th:first-child").removeClass("col-md-3");
|
||||
// $("tr>th:first-child").addClass("col-md-1");
|
||||
// $("tr>th:nth-child(2)").removeClass("col-md-3");
|
||||
// $("tr>th:nth-child(2)").addClass("col-md-6");
|
||||
// $("tr>th:nth-child(3)").removeClass("col-md-3");
|
||||
// $("tr>th:nth-child(3)").addClass("col-md-3");
|
||||
// $("tr>th:nth-child(4)").removeClass("col-md-3");
|
||||
// $("tr>th:nth-child(4)").addClass("col-md-2");
|
||||
// $("tr>th:nth-child(5)").removeClass("col-md-3");
|
||||
// $("tr>th:nth-child(5)").addClass("col-md-3");
|
||||
// });
|
||||
// $('.universal-table-index thead tr').prepend('<th></th>')
|
||||
// $('.universal-table-index tbody tr').prepend('<td></td>')
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,24 +12,24 @@
|
|||
"filename" : "index2",
|
||||
"name" : {
|
||||
"zh_tw" : "2. 含序號表格列表",
|
||||
"en" : "2. Index Table with serial number"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
},
|
||||
{
|
||||
"filename" : "index3",
|
||||
"name" : {
|
||||
"zh_tw" : "3. 含序號表格列表 + 多欄位搜尋",
|
||||
"en" : "3. Index Table with serial number + Multiple Field Search"
|
||||
"en" : "2. Index Table with serial number "
|
||||
},
|
||||
"thumbnail" : "thumb.png",
|
||||
"default": true
|
||||
},
|
||||
{
|
||||
"filename" : "index3",
|
||||
"name" : {
|
||||
"zh_tw" : "3. 單純表格列表 + 多欄位搜尋",
|
||||
"en" : "3. col Pure index table+ Multiple Field Search"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
},
|
||||
{
|
||||
"filename" : "index4",
|
||||
"name" : {
|
||||
"zh_tw" : "4. 含序號表格列表new",
|
||||
"en" : "4. Index Table with serial number new"
|
||||
"zh_tw" : "4.含序號表格列表 + 多欄位搜尋",
|
||||
"en" : "4. col Index Table with serial number + Multiple Field Search"
|
||||
},
|
||||
"thumbnail" : "thumb.png",
|
||||
"default": true
|
||||
|
|
|
|||
Loading…
Reference in New Issue