universal
This commit is contained in:
parent
b0a2e7b5f0
commit
265c954b66
|
|
@ -1,7 +1,12 @@
|
||||||
@charset "utf-8";
|
@charset "utf-8";
|
||||||
|
|
||||||
@import "../initial";
|
@import "../initial";
|
||||||
|
.universal-th-text{
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
.universal-table-index h3 {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
.universal-form-inline{
|
.universal-form-inline{
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -119,11 +124,11 @@
|
||||||
padding: 2px 15px 2px 15px;
|
padding: 2px 15px 2px 15px;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
|
||||||
color:#fff;
|
color:#fff;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
|
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
@ -140,7 +145,6 @@
|
||||||
background-position: 10px center;
|
background-position: 10px center;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: $theme-color-second;
|
background-color: $theme-color-second;
|
||||||
behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 0;
|
border: 0;
|
||||||
&:hover{
|
&:hover{
|
||||||
|
|
@ -376,4 +380,284 @@
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
img.image-preview {
|
||||||
|
max-width: 100px;
|
||||||
|
}
|
||||||
|
.universal-form-inline5{
|
||||||
|
.tdken{
|
||||||
|
@media(min-width:820px){
|
||||||
|
width: calc(50% - 1em) !important;
|
||||||
|
}
|
||||||
|
@media(min-width:768px)and(max-width:820px){
|
||||||
|
width: calc(50% - 1em) !important;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
-webkit-transform: translateY(-6px);
|
||||||
|
-ms-transform: translateY(-6px);
|
||||||
|
transform: translateY(-6px);
|
||||||
|
box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
|
||||||
|
-webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
|
||||||
|
-webkit-transition: all .3sease;
|
||||||
|
-moz-transition: all .3s ease;
|
||||||
|
-ms-transition: all .3s ease;
|
||||||
|
-o-transition: all .3s ease;
|
||||||
|
transition: all .3sease;
|
||||||
|
.fa-thumbtack{
|
||||||
|
transform: scale(1.1) rotate(45deg);
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
color:$theme-color-second;
|
||||||
|
transform: scale(1.1) ;
|
||||||
|
-webkit-transition: all .3sease;
|
||||||
|
-moz-transition: all .3s ease;
|
||||||
|
-ms-transition: all .3s ease;
|
||||||
|
-o-transition: all .3s ease;
|
||||||
|
transition: all .3sease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.universal-table-index{
|
||||||
|
border:0;
|
||||||
|
}
|
||||||
|
.theadsearch{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.universal-th-text{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.image-preview {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
td,th{
|
||||||
|
width: 100%!important;
|
||||||
|
}
|
||||||
|
.kentbody{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
tbody{
|
||||||
|
// display: flex;
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
tr{
|
||||||
|
padding:18px 20px 25px 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 2px 8px 0px #999;
|
||||||
|
border-radius:30px;
|
||||||
|
margin: 0.5em;
|
||||||
|
position: relative;
|
||||||
|
min-height: 12em;
|
||||||
|
}
|
||||||
|
td{
|
||||||
|
border:0!important;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
color: #0757A0;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
a{
|
||||||
|
color: #2D9349;
|
||||||
|
font-size:medium;
|
||||||
|
}
|
||||||
|
&:nth-child(2){
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
&:nth-child(5){
|
||||||
|
color: #00F;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fa-thumbtack{
|
||||||
|
transform: rotate(45deg);position: absolute;right: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.universal-form-inline6{
|
||||||
|
.tdken{
|
||||||
|
@media(min-width:820px){
|
||||||
|
width: calc(33.3% - 1em) !important;
|
||||||
|
}
|
||||||
|
@media(min-width:768px)and(max-width:820px){
|
||||||
|
width: calc(50% - 1em) !important;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
-webkit-transform: translateY(-6px);
|
||||||
|
-ms-transform: translateY(-6px);
|
||||||
|
transform: translateY(-6px);
|
||||||
|
box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
|
||||||
|
-webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
|
||||||
|
-webkit-transition: all .3sease;
|
||||||
|
-moz-transition: all .3s ease;
|
||||||
|
-ms-transition: all .3s ease;
|
||||||
|
-o-transition: all .3s ease;
|
||||||
|
transition: all .3sease;
|
||||||
|
.fa-thumbtack{
|
||||||
|
transform: scale(1.1) rotate(45deg);
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
color:$theme-color-second;
|
||||||
|
transform: scale(1.1) ;
|
||||||
|
-webkit-transition: all .3sease;
|
||||||
|
-moz-transition: all .3s ease;
|
||||||
|
-ms-transition: all .3s ease;
|
||||||
|
-o-transition: all .3s ease;
|
||||||
|
transition: all .3sease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.universal-table-index{
|
||||||
|
border:0;
|
||||||
|
}
|
||||||
|
.theadsearch{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.universal-th-text{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.image-preview {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
td,th{
|
||||||
|
width: 100%!important;
|
||||||
|
}
|
||||||
|
.kentbody{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
tbody{
|
||||||
|
// display: flex;
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
tr{
|
||||||
|
padding:18px 20px 25px 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 2px 8px 0px #999;
|
||||||
|
border-radius:30px;
|
||||||
|
margin: 0.5em;
|
||||||
|
position: relative;
|
||||||
|
min-height: 12em;
|
||||||
|
}
|
||||||
|
td{
|
||||||
|
border:0!important;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
color: #0757A0;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
a{
|
||||||
|
color: #2D9349;
|
||||||
|
font-size:medium;
|
||||||
|
}
|
||||||
|
&:nth-child(2){
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
&:nth-child(5){
|
||||||
|
color: #00F;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fa-thumbtack{
|
||||||
|
transform: rotate(45deg);position: absolute;right: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// .universal-table-show {
|
||||||
|
|
||||||
|
// border-collapse: collapse;
|
||||||
|
// .table-content{
|
||||||
|
// table{
|
||||||
|
// border: 0;
|
||||||
|
// }
|
||||||
|
// tbody > tr:nth-of-type(even) {
|
||||||
|
// background-color: #cccccc30;
|
||||||
|
// }
|
||||||
|
// td{
|
||||||
|
// border-bottom: 1px #333 solid;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// td{
|
||||||
|
// border-top:0!important;
|
||||||
|
// min-width: 7em;
|
||||||
|
// border-left: 0 !important;
|
||||||
|
// border-right: 0 !important;
|
||||||
|
// }
|
||||||
|
// .universal-table-show.table td{
|
||||||
|
// padding: 15px 18px;
|
||||||
|
// }
|
||||||
|
// tbody>tr:nth-of-type(odd){
|
||||||
|
// background-color:transparent;
|
||||||
|
// }
|
||||||
|
// .table-content{
|
||||||
|
// min-width: 100%!important;
|
||||||
|
// }
|
||||||
|
// .universal-table-tr{
|
||||||
|
// display: flex;
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
// justify-content: center;
|
||||||
|
// width: 100%;
|
||||||
|
// &:first-child{
|
||||||
|
// display:none;
|
||||||
|
// }
|
||||||
|
// &:nth-child(2){
|
||||||
|
// .table-title{
|
||||||
|
// display: none;
|
||||||
|
// }
|
||||||
|
// .table-content{
|
||||||
|
// padding-top: 1em;
|
||||||
|
// width: 100%;
|
||||||
|
// color: #173463;
|
||||||
|
// font-size: 2.2rem;
|
||||||
|
// font-weight: 900;
|
||||||
|
// text-align: center;
|
||||||
|
// padding-bottom: 0;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// &:nth-child(3){
|
||||||
|
// .table-title{
|
||||||
|
// display: none;
|
||||||
|
// }
|
||||||
|
// .table-content{
|
||||||
|
// width: 100%;
|
||||||
|
// color: #e66b28;
|
||||||
|
// font-size: 2.2rem;
|
||||||
|
// font-weight: 900;
|
||||||
|
// text-align: center;
|
||||||
|
// padding-top: 0;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// &:nth-child(4){
|
||||||
|
// .table-title{
|
||||||
|
// display: none;
|
||||||
|
// }
|
||||||
|
// .table-content{
|
||||||
|
// margin-bottom: 1em;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// &:nth-child(5){
|
||||||
|
// .table-title{
|
||||||
|
// display: none;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// }
|
||||||
|
// .table-content{
|
||||||
|
// background-color: #fff;
|
||||||
|
// padding: 0;
|
||||||
|
// }
|
||||||
|
// .table-title{
|
||||||
|
// width: 100%;
|
||||||
|
// padding: 30px 0;
|
||||||
|
// color: #2D9349;
|
||||||
|
// font-size: 1.8rem;
|
||||||
|
// font-weight: 600;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
|
||||||
|
|
@ -96,7 +96,7 @@
|
||||||
<th class="col-ken">
|
<th class="col-ken">
|
||||||
<a href="{{sort-url}}" class="{{sort}}" role="link" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a>
|
<a href="{{sort-url}}" class="{{sort}}" role="link" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a>
|
||||||
<div class="dropdown universal-dropdown {{search}}">
|
<div class="dropdown universal-dropdown {{search}}">
|
||||||
<button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
|
<button class="btn btn-sm" id="dLabel" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
|
||||||
<i class="fa fa-search"></i>
|
<i class="fa fa-search"></i>
|
||||||
<span class="caret"></span>
|
<span class="caret"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -120,7 +120,8 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
<div>{{total_entries}}</div>
|
||||||
|
<div>{{export_button}}</div>
|
||||||
{{pagination_goes_here}}
|
{{pagination_goes_here}}
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -74,7 +74,7 @@
|
||||||
<th class="col-ken">
|
<th class="col-ken">
|
||||||
<a href="{{sort-url}}" class="{{sort}}" role="link" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a>
|
<a href="{{sort-url}}" class="{{sort}}" role="link" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a>
|
||||||
<div class="dropdown universal-dropdown {{search}}">
|
<div class="dropdown universal-dropdown {{search}}">
|
||||||
<button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
|
<button class="btn btn-sm" id="dLabel" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
|
||||||
<i class="fa fa-search"></i>
|
<i class="fa fa-search"></i>
|
||||||
<span class="caret"></span>
|
<span class="caret"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -98,7 +98,8 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
<div>{{total_entries}}</div>
|
||||||
|
<div>{{export_button}}</div>
|
||||||
{{pagination_goes_here}}
|
{{pagination_goes_here}}
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -80,7 +80,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="searchbox">
|
<div class="searchbox">
|
||||||
<div class="theadsearch2">
|
<div class="theadsearch2">
|
||||||
<div class="row col-md-9 col-xs-12" data-list="searchable-columns" data-level="0">
|
<div class="row col-md-10 col-xs-12" data-list="searchable-columns" data-level="0">
|
||||||
<div class="{{col-class}}">
|
<div class="{{col-class}}">
|
||||||
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a>
|
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a>
|
||||||
<div class="universal-th-text {{title-class}}">{{title}}</div>
|
<div class="universal-th-text {{title-class}}">{{title}}</div>
|
||||||
|
|
@ -94,7 +94,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-3 col-xs-12 submit-btn-wrap">
|
<div class="col-md-2 col-xs-12 submit-btn-wrap">
|
||||||
<button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
|
<button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -108,7 +108,7 @@
|
||||||
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
|
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
|
||||||
<div class="universal-th-text {{title-class}}">{{title}}</div>
|
<div class="universal-th-text {{title-class}}">{{title}}</div>
|
||||||
<div class="dropdown universal-dropdown {{search}}">
|
<div class="dropdown universal-dropdown {{search}}">
|
||||||
<button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
|
<button class="btn btn-sm" id="dLabel" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
|
||||||
<i class="fa fa-search"></i>
|
<i class="fa fa-search"></i>
|
||||||
<span class="caret"></span>
|
<span class="caret"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -132,6 +132,8 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</form>
|
</form>
|
||||||
|
<div>{{total_entries}}</div>
|
||||||
|
<div>{{export_button}}</div>
|
||||||
{{pagination_goes_here}}
|
{{pagination_goes_here}}
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -74,7 +74,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="searchbox">
|
<div class="searchbox">
|
||||||
<div class="theadsearch2">
|
<div class="theadsearch2">
|
||||||
<div class="row col-md-9 col-xs-12" data-list="searchable-columns" data-level="0">
|
<div class="row col-md-10 col-xs-12" data-list="searchable-columns" data-level="0">
|
||||||
<div class="{{col-class}}">
|
<div class="{{col-class}}">
|
||||||
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a>
|
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a>
|
||||||
<div class="universal-th-text {{title-class}}">{{title}}</div>
|
<div class="universal-th-text {{title-class}}">{{title}}</div>
|
||||||
|
|
@ -88,7 +88,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-3 col-xs-12 submit-btn-wrap">
|
<div class="col-md-2 col-xs-12 submit-btn-wrap">
|
||||||
<button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
|
<button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -102,7 +102,7 @@
|
||||||
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
|
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
|
||||||
<div class="universal-th-text {{title-class}}">{{title}}</div>
|
<div class="universal-th-text {{title-class}}">{{title}}</div>
|
||||||
<div class="dropdown universal-dropdown {{search}}">
|
<div class="dropdown universal-dropdown {{search}}">
|
||||||
<button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
|
<button class="btn btn-sm" id="dLabel" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
|
||||||
<i class="fa fa-search"></i>
|
<i class="fa fa-search"></i>
|
||||||
<span class="caret"></span>
|
<span class="caret"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -126,7 +126,8 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</form>
|
</form>
|
||||||
|
<div>{{total_entries}}</div>
|
||||||
|
<div>{{export_button}}</div>
|
||||||
{{pagination_goes_here}}
|
{{pagination_goes_here}}
|
||||||
<script>
|
<script>
|
||||||
// $(document).ready(function(){
|
// $(document).ready(function(){
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,197 @@
|
||||||
|
<style>
|
||||||
|
.combined-search-inner{
|
||||||
|
border: 1px solid #d5d5d5;
|
||||||
|
background: #f6f6f6;
|
||||||
|
padding: 0.5em;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
}
|
||||||
|
.input-group2{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.more-btn {
|
||||||
|
background-color: #c93a42;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
&:hover{
|
||||||
|
color:#fff!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#combined-search{
|
||||||
|
max-width:250px;
|
||||||
|
flex: 0 0 75%;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
height: calc(1.5em + .75rem + 2px);
|
||||||
|
padding: .375rem .75rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #495057;
|
||||||
|
background-color: #fff;
|
||||||
|
background-clip: padding-box;
|
||||||
|
border: 1px solid #ced4da;
|
||||||
|
border-radius: .25rem;
|
||||||
|
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
||||||
|
}
|
||||||
|
tr>th:first-child{
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
tr>td:first-child{
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
.universal-table-index3{
|
||||||
|
table-layout: auto!important;
|
||||||
|
}
|
||||||
|
.universal-dropdown-menu {
|
||||||
|
padding: 15px 18px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.universal-th-text {
|
||||||
|
padding: 8px 0 0 0;
|
||||||
|
display: inline;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.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 {
|
||||||
|
margin-left: 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>
|
||||||
|
<form class="form-inline universal-form-inline universal-form-inline5 universal-index5" action="{{url}}" method="get">
|
||||||
|
<table class="table table-hover table-striped universal-table-index universal-table-index3">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="searchbtn">
|
||||||
|
<div class="ken-click">
|
||||||
|
<a href="{{url}}" class="universal-btn btn btn-info {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
|
||||||
|
<button class="searchbtn2 btn-primary " title="查詢" class="btn btn-default"><i class="fa-solid fa-magnifying-glass"></i>查詢</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="searchbox">
|
||||||
|
<div class="theadsearch2">
|
||||||
|
<div class="row col-md-10 col-xs-12" data-list="searchable-columns" data-level="0">
|
||||||
|
<div class="{{col-class}}">
|
||||||
|
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></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-2 col-xs-12 submit-btn-wrap">
|
||||||
|
<button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<caption>
|
||||||
|
<h3 class="i-annc__page-title"><span>{{table-name}}</span></h3>
|
||||||
|
</caption>
|
||||||
|
|
||||||
|
|
||||||
|
<thead class="theadsearch">
|
||||||
|
<tr data-list="head-columns" data-level="0">
|
||||||
|
<th class="col-ken">
|
||||||
|
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a><div class="universal-th-text {{title-class}}">{{title}}</div>
|
||||||
|
<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-bs-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">送出<i class="fa fa-arrow-right" aria-hidden="true"></i></button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody data-level="0" data-list="rows" class="kentbody">
|
||||||
|
<tr class="tdken" data-level="1" data-list="columns">
|
||||||
|
<td>{{text}}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</form>
|
||||||
|
<div>{{total_entries}}</div>
|
||||||
|
<div>{{export_button}}</div>
|
||||||
|
{{pagination_goes_here}}
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
$('.tdken>td:nth-child(4)').prepend($('.col-ken:nth-child(4)>.universal-th-text '));
|
||||||
|
$('.tdken>td:nth-child(3)').prepend($('.col-ken:nth-child(3)>.universal-th-text '));
|
||||||
|
$(".universal-th-text").append(" :");
|
||||||
|
# $(".tdken").append('<i class="fa-solid fa-thumbtack"></i>');
|
||||||
|
$('.voice-player').each(function () {
|
||||||
|
// 取得 <i> 元素
|
||||||
|
const icon = $(this).find('i')[0];
|
||||||
|
if (icon) {
|
||||||
|
// 取得 <i> 前面的節點
|
||||||
|
const prevNode = icon.previousSibling;
|
||||||
|
// 如果是文字節點，則移除
|
||||||
|
if (prevNode && prevNode.nodeType === 3) {
|
||||||
|
prevNode.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,197 @@
|
||||||
|
<style>
|
||||||
|
.combined-search-inner{
|
||||||
|
border: 1px solid #d5d5d5;
|
||||||
|
background: #f6f6f6;
|
||||||
|
padding: 0.5em;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
}
|
||||||
|
.input-group2{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.more-btn {
|
||||||
|
background-color: #c93a42;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
&:hover{
|
||||||
|
color:#fff!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#combined-search{
|
||||||
|
max-width:250px;
|
||||||
|
flex: 0 0 75%;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
height: calc(1.5em + .75rem + 2px);
|
||||||
|
padding: .375rem .75rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #495057;
|
||||||
|
background-color: #fff;
|
||||||
|
background-clip: padding-box;
|
||||||
|
border: 1px solid #ced4da;
|
||||||
|
border-radius: .25rem;
|
||||||
|
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
||||||
|
}
|
||||||
|
tr>th:first-child{
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
tr>td:first-child{
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
.universal-table-index3{
|
||||||
|
table-layout: auto!important;
|
||||||
|
}
|
||||||
|
.universal-dropdown-menu {
|
||||||
|
padding: 15px 18px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.universal-th-text {
|
||||||
|
padding: 8px 0 0 0;
|
||||||
|
display: inline;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.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 {
|
||||||
|
margin-left: 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>
|
||||||
|
<form class="form-inline universal-form-inline universal-form-inline6 universal-index6" action="{{url}}" method="get">
|
||||||
|
<table class="table table-hover table-striped universal-table-index universal-table-index3">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="searchbtn">
|
||||||
|
<div class="ken-click">
|
||||||
|
<a href="{{url}}" class="universal-btn btn btn-info {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
|
||||||
|
<button class="searchbtn2 btn-primary " title="查詢" class="btn btn-default"><i class="fa-solid fa-magnifying-glass"></i>查詢</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="searchbox">
|
||||||
|
<div class="theadsearch2">
|
||||||
|
<div class="row col-md-10 col-xs-12" data-list="searchable-columns" data-level="0">
|
||||||
|
<div class="{{col-class}}">
|
||||||
|
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></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-2 col-xs-12 submit-btn-wrap">
|
||||||
|
<button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<caption>
|
||||||
|
<h3 class="i-annc__page-title"><span>{{table-name}}</span></h3>
|
||||||
|
</caption>
|
||||||
|
|
||||||
|
|
||||||
|
<thead class="theadsearch">
|
||||||
|
<tr data-list="head-columns" data-level="0">
|
||||||
|
<th class="col-ken">
|
||||||
|
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a><div class="universal-th-text {{title-class}}">{{title}}</div>
|
||||||
|
<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-bs-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">送出<i class="fa fa-arrow-right" aria-hidden="true"></i></button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody data-level="0" data-list="rows" class="kentbody">
|
||||||
|
<tr class="tdken" data-level="1" data-list="columns">
|
||||||
|
<td>{{text}}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</form>
|
||||||
|
<div>{{total_entries}}</div>
|
||||||
|
<div>{{export_button}}</div>
|
||||||
|
{{pagination_goes_here}}
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
$('.tdken>td:nth-child(4)').prepend($('.col-ken:nth-child(4)>.universal-th-text '));
|
||||||
|
$('.tdken>td:nth-child(3)').prepend($('.col-ken:nth-child(3)>.universal-th-text '));
|
||||||
|
$(".universal-th-text").append(" :");
|
||||||
|
# $(".tdken").append('<i class="fa-solid fa-thumbtack"></i>');
|
||||||
|
$('.voice-player').each(function () {
|
||||||
|
// 取得 <i> 元素
|
||||||
|
const icon = $(this).find('i')[0];
|
||||||
|
if (icon) {
|
||||||
|
// 取得 <i> 前面的節點
|
||||||
|
const prevNode = icon.previousSibling;
|
||||||
|
// 如果是文字節點，則移除
|
||||||
|
if (prevNode && prevNode.nodeType === 3) {
|
||||||
|
prevNode.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,154 @@
|
||||||
|
<style>
|
||||||
|
tr>th:first-child{
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
tr>td:first-child{
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
.universal-table-index3{
|
||||||
|
table-layout: auto!important;
|
||||||
|
}
|
||||||
|
.universal-dropdown-menu {
|
||||||
|
padding: 15px 18px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.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-table-index tbody {
|
||||||
|
counter-reset: item;
|
||||||
|
} */
|
||||||
|
.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>
|
||||||
|
<form class="form-inline universal-form-inline " action="{{url}}" method="get">
|
||||||
|
<table id="tdstylesp" class="table table-hover table-striped universal-table-index universal-table-index3">
|
||||||
|
<div class="searchbtn">
|
||||||
|
<div class="ken-click">
|
||||||
|
<a href="{{url}}" class="universal-btn btn btn-info {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
|
||||||
|
<button class="searchbtn2 btn-primary " title="查詢" class="btn btn-default"><i class="fa-solid fa-magnifying-glass"></i>查詢</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="searchbox">
|
||||||
|
<div class="theadsearch2">
|
||||||
|
<div class="row col-md-10 col-xs-12" data-list="searchable-columns" data-level="0">
|
||||||
|
<div class="{{col-class}}">
|
||||||
|
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></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-2 col-xs-12 submit-btn-wrap">
|
||||||
|
<button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<caption>
|
||||||
|
<h3>{{table-name}}</h3>
|
||||||
|
</caption>
|
||||||
|
<thead class="theadsearch">
|
||||||
|
<tr data-list="head-columns" data-level="0">
|
||||||
|
<th class="col-ken">
|
||||||
|
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><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-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
|
||||||
|
<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>
|
||||||
|
</form>
|
||||||
|
<div>{{total_entries}}</div>
|
||||||
|
<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");
|
||||||
|
// });
|
||||||
|
// $('.universal-table-index thead tr').prepend('<th></th>')
|
||||||
|
// $('.universal-table-index tbody tr').prepend('<td></td>')
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,146 @@
|
||||||
|
<style>
|
||||||
|
.universal-table-index4{
|
||||||
|
table-layout: auto!important;
|
||||||
|
}
|
||||||
|
.universal-dropdown-menu {
|
||||||
|
padding: 15px 18px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.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-table-index tbody {
|
||||||
|
counter-reset: item;
|
||||||
|
} */
|
||||||
|
.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>
|
||||||
|
<form class="form-inline universal-form-inline " action="{{url}}" method="get">
|
||||||
|
<table id="tdstylesp" class="table table-hover table-striped universal-table-index universal-table-index4">
|
||||||
|
<div class="searchbtn">
|
||||||
|
<div class="ken-click">
|
||||||
|
<a href="{{url}}" class="universal-btn btn btn-info {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
|
||||||
|
<button class="searchbtn2 btn-primary " title="查詢" class="btn btn-default"><i class="fa-solid fa-magnifying-glass"></i>查詢</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="searchbox">
|
||||||
|
<div class="theadsearch2">
|
||||||
|
<div class="row col-md-10 col-xs-12" data-list="searchable-columns" data-level="0">
|
||||||
|
<div class="{{col-class}}">
|
||||||
|
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></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-2 col-xs-12 submit-btn-wrap">
|
||||||
|
<button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<caption>
|
||||||
|
<h3>{{table-name}}</h3>
|
||||||
|
</caption>
|
||||||
|
<thead class="theadsearch">
|
||||||
|
<tr data-list="head-columns" data-level="0">
|
||||||
|
<th class="col-ken">
|
||||||
|
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><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-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
|
||||||
|
<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>
|
||||||
|
</form>
|
||||||
|
<div>{{total_entries}}</div>
|
||||||
|
<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");
|
||||||
|
// });
|
||||||
|
// $('.universal-table-index thead tr').prepend('<th></th>')
|
||||||
|
// $('.universal-table-index tbody tr').prepend('<td></td>')
|
||||||
|
</script>
|
||||||
|
|
@ -33,7 +33,41 @@
|
||||||
},
|
},
|
||||||
"thumbnail" : "thumb.png",
|
"thumbnail" : "thumb.png",
|
||||||
"default": true
|
"default": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "index5",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "5. 卡片兩欄單純表格列表 + 多欄位搜尋",
|
||||||
|
"en" : "5. card 2-col Pure index table+ Multiple Field Search"
|
||||||
|
},
|
||||||
|
"thumbnail" : "thumb.png"
|
||||||
}
|
}
|
||||||
|
,
|
||||||
|
{
|
||||||
|
"filename" : "index6",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "6. 卡片三欄單純表格列表 + 多欄位搜尋",
|
||||||
|
"en" : "6. card 3-col Pure index table+ Multiple Field Search"
|
||||||
|
},
|
||||||
|
"thumbnail" : "thumb.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "index7",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "7.rwd左右 單純表格列表 + 多欄位搜尋",
|
||||||
|
"en" : "7.rwd左右 col Pure index table+ Multiple Field Search"
|
||||||
|
},
|
||||||
|
"thumbnail" : "thumb.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "index8",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "8.rwd左右 含序號表格列表 + 多欄位搜尋",
|
||||||
|
"en" : "8.rwd左右 col Index Table with serial number + Multiple Field Search"
|
||||||
|
},
|
||||||
|
"thumbnail" : "thumb.png",
|
||||||
|
"default": true
|
||||||
|
}
|
||||||
],
|
],
|
||||||
"widgets" : [
|
"widgets" : [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue