頁面樣式：
![]()
![]()
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>問答頻道後臺</title>
<link rel="stylesheet" rev="stylesheet" href="style/style.css?v=4" type="text/css" />
<link rel="stylesheet" href="/layui/css/layui.css" id="layui">
<style type="text/css">
.mtab div{
float:left;
display:inline-block;
margin-left:100px;
font-size:14px;
color:#222;
line-height:30px;
height:30px;
}
.mtab div b{
padding:0 5px 0 3px;
font-size:16px;
color:#f00;
}
.mtab div span{
padding-left:32px;
}
a:visited {
color: #555;
text-decoration: none;
}
a:link {
color: #555;
text-decoration: none;
}
</style>
</head>
<body>
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-xs12">
<div class="layui-card">
<div class="layui-card-header">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" >
<ul class="layui-tab-title" style="padding-left: 15px">
<li lay-id="a1" class="layui-this">問答帖子列表</li>
<li lay-id="a2" >已刪除列表</li>
</ul>
</div>
</div>
<div class="layui-card-body">
<div class="demoTable" style="padding-left: 15px">
<div class="layui-inline">
<input class="layui-input" style="height:30px" name="id" id="idReload" autocomplete="off" placeholder="帖子ID">
</div>
或
<div class="layui-inline">
<input class="layui-input" style="height:30px" name="id" id="useridReload" autocomplete="off" placeholder="用戶ID">
</div>
<button class="layui-btn layui-btn-xs layui-btn-primary" data-type="reload">
<i class="layui-icon layui-icon-search" style="font-size: 30px; color: #555;"></i>
搜索
</button>
</div>
<table id="list_hash" lay-filter="cms_reply_list"></table>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/html" id="user_hash">
<a href="http://www.qubaobei.com/badmin/user/info.php?site=1&user_id={{d.user_id}}&mobile=" target="_blank" style="text-decoration:underline">{{d.user}}</a>
</script>
<script type="text/html" id="cms_list_hash">
//a標籤鏈接
<a href="http://***/detail.php?id={{ d.id }}" target="_blank" class="layui-btn layui-btn-primary">原文</a>
{{#
if(d.state==1){
}}
<a class="layui-btn layui-btn-danger" lay-event="del">刪除</a>
{{#
}else{
}}
<a class="layui-btn" lay-event="back">還原</a>
{{# } }}
</script>
<style type="text/css">
{# 設置table每一行的height #}
.layui-table img {
max-width: 100px;
}
.layui-table-cell{
height:auto;
overflow:visible;
text-overflow:inherit;
white-space:normal;
}
</style>
<script src="/layui/layui.js"></script>
<script>
var pageLoadIndex;
layui.use(['table','element','jquery'], function () {
var $ = layui.jquery,
element = layui.element, //Tab的切換功能，切換事件監聽等，需要依賴element模塊
table = layui.table;
getList();
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
var active = {
reload: function(){
var idReload = $('#idReload');
var useridReload = $('#useridReload');
//執行重載
table.reload('testReload', {
page: {
curr: 1 //重新從第 1 頁開始
}
,where: {
id: idReload.val(),
user_id:useridReload.val()
}
});
}
};
//卡片切換
element.on('tab(docDemoTabBrief)', function(data){
var index = data.index;
if(index==0){
var state=1;
}else{
var state=2;
}
table.reload('testReload', {
page: {
curr: 1 //重新從第 1 頁開始
}
,where: {
state: state
}
});
});
//工具欄操作
table.on('tool(cms_reply_list)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
var data = obj.data; //獲得當前行數據
var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值）
var tr = obj.tr; //獲得當前行 tr 的DOM對象
switch(layEvent)
{
case 'del':
update_state(data.id,0);
break;
case 'back':
update_state(data.id,1);
break;
case 'lookReply':
layer.open({
type: 2,
offset: '5px',
area: ['1300px','700px'],
fix: false, //不固定
maxmin: true,
shadeClose: true,
shade: 0.4,
title: data.title,
content: "ask_special_reply_list.php?post_id="+data.id
});
break;
default:
break;
}
function update_state(id,state){
$.get(
'http://*****',
{'method':'change_ask_post','state':state,'id':id},
function(data){
if(data.ret == 1){
obj.del(tr); //刪除對應行（tr）的DOM結構
// var i = layer.msg(result.msg,{icon:1,time: 1000},function(){ layer.close(i);});
}else{
var i = layer.msg(data.msg,{icon:2,time: 1000},function(){ layer.close(i);});
}
},'json');
}
});
//監聽單元格編輯
table.on('edit(cms_reply_list)', function(obj){
var value = obj.value //得到修改後的值
,data = obj.data //得到所在行所有鍵值
,field = obj.field; //得到字段
var da = {'id':data.id,'field':field,'value':value};
if(data.id){
var url = 'cms/update_field';
}else{
layer.msg('數據錯誤');
return false;
}
$.get(
url,
da,
function(data){
var obj = JSON.parse(data);
if(obj.ret == 1){
var index = layer.alert(obj.msg,{icon:1},function(){ layer.close(index);});
}else{
var index = layer.alert(obj.msg,{icon:2},function(){ layer.close(index);});
}
});
});
function getList(){
//第一個實例
table.render({
method: 'get',
limit: 50,
elem: '#list_hash',
// even:true,
height: 'full-10',
url: '******?method=get_ask_post_list',
page: true, //開啓分頁
cols: [
[ //表頭
{
field: 'id',
title: 'ID',
width: '8%',
align: 'center'
},{
field: 'title',
title: '標題',
width: '21%',
event: 'lookReply',
style: 'cursor: pointer;'
},{
field: 'content',
title: '內容',
width: '20%'
},{
field: 'user',
title: '用戶',
width: '8%',
templet:'#user_hash'
},{
field: 're_num',
title: '回覆',
width: '5%'
},{
field: 'like_num',
title: '點贊',
width: '5%'
},{
field: 'view_num',
title: '瀏覽',
width: '5%'
},{
field: 'dated',
title: '日期',
width: '10%'
},{
width: '18%',
align: 'center',
title: '操作',
toolbar: '#cms_list_hash'
}
]
],
id: 'testReload',
loading: false,//關閉加載樣式
page: { //支持傳入 laypage 組件的所有參數（某些參數除外，如：jump/elem） - 詳見文檔
layout: [ 'prev', 'page', 'next', 'skip'] //自定義分頁佈局
,groups: 8 //只顯示 8 個連續頁碼
,first: '首頁' //顯示首頁
,last: '100' //顯示尾頁
},
done: function (res, curr, count) {
// 添加分頁加載動畫的函數
$('.layui-laypage > a').each(function () {
$(this).attr('onclick', "pageLoading(this)");
});
layer.close(pageLoadIndex); // 渲染完成後關閉動畫
}
});
}
//監聽行單擊事件
table.on('row(cms_reply_list)', function(obj){
last_reply_id = obj.data.id;
reply_obj = obj;
});
//修改加載樣式
window.pageLoading = function (that) {
//添加頁碼禁用樣式
$(".layui-box").find("a").addClass('layui-disabled');
//添加表格的loading動畫
pageLoadIndex = layer.load(0, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
}
});
</script>
