{include file='common/head'}
<link rel="stylesheet" href="__LayuiAdmin__style/admin.css" media="all">
<body>
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">标题</label>
<div class="layui-input-inline">
<input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
</button>
</div>
</div>
</div>
<div class="layui-card-body">
<div style="padding-bottom: 10px;">
<button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
<button class="layui-btn layuiadmin-btn-list layui-btn-danger" data-type="batchdel">删除</button>
<button class="layui-btn layuiadmin-btn-list" data-type="reload">重新加载</button>
</div>
<table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
<script type="text/html" id="table-content-list">
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
</div>
</div>
</div>
{include file='common/foot'}
<script>
layui.use(['index', 'table','rate'], function () {
var table = layui.table
, admin = layui.admin
, rate = layui.rate
, form = layui.form;
//执行一个 table 实例
table.render({
elem: '#table-content-list'
, url: '{:url("page/index")}' //数据接口
, page: true //开启分页
// , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
, loading: true
, id: 'LAY-app-content-list' //添加修改页面对应的回调id
, method: 'post'
, limit: 10
, limits: [5, 10, 15, 20, 25, 30]
, text: {
none: '没有符合条件' //默认：无数据。
}
, cols: [[ //表头
{ type: 'checkbox', fixed: 'left' }
, { field: 'id', title: 'ID', width: 80, sort: true }
, { field: 'title', title: '标题' }
, { field: 'content', title: '内容', }
//应用于连表后，属性处于多层嵌套情况
, { field: 'score', title: '积分' ,width:100,templet:function(res){
return (res.scoreGoods ? res.scoreGoods.score : '');
}}
//layui评分
,{ field:'star',title:'评分',id:'rate',
templet:function(d){
return`<divid="star${d.id}"style="font-size:13px;">${d.id}</div>`;
}
}
, { fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#table-content-list' }
]]
//回调函数，在里面设置rate.render(),给rate循环赋值,显示评分
,done:function(res){
var data = res.data;//返回的json中data数据
for (var item in data) {
rate.render({
elem: `#star${data[item].id}`
,value: data[item].star //值
, half: true //支持半颗星
, length: 5 //星星个数
, theme: '#1E9FFF' //颜色
, text: true //显示文本，默认显示 '3.5星'
, readonly: true //只读
, setText: function(value){ //自定义文本的回调
var arrs = {
'1': '极差'
,'2': '差'
,'3': '中等'
,'4': '好'
,'5': '极好'
};
this.span.text(arrs[value] || ( value + "星"));
}
});
};
}
});
//监听行工具事件
table.on('tool(LAY-app-content-list)', function (obj) { //注：tool 是工具条事件名，LAY-app-content-list 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
, layEvent = obj.event; //获得 lay-event 对应的值
if (layEvent === 'del') {
layer.confirm('真的删除行么', function (index) {
layer.close(index);
//向服务端发送删除指令
admin.req({
method: 'post'
, url: '{:url("page/del")}'
, data: { id: data.id }
, success: function (res) {
if (res.code == 0) {
layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
obj.del(); //删除对应行（tr）的DOM结构
table.reload('LAY-app-content-list');
parent.layer.close(index); //再执行关闭
});
return false;
}
}
//,……
});
});
} else if (layEvent === 'edit') {
layer.open({
type: 2
, title: '修改'
, content: "/admin/page/edit?id=" + data.id
, maxmin: true
, area: ['550px', '550px']
, btn: ['确定', '取消']
, yes: function (index, layero) {
//点击确认触发 iframe 内容中的按钮提交
var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
submit.click();
}
});
}
});
//监听搜索
form.on('submit(LAY-app-contlist-search)', function (data) {
var field = data.field , length = 0;
for(key in field){
length += field[key].length;
//值为空则不追加该搜索条件
if (field[key].length === 0) {
delete field[key];
}
}
if(length === 0){
return layer.msg('请输入搜索值');
}
//执行重载
table.reload('LAY-app-content-list', {
where: field,
page: { curr: 1 } //搜索的时候,从第一页开始,否则会出现搜索不到对应数据情况
});
});
var $ = layui.$, active = {
batchdel: function () {
var checkStatus = table.checkStatus('LAY-app-content-list')
, checkData = checkStatus.data; //得到选中的数据
if (checkData.length === 0) {
return layer.msg('请选择数据');
}
layer.confirm('确定删除吗？', function (index) {
var ids = [];
$.each(checkData, function (i, value) {
ids.push(value.id)
})
//执行 Ajax 后重载
admin.req({
method: 'post'
, url: '{:url("page/del")}'
, data: { id: ids }
, success: function (res) {
if (res.code == 0) {
layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
parent.layui.table.reload('LAY-app-content-list'); //重载表格
parent.layer.close(index); //再执行关闭
});
return false;
}
}
//,……
});
table.reload('LAY-app-content-list');
layer.msg('已删除');
});
},
add: function () {
layer.open({
type: 2
, title: '添加'
, content: "{:url('page/add')}"
, maxmin: true
, area: ['550px', '550px']
, btn: ['确定', '取消']
, yes: function (index, layero) {
//点击确认触发 iframe 内容中的按钮提交
var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
submit.click();
}
});
},
reload: function () {
table.reload('LAY-app-content-list', {
where: {}, //清除筛选条件
page: { curr: 1 }
});
}
};
$('.layui-btn.layuiadmin-btn-list').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
浙公网安备 33010602011771号