layui.use(['laypage', 'layer', 'table', 'form'], function () {
var laypage = layui.laypage //分页
, $ = layui.jquery
, layer = layui.layer //弹层
, table = layui.table //表格
, form = layui.form;
var tableIds = 'toutiaolist'; //表格ID
//第一个实例
table.render({
elem: '#' + tableIds
, url: '/daytoutiao/daytoutiaoform' //数据接口
, where: {token: csrfToken}
, method: 'post'
, page: true //开启分页
, text: '数据加载中'
, id: 'tablerReload'
, cols: [[ //表头
{type: "checkbox", width:50},
{type: 'numbers', title: '序号', width: 50},
{field: 'name', title: '用户名称', align: 'center'},
{field: 'phone', width: 200, title: '用户电话', align: 'center'},
{field: 'day_title', width: 200, title: '栏目', align: 'center'},
{field: 'send_email', width: 200, title: '邮箱', align: 'center'},
{field: 'efficacious', width: 150, title: '是否有效', align: 'center', templet: function (d) {
switch (d.efficacious) {
case '1':
return '------'
break;
case '2':
return '<span style="color: #5FB878">有效</span>'
break;
}
}},
{
field: 'send_state', title: '发送状态', width: 150, align: 'center', templet: function (d) {
switch (d.send_state) {
case '1':
return '<input type="checkbox" value="' + d.id + '" lay-skin="switch" lay-filter="switchTest" lay-text="|重新发送">'
break;
case '2':
return '已发送'
break;
}
}
},
{field: 'create_time', title: '添加时间', align: 'center'},
{fixed: 'right', title: '操作', width: 180, align: 'center', toolbar: '#toutiaofunc'}
]]
});
table.reload('tablerReload'); //重新加载
var testData = [
{id:1,username:'',phone:''},
{id:2,username:'',phone:''},
{id:3,username:'',phone:''},
{id:4,username:'',phone:''},
{id:5,username:'',phone:''},
{id:6,username:'',phone:''},
{id:7,username:'',phone:''},
{id:8,username:'',phone:''},
{id:9,username:'',phone:''},
{id:10,username:'',phone:''}
]
table.render({
elem: '#test3'
, data: testData//数据接口
, id: 'tablerReload3'
, cols: [[ //表头
{field:'id',title: '序号', width:70,align: 'center'},
{field:'username',title: '姓名', width:250, sort: true, edit: 'text'},
{field:'phone',title: '电话', edit: 'text', minWidth: 350}
]]
});
//列表操作
table.on('tool(' + tableIds + ')', function (obj) {
var layEvent = obj.event,
data = obj.data;
if (layEvent === 'del') {
layer.confirm('您确定要删除吗？', {btn: ['确定', '取消']}, function () {
$.post('/daytoutiao/daytoutiaodel', {id: data.id}, function (data) {
layer.msg(data.msg);
if(data.code == 200){
table.reload('tablerReload');
}
})
})
}else if(layEvent === 'edit'){
var index = layui.layer.open({
type: 2,
title: '添加栏目信息',
closeBtn: 1, //不显示关闭按钮
area: ['60%', '80%'],
content: '/daytoutiao/daytoutiaoedit?id='+data.id //iframe的url，no代表不显示滚动条
, success: function (layero, index) {
},
end: function () {
table.reload('tablerReload');
}
});
}
});
//监听指定开关
form.on('switch(switchTest)', function (data) {
let id = $(data.elem).val();
layer.confirm('您确定要修改当前状态吗？', {btn: ['确认', '取消']}, function (index) {
$.post('/daytoutiao/daytoutiaoanewsend',{id:id},function(res){
layer.msg(res.msg)
table.reload('tablerReload');
},'json')
}, function (index) {
table.reload('tablerReload');
layer.close(index)
})
return false;
});
// 新增
var $ = layui.$, active = {
addData: function () { //获取选中数据
var index = layui.layer.open({
type: 2,
title: '添加栏目信息',
closeBtn: 1, //不显示关闭按钮
area: ['60%', '95%'],
content: '/daytoutiao/daytoutiaoadd' //iframe的url，no代表不显示滚动条
, success: function (layero, index) {
},
end: function () {
table.reload('tablerReload');
}
});
},
setWx:function(){
var checkStatus = table.checkStatus('tablerReload');//获取列表选中项
var formData = new FormData();
$.each(checkStatus.data,function (key,val) {
formData.append('did[]',val.id);
})
$.ajax({
type: "post",
url: "/daytoutiao/daytoutiaosetwx",
data: formData,
contentType: false, //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
error: function (request) {
layer.msg("请联系管理员");
},
success: function (data) {
layer.msg(data.msg);
if(data.code == 200){
table.reload('tablerReload');
}
}
});
return false;
},
reload: function () {//搜索
var form = pfgs_serialize($('form'));
table.reload('tablerReload', {
where: {
name: form.input_name,
list_id: form.input_list_id,
efficacious:form.input_efficacious,
send_state:form.input_send_state,
},
page: {
curr: 1
}
})
},
};
$('.demoTable .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
$('#addrow').on('click',function(){
let Info = table.cache.tablerReload3;
let sun = (Info.length+1);
Info.push({id: sun , username: '' ,phone: ''});
table.reload('tablerReload3', {
data:Info,
limit:sun
})
})
//添加页面提交数据
form.on('submit(adds)', function (data) {
let Info = table.cache.tablerReload3;
let allPhone = true;
let datalist = [];
for(let k in Info){
if(Info[k].phone.length > 0){
if(!isPoneAvailable(Info[k].phone)){
allPhone = false;
Info[k].phone = '<span style="color: red">'+Info[k].phone+'</span>';
}
let d = {'name':Info[k].username,'phone':Info[k].phone}
datalist.push(d);
}
}
if(!allPhone){
table.reload('tablerReload3', {
data:Info,
limit:Info.length
})
layer.msg('请填写正确的电话号码!')
return false;
}
if(datalist.length > 0){
let dataInfo = JSON.stringify(datalist);
let list_id = $('select[name=list_id]').val();
if(!list_id){
layer.msg('请选择栏目')
return false;
}
var index = layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8}); //数据提交提示
$.post('/daytoutiao/daytoutiaoaddform',{data:dataInfo,list_id:list_id},function(res){
layer.msg(res.msg)
layer.close(index);
},'json')
}else{
layer.msg('没有数据')
}
return false;
});
$('input[name=phone]').on('input',function(){
if(!isPoneAvailable($(this).val())){
$(this).parent().css({'border':'1px solid #ff0000'})
}else{
$(this).parent().css({'border':'none'})
}
})
form.on('submit(edits)', function (data) {
// var index = layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8}); //数据提交提示
var formData = new FormData($('form')[0]);
$.ajax({
type: "post",
url: "/daytoutiao/daytoutiaoeditform",
data: formData,
contentType: false, //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
error: function (request) {
layer.close(index);
layer.msg("请联系管理员");
},
success: function (data) {
layer.msg(data.msg);
if(data.code == 200){
parent.layer.close(index); //再执行关闭
}
}
});
return false;
});
function isPoneAvailable(phone) {
var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
if (!myreg.test(phone)) {
return false;
} else {
return true;
}
}
})