layUi 表格处理
1.条件搜索
2.展示图片-多图并排显示
3.图片后放大效果，
4.不同的状态显示不同的标签
5.点击弹出确认框
6.弹出弹出层
7.编辑后刷新当前页面保留条件搜索
效果图
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>BUG信息</legend>
</fieldset>
// 搜索条件
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">审核状态</label>
<div class="layui-input-inline">
<select id="search_flag_list" lay-filter="search_status_list" lay-search="">
<option value="0">待审核</option>
<option value="1">已通过</option>
<option value="2">审核不过</option>
</select>
</div>
<label class="layui-form-label">条件</label>
<div class="layui-input-inline">
<select id="search_game_list" lay-filter="search_status_list" lay-search="">
<option value="1">条件1</option>
<option value="2">条件2</option>
<option value="3">条件3</option>
</select>
</div>
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" autocomplete="off" placeholder="请输入账号" class="layui-input" id="search_account">
</div>
<a href="javascript:;" class="layui-btn layui-btn-radius layui-btn-sm" style="margin-top:4px;" id="search_btn">
<i class="layui-icon"></i> 搜索
</a>
</div>
<div class="layui-form-item">
<a href="javascript:;" class="layui-btn layui-btn-sm " style="margin-top:4px;" id="pass_btn">
通过
</a>
<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-danger" style="margin-top:4px;" id="no_btn">
拒绝
</a>
</div>
</form>
<div class="layui-field-box">
<table class="layui-table" id="table_list" lay-filter="table_list">
</table>
</div>
<form id="bug_list_form" class="layui-form" style="display:none">
<div class="layui-field-box">
<table class="layui-table" id="bug_list" lay-size="lg ">
</table>
</div>
</form>
<script type="text/javascript" src="../../../js/layui/225/layui.js"></script>
<script id="tool_bar_tmp" type="text/html">
<a href="javascript:;" lay-event="list_bug" class="layui-btn layui-btn-sm ">提交bug详情</a>
</script>
<script>
layui.use(['form','layer','laydate','table','checkBrowser'], function() {
var $ = layui.jquery,
checkBrowser = layui.checkBrowser,
layer = layui.layer,
laydate = layui.laydate,
form = layui.form,
table = layui.table,
url = "./bug.php?do=";
table.on('sort(table_list)', function(obj){
list(obj.field, obj.type);
});
function list(field, order){
table.render({
elem: '#table_list',
cols: [[
{type:'checkbox'},
{field: 'id', title: 'id', width: 88, align: 'center'},
{field: 'account', title: '账号', width: 120, align: 'center'},
{field: 'role_name', title: '角色名', width: 180, align: 'center'},
{field: 'imgs', title: '图片', width: 300, align: 'center', templet: function(d){
var s = "<div style='display:inline-block'>";
for(j = 0,len=d.imgs.length; j < len; j++) {
var url = d.imgs[j].thumb_url;
s += '<img src= '+url+' style="width: 50px; height: 50px ;margin: 0 5px" οnclick="showBigImage(this)" />';
}
s += "</div>";
return s;
}},
{field: 'description', title: '描述', width: 180, align: 'center'},
{field: 'video_link', title: '视频链接', width: 180, align: 'center'},
{field: 'source_game_id', title: '入口游戏id', width: 80, align: 'center',templet: function(data){
if (data['source_game_id'] ==3){
return '<button type="button" class="layui-btn layui-btn-sm">英语</button>';
}else if(data['flag'] ==9){
return '<button type="button" class="layui-btn layui-btn-sm ">西语</button>';
}else if(data['flag'] ==42) {
return '<button type="button" class="layui-btn layui-btn-sm ">阿语</button>';
}
}},
{field: 'flag', title: '审核状态', width: 180, align: 'center', templet: function(data){
if (data['flag'] ==0){
return '<button type="button" class="layui-btn layui-btn-sm">待审核</button>';
}else if(data['flag'] ==1){
return '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">通过</button>';
}else if(data['flag'] ==2) {
return '<button type="button" class="layui-btn layui-btn-sm layui-btn-warm">拒绝</button>';
}
}},
{title: '操作', align:'center', width: 200, toolbar: '#tool_bar_tmp'},
{field: 'admin', title: '审核人员', width: 180, align: 'center', sort: true},
{field: 'player_id', title: '角色id', width: 180, align: 'center'},
{field: 'ip', title: 'ip', width: 120, align: 'center'},
{field: 'create_time', title: '创建时间', width: 180, align: 'center'},
{field: 'update_time', title: '更新时间', width: 180, align: 'center'},
{field: 'ymd', title: '创建日期', width: 180, align: 'center', sort: true}
]],
limit: 10,
method: 'post',
url: url+'list',
where:{
field: field,
order: order,
account: $('#search_account').val(),
search_flag_list: $('#search_flag_list').val(),
search_game_list: $('#search_game_list').val()
},
page: true,
id: 'table_list',
done: function(data){
}
});
};
function bugList(player_id){
table.render({
elem: '#bug_list',
cols: [[
{field: 'imgs', title: '图片', width: 300, align: 'center', templet: function(d){
var s = "<div style='display:inline-block'>";
for(j = 0,len=d.imgs.length; j < len; j++) {
var url = d.imgs[j].thumb_url;
s += '<img src= '+url+' style="width: 50px; height: 50px ;margin: 0 5px" οnclick="showBigImage(this)" />';
}
s += "</div>";
return s;
}},
{field: 'video_link', title: '视频连接', width: 180, align: 'center'},
{field: 'flag', title: '审核状态', width: 180, align: 'center', templet: function(data){
if (data['flag'] ==0){
return '<button type="button" class="layui-btn layui-btn-sm">待审核</button>';
}else if(data['flag'] ==1){
return '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">通过</button>';
}else if(data['flag'] ==2) {
return '<button type="button" class="layui-btn layui-btn-sm layui-btn-warm">拒绝</button>';
}
}},
{field: 'create_time', title: '上传时间', width: 180, align: 'center'},
{field: 'update_time', title: '更新时间', width: 120, align: 'center'},
{field: 'admin', title: '审核人', width: 180, align: 'center'}
]],
method: 'post',
url: url+'BugList',
where:{
player_id: player_id
},
id: 'list_bug',
done: function(data){
layer.open({
type: 1,
title: 'bug提交记录',
content: $('#bug_list_form'),
scrollbar: true,
resize: false,
shade: 0,
area: ['1000px', '600px']
});
}
});
};
table.on('tool(table_list)', function(obj){
var _id = obj['data']['player_id'];
switch(obj['event']){
case 'list_bug':
bugList(_id);
break;
default:
layer.msg('灵异操作');
}
});
$('#search_btn').click(function(){
list('id', 'desc');
});
$("#pass_btn").click(function(){
var checkStatus = table.checkStatus('table_list');
var ids = [];
$(checkStatus.data).each(function (i, o){
ids.push(o.id);
});
if(ids.length <1){
layer.msg('请选择要审核的数据');
return false
}
if(ids.length >1){
layer.msg('每次只能审核一条数据');
return false
}
layer.confirm('确认同意通过这条bug吗？', {
btn : [ '确定', '取消' ]//按钮
}, function(index) {
$.ajax({
type: "post",
data: {ids: ids[0]},
url: url+'Access',
async: true,
dataType: "json",
success: function(data) {
layer.msg(data.msg,{time: 2000},function(){
if(data.success){
table.reload('table_list', {
page: {
curr: 1 //重新从第 1 页开始
}
, where: {//这里传参 向后台
account: $('#search_account').val(),
search_flag_list: $('#search_flag_list').val(),
search_game_list: $('#search_game_list').val()
//可传多个参数到后台... ，分隔
}
, url: url+'list'//后台做模糊搜索接口路径
, method: 'post'
});
}
});
}
});
});
});
$("#no_btn").click(function(){
var checkStatus = table.checkStatus('table_list');
var ids = [];
$(checkStatus.data).each(function (i, o){
ids.push(o.id);
});
if(ids.length <1){
layer.msg('请选择要审核的数据');
return false
}
if(ids.length >1){
layer.msg('每次只能审核一条数据');
return false
}
layer.confirm('确认拒绝通过这条bug吗？', {
btn : [ '确定', '取消' ]//按钮
}, function(index) {
$.ajax({
type: "post",
data: {ids: ids[0]},
url: url+'NoAccess',
async: true,
dataType: "json",
success: function(data) {
layer.msg(data.msg,{time: 2000},function(){
if(data.success){
table.reload('table_list', {
page: {
curr: 1 //重新从第 1 页开始
}
, where: {//这里传参 向后台
account: $('#search_account').val(),
search_flag_list: $('#search_flag_list').val(),
search_game_list: $('#search_game_list').val()
//可传多个参数到后台... ，分隔
}
, url: url+'list'//后台做模糊搜索接口路径
, method: 'post'
});
}
});
}
});
});
console.log('nopass');
});
list('id', 'desc');
});
</script>
<script type="text/javascript">
//显示大图片
function showBigImage(e) {
layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true, //点击阴影关闭
area: [], //宽高
content: "<img src=" + $(e).attr('src') + " style='witdh:500px;height:400px;' />"
});
}
</script>
1990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
