263 lines
8.4 KiB
HTML
263 lines
8.4 KiB
HTML
{template "header.html"}
|
||
|
||
<style>
|
||
.api-join-wrap {
|
||
--aj-primary: #3598dc;
|
||
--aj-primary-hover: #2a7ab9;
|
||
--aj-border: #e8ecf1;
|
||
--aj-bg: #f7f9fc;
|
||
--aj-text: #3d4a5c;
|
||
--aj-muted: #8a96a8;
|
||
--aj-radius: 6px;
|
||
--aj-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
|
||
}
|
||
.api-join-wrap .api-join-search {
|
||
background: var(--aj-bg);
|
||
border: 1px solid var(--aj-border);
|
||
border-radius: var(--aj-radius);
|
||
padding: 12px 14px;
|
||
margin-bottom: 14px;
|
||
box-shadow: var(--aj-shadow);
|
||
}
|
||
.api-join-wrap .api-join-search form {
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.api-join-wrap .api-join-search .search-input-wrap {
|
||
flex: 1;
|
||
min-width: 180px;
|
||
position: relative;
|
||
}
|
||
.api-join-wrap .api-join-search .search-input-wrap .fa-search {
|
||
position: absolute;
|
||
left: 11px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--aj-muted);
|
||
font-size: 13px;
|
||
pointer-events: none;
|
||
}
|
||
.api-join-wrap .api-join-search .form-control {
|
||
height: 34px;
|
||
padding-left: 32px;
|
||
border-color: #dce3ed;
|
||
border-radius: var(--aj-radius);
|
||
box-shadow: none;
|
||
transition: border-color .2s, box-shadow .2s;
|
||
}
|
||
.api-join-wrap .api-join-search .form-control:focus {
|
||
border-color: var(--aj-primary);
|
||
box-shadow: 0 0 0 3px rgba(53, 152, 220, 0.12);
|
||
}
|
||
.api-join-wrap .api-join-search .btn.blue {
|
||
height: 34px;
|
||
padding: 0 16px;
|
||
border-radius: var(--aj-radius);
|
||
font-weight: 500;
|
||
letter-spacing: 0.02em;
|
||
transition: background-color .2s, transform .15s;
|
||
}
|
||
.api-join-wrap .api-join-search .btn.blue:hover {
|
||
background-color: var(--aj-primary-hover);
|
||
}
|
||
.api-join-wrap .api-join-search .btn.blue:active {
|
||
transform: scale(0.98);
|
||
}
|
||
.api-join-wrap .table-scrollable {
|
||
border: 1px solid var(--aj-border);
|
||
border-radius: var(--aj-radius);
|
||
overflow: hidden;
|
||
box-shadow: var(--aj-shadow);
|
||
background: #fff;
|
||
}
|
||
.api-join-wrap .api-join-table {
|
||
margin-bottom: 0;
|
||
border: 0;
|
||
}
|
||
.api-join-wrap .api-join-table thead tr.heading th {
|
||
background: linear-gradient(180deg, #f9fbfd 0%, #f1f5f9 100%);
|
||
color: var(--aj-text);
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
border-bottom: 1px solid var(--aj-border);
|
||
padding: 10px 12px;
|
||
white-space: nowrap;
|
||
}
|
||
.api-join-wrap .api-join-table thead tr.heading th.myselect {
|
||
width: 42px;
|
||
text-align: center;
|
||
}
|
||
.api-join-wrap .api-join-table tbody td {
|
||
padding: 9px 12px;
|
||
color: var(--aj-text);
|
||
font-size: 13px;
|
||
vertical-align: middle;
|
||
border-color: #eef2f6;
|
||
transition: background-color .15s;
|
||
}
|
||
.api-join-wrap .api-join-table tbody tr:hover td {
|
||
background-color: #f5f9fd;
|
||
}
|
||
.api-join-wrap .api-join-table tbody tr:nth-child(even) td {
|
||
background-color: #fbfcfe;
|
||
}
|
||
.api-join-wrap .api-join-table tbody tr:nth-child(even):hover td {
|
||
background-color: #f5f9fd;
|
||
}
|
||
.api-join-wrap .api-join-table tbody td:first-child + td {
|
||
color: var(--aj-muted);
|
||
font-family: Consolas, Monaco, monospace;
|
||
font-size: 12px;
|
||
}
|
||
.api-join-wrap .api-join-table .myselect {
|
||
text-align: center;
|
||
}
|
||
.api-join-wrap .api-join-table .mt-checkbox > span {
|
||
border-radius: 3px;
|
||
}
|
||
.api-join-wrap .api-join-footer {
|
||
padding: 14px 0 4px;
|
||
margin: 0;
|
||
}
|
||
.api-join-wrap .api-join-footer .pagination {
|
||
margin: 0;
|
||
}
|
||
.api-join-wrap .api-join-footer .pagination > li > a,
|
||
.api-join-wrap .api-join-footer .pagination > li > span {
|
||
border-radius: var(--aj-radius);
|
||
margin: 0 2px;
|
||
color: var(--aj-text);
|
||
border-color: var(--aj-border);
|
||
transition: all .15s;
|
||
}
|
||
.api-join-wrap .api-join-footer .pagination > li > a:hover {
|
||
background: var(--aj-bg);
|
||
border-color: #c5d3e3;
|
||
color: var(--aj-primary);
|
||
}
|
||
.api-join-wrap .api-join-footer .pagination > .active > a,
|
||
.api-join-wrap .api-join-footer .pagination > .active > a:hover,
|
||
.api-join-wrap .api-join-footer .pagination > .active > a:focus,
|
||
.api-join-wrap .api-join-footer .pagination > .active > span,
|
||
.api-join-wrap .api-join-footer .pagination > .active > span:hover,
|
||
.api-join-wrap .api-join-footer .pagination > .active > span:focus,
|
||
.api-join-wrap .api-join-footer .pagination > li.active > a,
|
||
.api-join-wrap .api-join-footer .pagination > li.active > a:hover,
|
||
.api-join-wrap .api-join-footer .pagination > li.active > span {
|
||
color: #fff;
|
||
background: var(--aj-primary);
|
||
border-color: var(--aj-primary);
|
||
}
|
||
.api-join-wrap .api-join-empty td {
|
||
text-align: center;
|
||
color: var(--aj-muted);
|
||
padding: 36px 12px !important;
|
||
font-size: 13px;
|
||
}
|
||
.api-join-wrap .api-join-empty td:before {
|
||
content: "\f07b";
|
||
font-family: FontAwesome;
|
||
display: block;
|
||
font-size: 28px;
|
||
color: #c5d0dc;
|
||
margin-bottom: 8px;
|
||
}
|
||
</style>
|
||
|
||
<div class="api-join-wrap">
|
||
<div class="api-join-search table-search-tool">
|
||
<form action="{SELF}" method="get">
|
||
{$search}
|
||
<div class="search-input-wrap">
|
||
<i class="fa fa-search"></i>
|
||
<input type="text" class="form-control" placeholder="{dr_lang('输入关键词搜索')}" value="{$param['keyword']}" name="keyword" />
|
||
</div>
|
||
<button type="submit" class="btn blue btn-sm onloading" name="submit">
|
||
<i class="fa fa-search"></i> {dr_lang('搜索')}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<form class="form-horizontal" role="form" id="myform">
|
||
{dr_form_hidden()}
|
||
<input type="hidden" name="isajax" value="1">
|
||
<div class="table-scrollable">
|
||
<table class="table table-striped table-bordered table-hover table-checkable dataTable api-join-table">
|
||
<thead>
|
||
<tr class="heading">
|
||
<th class="myselect">
|
||
<label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
|
||
<input type="checkbox" class="group-checkable" data-set=".checkboxes" />
|
||
<span></span>
|
||
</label>
|
||
</th>
|
||
<th width="100">Id</th>
|
||
{loop $field['setting']['option']['field'] $tt}
|
||
{if $tt['field']}
|
||
<th width="{$tt['width']}">{$tt['name']}</th>
|
||
{/if}
|
||
{/loop}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{table table=$table where=$where order=updatetime page=1 pagesize=$pagesize urlrule=$urlrule}
|
||
<tr class="odd gradeX" id="dr_row_{$t.id}">
|
||
<td class="myselect">
|
||
<label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
|
||
<input type="checkbox" class="checkboxes" name="ids[]" value="{$t.id}" />
|
||
<span></span>
|
||
</label>
|
||
</td>
|
||
<td>{$t.id}</td>
|
||
{loop $field['setting']['option']['field'] $tt}
|
||
{if $tt['field']}
|
||
<td>{dr_list_function($tt.func, $t[$tt['field']], $param, $t, NULL, NULL)}</td>
|
||
{/if}
|
||
{/loop}
|
||
</tr>
|
||
{/table}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="row fc-list-footer api-join-footer">
|
||
<div class="col-md-12 text-center">
|
||
{$pages}
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<script>
|
||
$(function () {
|
||
var $tbody = $('.api-join-table tbody');
|
||
if ($tbody.children('tr').length === 0) {
|
||
var colCount = $('.api-join-table thead th').length || 1;
|
||
$tbody.append('<tr class="api-join-empty"><td colspan="' + colCount + '">' + '{dr_lang('暂无数据')}' + '</td></tr>');
|
||
}
|
||
|
||
$('.pagination a').click(function () {
|
||
if ($('.checkboxes').is(':checked')) {
|
||
var url = $(this).attr('href');
|
||
var msg = '{dr_lang('离开本页面后，当前选择的项目将被取消')}';
|
||
layer.confirm(
|
||
msg,
|
||
{
|
||
icon: 3,
|
||
shade: 0,
|
||
title: lang['ts'],
|
||
btn: [lang['ok'], lang['esc']]
|
||
}, function(index){
|
||
window.location.href = url;
|
||
return true;
|
||
});
|
||
return false;
|
||
}
|
||
});
|
||
})
|
||
</script>
|
||
{template "footer.html"}
|