提交 f4ede84d 编写于 作者: D devil

表格列表优化,支持操作列浮动

上级 10b7ca28
......@@ -138,8 +138,8 @@
<table class="am-table am-table-striped am-table-hover am-text-middle am-table-bordered am-table-centered am-text-nowrap am-table-td-fixed-last goods-list">
<thead>
<tr>
<th>编号</th>
<th>标题名称</th>
<th>商品ID</th>
<th class="am-max-grid">标题名称</th>
<th>销售价格(元)</th>
<th>上下架</th>
<th>首页推荐</th>
......@@ -155,13 +155,13 @@
{{foreach $data_list as $v}}
<tr id="data-list-{{$v.id}}" {{if $v['is_shelves'] eq 0}}class="am-active"{{/if}}>
<td>{{$v.id}}</td>
<td>
<td class="am-text-left">
<a href="{{$v.goods_url}}" target="_blank" title="{{$v.title}}">
<img src="{{$v['images']}}" class="am-img-thumbnail am-radius goods-images" />
</a>
<a href="{{$v.goods_url}}" target="_blank" title="{{$v.title}}" {{if !empty($v['title_color'])}} style="color:{{$v.title_color}};" {{/if}} >{{$v.title}}</a>
<a href="{{$v.goods_url}}" target="_blank" title="{{$v.title}}" {{if !empty($v['title_color'])}} style="color:{{$v.title_color}};" {{/if}} class="am-nowrap-initial">{{$v.title}}</a>
{{if !empty($v['simple_desc'])}}
<p class="cr-red am-hide-md-down">{{$v.simple_desc}}</p>
<p class="am-text-danger am-nowrap-initial">{{$v.simple_desc}}</p>
{{/if}}
</td>
<td>
......
......@@ -97,163 +97,171 @@
<!-- top operation end -->
<!-- list start -->
<table class="am-table am-table-striped am-table-hover am-text-middle am-margin-top-sm am-margin-left-xs">
<thead>
<tr>
<th>编号</th>
<th>基础信息</th>
<th class="am-hide-sm-only">积分</th>
<th class="am-hide-sm-only">性别</th>
<th class="am-hide-sm-only">状态</th>
<th class="am-hide-sm-only">生日</th>
<th>更多</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{{if !empty($data_list)}}
{{foreach $data_list as $v}}
<tr id="data-list-{{$v.id}}">
<td>{{$v.id}}</td>
<td class="user-info">
<img src="{{$v.avatar}}" class="am-fl am-img-thumbnail am-radius am-hide-sm-only" />
<ul class="user-base am-fl">
<li>名称:{{if empty($v['username'])}}<span class="cr-ccc">未填写</span>{{else /}}{{$v.username}}{{/if}}</li>
<li>昵称:{{if empty($v['nickname'])}}<span class="cr-ccc">未填写</span>{{else /}}{{$v.nickname}}{{/if}}</li>
<li>手机:{{if empty($v['mobile'])}}<span class="cr-ccc">未填写</span>{{else /}}{{$v.mobile}}{{/if}}</li>
<li>邮箱:{{if empty($v['email'])}}<span class="cr-ccc">未填写</span>{{else /}}{{$v.email}}{{/if}}</li>
</ul>
</td>
<td class="am-hide-sm-only">
{{if empty($v['integral'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.integral}}{{/if}}
</td>
<td class="am-hide-sm-only">
{{if empty($v['gender_text'])}}<span class="cr-ddd">未设置</span>{{else /}}{{$v.gender_text}}{{/if}}
</td>
<td class="am-hide-sm-only">
{{if empty($v['status_text'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.status_text}}{{/if}}
</td>
<td class="am-hide-sm-only">
{{if empty($v['birthday_text'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.birthday_text}}{{/if}}
</td>
<td>
<span class="am-icon-caret-down c-p" data-am-modal="{target: '#my-popup{{$v.id}}'}"> 查看更多</span>
<div class="am-popup am-radius" id="my-popup{{$v.id}}">
<div class="am-popup-inner">
<div class="am-popup-hd">
<h4 class="am-popup-title">详情内容</h4>
<span data-am-modal-close class="am-close">&times;</span>
</div>
<div class="am-popup-bd">
<dl class="dl-content">
<dt>用户名</dt>
<dd>{{if empty($v['username'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.username}}{{/if}}</dd>
<div class="am-scrollable-horizontal am-table-scrollable-horizontal am-margin-top-sm">
<table class="am-table am-table-striped am-table-hover am-text-middle am-table-bordered am-table-centered am-text-nowrap am-table-td-fixed-last">
<thead>
<tr>
<th>用户ID</th>
<th class="am-max-grid">基础信息</th>
<th>积分</th>
<th>性别</th>
<th>状态</th>
<th>生日</th>
<th>更多</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{{if !empty($data_list)}}
{{foreach $data_list as $v}}
<tr id="data-list-{{$v.id}}">
<td>{{$v.id}}</td>
<td class="user-info am-text-left">
<img src="{{$v.avatar}}" class="am-fl am-img-thumbnail am-radius" />
<ul class="user-base am-fl">
<li>名称:{{if empty($v['username'])}}<span class="cr-ccc">未填写</span>{{else /}}{{$v.username}}{{/if}}</li>
<li>昵称:{{if empty($v['nickname'])}}<span class="cr-ccc">未填写</span>{{else /}}{{$v.nickname}}{{/if}}</li>
<li>手机:{{if empty($v['mobile'])}}<span class="cr-ccc">未填写</span>{{else /}}{{$v.mobile}}{{/if}}</li>
<li>邮箱:{{if empty($v['email'])}}<span class="cr-ccc">未填写</span>{{else /}}{{$v.email}}{{/if}}</li>
</ul>
</td>
<td>
{{if empty($v['integral'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.integral}}{{/if}}
</td>
<td>
{{if empty($v['gender_text'])}}<span class="cr-ddd">未设置</span>{{else /}}{{$v.gender_text}}{{/if}}
</td>
<td>
{{if empty($v['status_text'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.status_text}}{{/if}}
</td>
<td>
{{if empty($v['birthday_text'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.birthday_text}}{{/if}}
</td>
<td>
<span class="am-icon-caret-down c-p" data-am-modal="{target: '#my-popup{{$v.id}}'}"> 查看更多</span>
<div class="am-popup am-radius" id="my-popup{{$v.id}}">
<div class="am-popup-inner">
<div class="am-popup-hd">
<h4 class="am-popup-title">详情内容</h4>
<span data-am-modal-close class="am-close">&times;</span>
</div>
<div class="am-popup-bd">
<dl class="dl-content">
<dt>用户名</dt>
<dd>{{if empty($v['username'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.username}}{{/if}}</dd>
<dt>昵称</dt>
<dd>{{if empty($v['nickname'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.nickname}}{{/if}}</dd>
<dt>昵称</dt>
<dd>{{if empty($v['nickname'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.nickname}}{{/if}}</dd>
<dt>手机号码</dt>
<dd>{{if empty($v['mobile'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.mobile}}{{/if}}</dd>
<dt>手机号码</dt>
<dd>{{if empty($v['mobile'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.mobile}}{{/if}}</dd>
<dt>电子邮箱</dt>
<dd>{{if empty($v['email'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.email}}{{/if}}</dd>
<dt>电子邮箱</dt>
<dd>{{if empty($v['email'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.email}}{{/if}}</dd>
<dt>状态</dt>
<dd>{{if empty($v['status_text'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.status_text}}{{/if}}</dd>
<dt>状态</dt>
<dd>{{if empty($v['status_text'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.status_text}}{{/if}}</dd>
<dt>支付宝openid</dt>
<dd>{{if empty($v['alipay_openid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.alipay_openid}}{{/if}}</dd>
<dt>支付宝openid</dt>
<dd>{{if empty($v['alipay_openid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.alipay_openid}}{{/if}}</dd>
<dt>百度openid</dt>
<dd>{{if empty($v['baidu_openid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.baidu_openid}}{{/if}}</dd>
<dt>百度openid</dt>
<dd>{{if empty($v['baidu_openid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.baidu_openid}}{{/if}}</dd>
<dt>头条openid</dt>
<dd>{{if empty($v['toutiao_openid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.toutiao_openid}}{{/if}}</dd>
<dt>头条openid</dt>
<dd>{{if empty($v['toutiao_openid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.toutiao_openid}}{{/if}}</dd>
<dt>QQopenid</dt>
<dd>{{if empty($v['qq_openid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.qq_openid}}{{/if}}</dd>
<dt>QQopenid</dt>
<dd>{{if empty($v['qq_openid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.qq_openid}}{{/if}}</dd>
<dt>QQunionid</dt>
<dd>{{if empty($v['qq_unionid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.qq_unionid}}{{/if}}</dd>
<dt>QQunionid</dt>
<dd>{{if empty($v['qq_unionid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.qq_unionid}}{{/if}}</dd>
<dt>微信openid</dt>
<dd>{{if empty($v['weixin_openid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.weixin_openid}}{{/if}}</dd>
<dt>微信openid</dt>
<dd>{{if empty($v['weixin_openid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.weixin_openid}}{{/if}}</dd>
<dt>微信unionid</dt>
<dd>{{if empty($v['weixin_unionid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.weixin_unionid}}{{/if}}</dd>
<dt>微信unionid</dt>
<dd>{{if empty($v['weixin_unionid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.weixin_unionid}}{{/if}}</dd>
<dt>微信webopenid</dt>
<dd>{{if empty($v['weixin_web_openid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.weixin_web_openid}}{{/if}}</dd>
<dt>微信webopenid</dt>
<dd>{{if empty($v['weixin_web_openid'])}}<span class="cr-ddd">未知</span>{{else /}}{{$v.weixin_web_openid}}{{/if}}</dd>
<dt>性别</dt>
<dd>{{if empty($v['gender_text'])}}<span class="cr-ddd">未设置</span>{{else /}}{{$v.gender_text}}{{/if}}</dd>
<dt>性别</dt>
<dd>{{if empty($v['gender_text'])}}<span class="cr-ddd">未设置</span>{{else /}}{{$v.gender_text}}{{/if}}</dd>
<dt>生日</dt>
<dd>{{if empty($v['birthday_text'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.birthday_text}}{{/if}}</dd>
<dt>生日</dt>
<dd>{{if empty($v['birthday_text'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.birthday_text}}{{/if}}</dd>
<dt>所在省</dt>
<dd>{{if empty($v['province'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.province}}{{/if}}</dd>
<dt>所在省</dt>
<dd>{{if empty($v['province'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.province}}{{/if}}</dd>
<dt>所在市</dt>
<dd>{{if empty($v['city'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.city}}{{/if}}</dd>
<dt>所在市</dt>
<dd>{{if empty($v['city'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.city}}{{/if}}</dd>
<dt>详细地址</dt>
<dd>{{if empty($v['address'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.address}}{{/if}}</dd>
<dt>详细地址</dt>
<dd>{{if empty($v['address'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.address}}{{/if}}</dd>
<dt>积分</dt>
<dd>{{if empty($v['integral'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.integral}}{{/if}}</dd>
<dt>积分</dt>
<dd>{{if empty($v['integral'])}}<span class="cr-ddd">未填写</span>{{else /}}{{$v.integral}}{{/if}}</dd>
<dt>用户头像</dt>
<dd>
{{if !empty($v['avatar'])}}
<img src="{{$v['avatar']}}" class="am-img-thumbnail am-radius" width="100" height="100" />
{{else /}}
<span class="cr-ddd">暂无图片</span>
{{/if}}
</dd>
<dt>用户头像</dt>
<dd>
{{if !empty($v['avatar'])}}
<img src="{{$v['avatar']}}" class="am-img-thumbnail am-radius" width="100" height="100" />
{{else /}}
<span class="cr-ddd">暂无图片</span>
{{/if}}
</dd>
<dt>注册时间</dt>
<dd>{{$v.add_time}}</dd>
<dt>注册时间</dt>
<dd>{{$v.add_time}}</dd>
<dt>更新时间</dt>
<dd>{{$v.upd_time}}</dd>
</dl>
</div>
</div>
</div>
</td>
<td class="view-operation">
<a href="{{:MyUrl('admin/user/saveinfo', array_merge($params,array('id'=>$v['id'])))}}">
<button class="am-btn am-btn-secondary am-btn-xs am-radius am-icon-edit"> 编辑</button>
</a>
<button class="am-btn am-btn-danger am-btn-xs am-radius am-icon-trash-o submit-delete" data-url="{{:MyUrl('admin/user/delete')}}" data-id="{{$v.id}}"> 删除</button>
<dt>更新时间</dt>
<dd>{{$v.upd_time}}</dd>
</dl>
</div>
</div>
</div>
</td>
<td class="view-operation">
<a href="{{:MyUrl('admin/user/saveinfo', array_merge($params,array('id'=>$v['id'])))}}">
<button class="am-btn am-btn-secondary am-btn-xs am-radius am-btn-block">
<i class="am-icon-edit"></i>
<span>编辑</span>
</button>
</a>
<button class="am-btn am-btn-danger am-btn-xs am-radius am-margin-top-xs am-btn-block submit-delete" data-url="{{:MyUrl('admin/user/delete')}}" data-id="{{$v.id}}">
<i class="am-icon-trash-o"></i>
<span>删除</span>
</button>
<!-- 用户列表操作钩子 -->
{{if isset($shopxo_is_develop) and $shopxo_is_develop eq true and (!isset($is_footer) or $is_footer eq 1)}}
<div class="plugins-tag">
<span>plugins_view_admin_user_list_operation</span>
</div>
{{/if}}
{{php}}
$hook_name = 'plugins_view_admin_user_list_operation';
$hook_data = Hook::listen($hook_name, ['hook_name'=>$hook_name, 'is_backend'=>true, 'id'=>$v['id'], 'data'=>$v]);
if(!empty($hook_data) && is_array($hook_data))
{
foreach($hook_data as $hook)
<!-- 用户列表操作钩子 -->
{{if isset($shopxo_is_develop) and $shopxo_is_develop eq true and (!isset($is_footer) or $is_footer eq 1)}}
<div class="plugins-tag">
<span>plugins_view_admin_user_list_operation</span>
</div>
{{/if}}
{{php}}
$hook_name = 'plugins_view_admin_user_list_operation';
$hook_data = Hook::listen($hook_name, ['hook_name'=>$hook_name, 'is_backend'=>true, 'id'=>$v['id'], 'data'=>$v]);
if(!empty($hook_data) && is_array($hook_data))
{
if(is_string($hook) || is_int($hook))
foreach($hook_data as $hook)
{
echo htmlspecialchars_decode($hook);
if(is_string($hook) || is_int($hook))
{
echo htmlspecialchars_decode($hook);
}
}
}
}
{{/php}}
</td>
</tr>
{{/foreach}}
{{/if}}
</tbody>
</table>
{{/php}}
</td>
</tr>
{{/foreach}}
{{/if}}
</tbody>
</table>
</div>
{{if empty($data_list)}}
<div class="table-no"><i class="am-icon-warning"></i> 没有相关数据</div>
{{/if}}
......
......@@ -422,12 +422,19 @@ button.colorpicker-submit:active {
border: 0;
margin: 0;
}
.am-table-scrollable-horizontal .am-table .am-nowrap-initial {
white-space: initial;
}
.am-table-scrollable-horizontal .am-table tr th:first-child,
.am-table-scrollable-horizontal .am-table tr td:first-child {
border-left: 0;
}
.am-table-scrollable-horizontal .am-table tr th {
background: #e0e0e0;
background: #e8e6e6;
min-width: 100px;
}
.am-table-scrollable-horizontal .am-table tr th.am-max-grid {
min-width: 300px;
}
.am-table-scrollable-horizontal .am-table-td-fixed-first th:nth-child(2),
.am-table-scrollable-horizontal .am-table-td-fixed-first td:nth-child(2) {
......
......@@ -1558,50 +1558,57 @@ function MapInit(lng, lat, level, point, is_dragend)
*/
function TableContainerInit()
{
$('.am-table-scrollable-horizontal .am-table.am-table-td-fixed-first thead tr, .am-table-scrollable-horizontal .am-table.am-table-td-fixed-last thead tr').each(function(k, v)
{
// 第一列
if($(this).parents('.am-table').hasClass('am-table-td-fixed-first'))
{
$(this).find('th:first').css('left', $(this).parents('.am-table').offset().left);
}
if($('.am-table-scrollable-horizontal').length > 0)
{
// th
$('.am-table-scrollable-horizontal .am-table.am-table-td-fixed-first thead tr, .am-table-scrollable-horizontal .am-table.am-table-td-fixed-last thead tr').each(function(k, v)
{
// 第一列
if($(this).parents('.am-table').hasClass('am-table-td-fixed-first'))
{
$(this).find('th:first').css('left', $(this).parents('.am-table').offset().left);
}
// 最后一列
if($(this).parents('.am-table').hasClass('am-table-td-fixed-last'))
{
var $obj = $(this).parents('.am-table');
var width = $(document.body).width();
var left = $obj.offset().left;
var right = (width > $obj.width()) ? width-$obj.width()-left : width-$obj.parent().width()-left;
$(this).find('th:last').css('right', right);
}
});
$('.am-table-scrollable-horizontal .am-table.am-table-td-fixed-first tbody tr, .am-table-scrollable-horizontal .am-table.am-table-td-fixed-last tbody tr').each(function(k, v)
{
// 容器
var height = $(this).height();
if(height > 0)
{
$(this).find('td').css('height', height+'px');
}
// 第一列
if($(this).parents('.am-table').hasClass('am-table-td-fixed-first'))
{
$(this).find('td:first').css('left', $(this).parents('.am-table').offset().left);
}
// 最后一列
if($(this).parents('.am-table').hasClass('am-table-td-fixed-last'))
{
var $obj = $(this).parents('.am-table');
var width = $(document.body).width();
var left = $obj.offset().left;
var right = width-$obj.parent().width()-left;
$(this).find('th:last').css('right', right);
}
});
// 最后一列
if($(this).parents('.am-table').hasClass('am-table-td-fixed-last'))
{
var $obj = $(this).parents('.am-table');
var width = $(document.body).width();
var left = $obj.offset().left;
var right = (width > $obj.width()) ? width-$obj.width()-left : width-$obj.parent().width()-left;
$(this).find('td:last').css('right', right);
}
});
// td
$('.am-table-scrollable-horizontal .am-table.am-table-td-fixed-first tbody tr, .am-table-scrollable-horizontal .am-table.am-table-td-fixed-last tbody tr').each(function(k, v)
{
console.log(1)
// 容器
var height = $(this).height();
if(height > 0)
{
$(this).find('td').css('height', height+'px');
}
// 第一列
if($(this).parents('.am-table').hasClass('am-table-td-fixed-first'))
{
$(this).find('td:first').css('left', $(this).parents('.am-table').offset().left);
}
// 最后一列
if($(this).parents('.am-table').hasClass('am-table-td-fixed-last'))
{
var $obj = $(this).parents('.am-table');
var width = $(document.body).width();
var left = $obj.offset().left;
var right = width-$obj.parent().width()-left;
$(this).find('td:last').css('right', right);
}
});
}
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册