ken
/
orbit_demo_new_old4
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'萬用表格'

This commit is contained in:
kenlee 2024-12-09 13:26:15 +08:00
parent a1da2d695a
commit d8347bf893
8 changed files with 204 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/stylesheets/template/modules/announcement.scss
View File

@ -2369,10 +2369,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
} }
.s-annc__flie-title { .s-annc__flie-title {
max-width: 9.375rem;
overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis;
} }
.s-annc__social > * { .s-annc__social > * {

60
assets/stylesheets/template/modules/universal-table.scss
View File

@ -74,10 +74,11 @@
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
position: absolute; position: absolute;
right: 1em; right:1em;
z-index: 99; z-index: 99;
@media(max-width: $screen-xs){ @media(max-width: $screen-xs){
margin-top: 0.5em; margin-top: 0.5em;
right:0;
} }
.searchbtn2, .universal-btn { .searchbtn2, .universal-btn {
line-height: 2em; line-height: 2em;
@ -203,3 +204,60 @@
-o-transition: .3s all ease; -o-transition: .3s all ease;
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;
}
}
}

3
assets/stylesheets/template/template.scss
View File

@ -41,7 +41,7 @@
// container setting // container setting
.response-container { .response-container {
position: relative; position: relative;
margin: auto; margin:auto!important;
@media (max-width: $screen-xs) { @media (max-width: $screen-xs) {
width: 100%; width: 100%;
} }
@ -501,5 +501,4 @@ input.search_box{
display: flex; display: flex;
flex-wrap: wrap-reverse!important; flex-wrap: wrap-reverse!important;
} }
} }

67
modules/universal_table/index.html.erb
View File

@ -1,5 +1,38 @@
<style> <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{ .universal-th-text{
white-space: pre!important;
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
@ -53,16 +86,15 @@
width: 120px; width: 120px;
} }
</style> </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> <caption>
<h3>{{table-name}}</h3> <h3>{{table-name}}</h3>
<a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a> <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
</caption> </caption>
<thead> <thead>
<tr data-list="head-columns" data-level="0"> <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> <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 universal-dropdown {{search}}">
<button class="btn btn-sm" 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> <i class="fa fa-search"></i>
@ -78,6 +110,7 @@
</form> </form>
</div> </div>
</div> </div>
<div class="universal-th-text {{title-class}}">{{title}}</div>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -91,33 +124,7 @@
<div>{{export_button}}</div> <div>{{export_button}}</div>
{{pagination_goes_here}} {{pagination_goes_here}}
<script> <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> </script>
<style> <style>
.universal-table-index.dtr-inline.collapsed td.dtr-control{ .universal-table-index.dtr-inline.collapsed td.dtr-control{

110
modules/universal_table/index2.html.erb
View File

@ -1,4 +1,37 @@
<style> <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 { .universal-dropdown-menu {
padding: 15px 18px; padding: 15px 18px;
white-space: nowrap; white-space: nowrap;
@ -32,21 +65,6 @@
left: auto; left: auto;
right: 0; 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 { .universal-th-icon {
border: 1px solid #eee; border: 1px solid #eee;
padding: 5px 8px; padding: 5px 8px;
@ -62,45 +80,17 @@
width: 120px; width: 120px;
} }
</style> </style>
<form class="form-inline universal-form-inline" action="{{url}}" method="get"> <table class="table table-hover table-striped universal-table-index universal-table-index3">
<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>
<caption> <caption>
<h3>{{table-name}}</h3> <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> </caption>
<thead class="theadsearch"> <thead>
<tr data-list="head-columns" data-level="0"> <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> <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 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> <i class="fa fa-search"></i>
<span class="caret"></span> <span class="caret"></span>
</button> </button>
@ -114,6 +104,7 @@
</form> </form>
</div> </div>
</div> </div>
<div class="universal-th-text {{title-class}}">{{title}}</div>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -123,25 +114,14 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</form>
<div>{{total_entries}}</div> <div>{{total_entries}}</div>
<div>{{export_button}}</div> <div>{{export_button}}</div>
{{pagination_goes_here}} {{pagination_goes_here}}
<script> <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> </script>
<style>
.universal-table-index.dtr-inline.collapsed td.dtr-control{
vertical-align: middle;
}
</style>

39
modules/universal_table/index3.html.erb
View File

@ -1,4 +1,13 @@
<style> <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 { .universal-dropdown-menu {
padding: 15px 18px; padding: 15px 18px;
white-space: nowrap; white-space: nowrap;
@ -50,8 +59,8 @@
width: 120px; width: 120px;
} }
</style> </style>
<form class="form-inline universal-form-inline" action="{{url}}" method="get"> <form class="form-inline universal-form-inline " action="{{url}}" method="get">
<table class="table table-hover table-striped universal-table-index"> <table class="table table-hover table-striped universal-table-index universal-table-index4">
<div class="searchbtn"> <div class="searchbtn">
<div class="ken-click"> <div class="ken-click">
<div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div> <div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
@ -84,7 +93,7 @@
</caption> </caption>
<thead class="theadsearch"> <thead class="theadsearch">
<tr data-list="head-columns" data-level="0"> <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> <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="universal-th-text {{title-class}}">{{title}}</div>
<div class="dropdown universal-dropdown {{search}}"> <div class="dropdown universal-dropdown {{search}}">
@ -116,18 +125,18 @@
<div>{{export_button}}</div> <div>{{export_button}}</div>
{{pagination_goes_here}} {{pagination_goes_here}}
<script> <script>
$(document).ready(function(){ // $(document).ready(function(){
$("tr>th:first-child").removeClass("col-md-3"); // $("tr>th:first-child").removeClass("col-md-3");
$("tr>th:first-child").addClass("col-md-1"); // $("tr>th:first-child").addClass("col-md-1");
$("tr>th:nth-child(2)").removeClass("col-md-3"); // $("tr>th:nth-child(2)").removeClass("col-md-3");
$("tr>th:nth-child(2)").addClass("col-md-6"); // $("tr>th:nth-child(2)").addClass("col-md-6");
$("tr>th:nth-child(3)").removeClass("col-md-3"); // $("tr>th:nth-child(3)").removeClass("col-md-3");
$("tr>th:nth-child(3)").addClass("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)").removeClass("col-md-3");
$("tr>th:nth-child(4)").addClass("col-md-2"); // $("tr>th:nth-child(4)").addClass("col-md-2");
$("tr>th:nth-child(5)").removeClass("col-md-3"); // $("tr>th:nth-child(5)").removeClass("col-md-3");
$("tr>th:nth-child(5)").addClass("col-md-3"); // $("tr>th:nth-child(5)").addClass("col-md-3");
}); // });
// $('.universal-table-index thead tr').prepend('<th></th>') // $('.universal-table-index thead tr').prepend('<th></th>')
// $('.universal-table-index tbody tr').prepend('<td></td>') // $('.universal-table-index tbody tr').prepend('<td></td>')
</script> </script>

33
modules/universal_table/index4.html.erb
View File

@ -1,4 +1,7 @@
<style> <style>
.universal-table-index4{
table-layout: auto!important;
}
.universal-dropdown-menu { .universal-dropdown-menu {
padding: 15px 18px; padding: 15px 18px;
white-space: nowrap; white-space: nowrap;
@ -50,8 +53,8 @@
width: 120px; width: 120px;
} }
</style> </style>
<form class="form-inline universal-form-inline" action="{{url}}" method="get"> <form class="form-inline universal-form-inline " action="{{url}}" method="get">
<table class="table table-hover table-striped universal-table-index"> <table class="table table-hover table-striped universal-table-index universal-table-index4">
<div class="searchbtn"> <div class="searchbtn">
<div class="ken-click"> <div class="ken-click">
<div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div> <div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
@ -84,7 +87,7 @@
</caption> </caption>
<thead class="theadsearch"> <thead class="theadsearch">
<tr data-list="head-columns" data-level="0"> <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> <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="universal-th-text {{title-class}}">{{title}}</div>
<div class="dropdown universal-dropdown {{search}}"> <div class="dropdown universal-dropdown {{search}}">
@ -116,18 +119,18 @@
<div>{{export_button}}</div> <div>{{export_button}}</div>
{{pagination_goes_here}} {{pagination_goes_here}}
<script> <script>
$(document).ready(function(){ // $(document).ready(function(){
$("tr>th:first-child").removeClass("col-md-3"); // $("tr>th:first-child").removeClass("col-md-3");
$("tr>th:first-child").addClass("col-md-1"); // $("tr>th:first-child").addClass("col-md-1");
$("tr>th:nth-child(2)").removeClass("col-md-3"); // $("tr>th:nth-child(2)").removeClass("col-md-3");
$("tr>th:nth-child(2)").addClass("col-md-6"); // $("tr>th:nth-child(2)").addClass("col-md-6");
$("tr>th:nth-child(3)").removeClass("col-md-3"); // $("tr>th:nth-child(3)").removeClass("col-md-3");
$("tr>th:nth-child(3)").addClass("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)").removeClass("col-md-3");
$("tr>th:nth-child(4)").addClass("col-md-2"); // $("tr>th:nth-child(4)").addClass("col-md-2");
$("tr>th:nth-child(5)").removeClass("col-md-3"); // $("tr>th:nth-child(5)").removeClass("col-md-3");
$("tr>th:nth-child(5)").addClass("col-md-3"); // $("tr>th:nth-child(5)").addClass("col-md-3");
}); // });
// $('.universal-table-index thead tr').prepend('<th></th>') // $('.universal-table-index thead tr').prepend('<th></th>')
// $('.universal-table-index tbody tr').prepend('<td></td>') // $('.universal-table-index tbody tr').prepend('<td></td>')
</script> </script>

22
modules/universal_table/info.json
View File

@ -12,24 +12,24 @@
"filename" : "index2", "filename" : "index2",
"name" : { "name" : {
"zh_tw" : "2. 含序號表格列表", "zh_tw" : "2. 含序號表格列表",
"en" : "2. Index Table with serial number" "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"
}, },
"thumbnail" : "thumb.png", "thumbnail" : "thumb.png",
"default": true "default": true
}, },
{
"filename" : "index3",
"name" : {
"zh_tw" : "3. 單純表格列表 + 多欄位搜尋",
"en" : "3. col Pure index table+ Multiple Field Search"
},
"thumbnail" : "thumb.png"
},
{ {
"filename" : "index4", "filename" : "index4",
"name" : { "name" : {
"zh_tw" : "4. 含序號表格列表new", "zh_tw" : "4.含序號表格列表 + 多欄位搜尋",
"en" : "4. Index Table with serial number new" "en" : "4. col Index Table with serial number + Multiple Field Search"
}, },
"thumbnail" : "thumb.png", "thumbnail" : "thumb.png",
"default": true "default": true