直接上代码
切记 :layer 的table.render 加载table的时候默认请求类型为get;最好强制为post ;加上 method:'post';
否则360兼容模式和ie浏览器下或出现请求304,从浏览器缓存中获取数据,而非服务端实时数据
<script src="/system/actionplan/layuiadmin/layui/layui.js"></script>
<!--主表操作 -->
<!-- wbstatue 上报状态 wbauditstatue 审核状态 -->
<script type="text/html" id="toolbaroperate">
{{# if(d.wbstatue == 0) { }}
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">删除</a>
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="submitdata" data-type="test7" >上报</a>
{{# }}}
{{# if(d.wbauditstatue == 0 && d.wbstatue == 1){ }}
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="agree" data-type="test7" >同意</a>
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="disagree" data-type="test7" >驳回</a>
{{# }}}
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="view">查看</a>
</script>
<script type="text/html" id="tablestatusinfo">
{{# if(d.wbstatue == 0){ }}
<a class="">未上报</a>
{{# }}}
{{# if(d.wbstatue == 1) {}}
<a class="">已上报</a>
{{# }}}
{{# if(d.wbauditstatue == 0) {}}
<a class="">未审核</a>
{{# }}}
{{# if(d.wbauditstatue == 1) {}}
<a class="">审核通过</a>
{{# }}}
{{# if(d.wbauditstatue == 2) {}}
<a class="">被驳回</a>
{{# }}}
</script>
<!--子表操作 -->
<script type="text/html" id="item-table-operate-bar">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="view1">查看</a>
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="itemaddbutton">
{{# if(d.wbstatue == 0){ }}
<div style="margin-bottom: 10px;"><button class="layui-btn layui-btn-sm layui-btn-primary " onclick="additem()">新增活动</button></div>
{{# }}}
</script>
<script type="text/html" id="item-table-statusinfo">
</script>
<script type="text/javascript">
var issubmit = 0; // 0 全部 1 已上报 2已上报
var wbmonthplanid = 0;
var alltable = null;
var notable = null;
var istable = null;
var itemtable = null;
var allexist= $("li[lay-id='allitem']");
var isdealexist = $("li[lay-id='isitem']");
layui.config({
base: '/system/actionplan/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'table','element','jquery','laytpl'], function(){
var table = layui.table
,admin = layui.admin;
var element = layui.element;
var laytpl = layui.laytpl;
var active = {
//加载all表
initalltable:function(){
alltable = table.render({
elem: '#all-table-operate'
,url: layui.setter.base + 'json/table/' //数据请求地址 json 格式封装
,request:{
pageName: 'pageNum' //页码的参数名称,默认:page
,limitName: 'limitNum' //每页数据量的参数名,默认:limit
}
,where:{'itemtype':0,issubmit:issubmit}
,cols: [[
{type:'checkbox'}
,{field:'wbmonthplanid', width:80, title: 'ID', sort: true, }
,{field:'wbplantopic',width:180, title: '计划标题'}
,{field:'wbplandate', width:180, title: '计划月份'}
,{field:'createdate', width:180, title: '创建时间'}
,{field:'deptcodename', width:160, title: '申报部门'}
,{field:'wbstateinfo', width:160, title: '状态',templet:'#tablestatusinfo'}
,{field:'tool', width:320, title: '操作', templet: '#toolbaroperate'}
]]
,page: true
});
}
,initnotable:function(){
notable = table.render({
elem: '#nodeal-table-operate'
,url: layui.setter.base + 'json/table/' //数据请求地址 json 格式封装
,request:{
pageName: 'pageNum' //页码的参数名称,默认:page
,limitName: 'limitNum' //每页数据量的参数名,默认:limit
}
,where:{'itemtype':1,issubmit:issubmit}
,cols: [[
{type:'checkbox'}
,{field:'wbmonthplanid', width:80, title: 'ID', sort: true, }
,{field:'wbplantopic',width:180, title: '计划标题'}
,{field:'wbplandate', width:180, title: '计划月份'}
,{field:'createdate', width:180, title: '创建时间'}
,{field:'deptcodename', width:160, title: '申报部门'}
,{field:'wbstateinfo', width:160, title: '状态',templet:'#tablestatusinfo'}
,{field:'tool', width:320, title: '操作', templet: '#toolbaroperate'}
]]
,page: true
});
}
,initistable:function(){
istable = table.render({
elem: '#isdeal-table-operate'
,url: layui.setter.base + 'json/table/querymonthlist.jsp'
,request:{
pageName: 'pageNum' //页码的参数名称,默认:page
,limitName: 'limitNum' //每页数据量的参数名,默认:limit
}
,where:{'itemtype':2,issubmit:issubmit}
,cols: [[
{type:'checkbox'}
,{field:'wbmonthplanid', width:80, title: 'ID', sort: true, }
,{field:'wbplantopic',width:180, title: '计划标题'}
,{field:'wbplandate', width:180, title: '计划月份'}
,{field:'createdate', width:180, title: '创建时间'}
,{field:'deptcodename', width:160, title: '申报部门'}
,{field:'wbstateinfo', width:160, title: '状态',templet:'#tablestatusinfo'}
,{field:'tool', width:320, title: '操作', templet: '#toolbaroperate'}
]]
,page: true
});
}
,inititemtable:function(){
itemtable = table.render({
elem: '#test-table-operate'
,url: layui.setter.base + 'json/table/querymonthitemlist' //数据请求地址 json 格式封装
,request:{
pageName: 'pageNum' //页码的参数名称,默认:page
,limitName: 'limitNum' //每页数据量的参数名,默认:limit
}
,where:{'wbmonthplanid':wbmonthplanid}
,cols: [[
{type:'checkbox'}
,{field:'wbmonthitemid', width:80, title: 'ID', sort: true, }
,{field:'wbitemtopic', width:260, title: '活动主题'}
,{field:'zbdeptname', width:160, title: '主办单位'}
,{field:'sbdengname', width:170, title: '承办单位'}
,{field:'createdate', width:170, title: '创建时间'}
,{field:'wbstateinfo', width: 220, title: '状态',templet:'#item-table-statusinfo'}
,{field:'tool', width:280, title: '操作', templet: '#item-table-operate-bar'}
]]
,page: true
});
}
}
//监听工具条
table.on('checkbox(test-table-operate)', function(obj){
var data = obj.data;
});
//监听toolbar
table.on('tool(all-table-operate)', function(obj){
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的DOM对象
if(layEvent === 'view'){ //查看
//do somehing
} else if(layEvent === 'del'){ //删除
layer.confirm('确认要删除吗', function(index){
obj.del();
layer.close(index);
});
} else if(layEvent === 'edit'){ //编辑
}else if(layEvent == 'agree'){
//同意
layer.confirm('同意此活动吗', function(index){
/* obj.update({
username: '123'
,title: 'xxx'
}); */
layer.close(index);
//向服务端发送删除指令
});
}else if(layEvent == 'disagree'){
//驳回 添加审核意见
}else if(layEvent == 'submitdata'){
//上报
layer.confirm('确认上报总中心?', function(index){
obj.update({
wbstateinfo: '已上报'
});
layer.close(index);
//向服务端发送删除指令
});
}
});
if(allexist.length >0){
alltable = active.initalltable();
}
if(isdealexist.length >0){
active.initistable();
}
//监听行双击事件 刷新子表数据 rowDouble
table.on('row(all-table-operate)', function(obj){
var data = obj.data;
wbmonthplanid = data.wbmonthplanid;
//加载子表新增模板
var getTpl = itemaddbutton.innerHTML;
var itembuttondivview = document.getElementById('itembuttondiv');
laytpl(getTpl).render(data, function(html){
itembuttondivview.innerHTML = html;
});
if(itemtable != null){
itemtable.reload({
elem:'#test-table-operate'
,where:{'wbmonthplanid':wbmonthplanid}
});
}else{
itemtable = active.inititemtable();
}
});
//监听item
element.on('tab(component-tabs-hash)', function(data){
var layId=$(this).attr('lay-id');
if(layId == "allitem"){
if( alltable != null){
alltable.reload({
elem:'#all-table-operate'
,where:{'itemtype':0,'issubmit':issubmit}
});
}else{
//初始化table
alltable = active.initalltable();
}
}
if(layId == "isitem"){
if( istable != null){
istable.reload({
elem:'#isdeal-table-operate'
,where:{'itemtype':'2'}
});
}else{
istable = active.initistable();
}
}
if(layId == "noitem"){
if(notable != null){
notable.reload({
elem:'#nodeal-table-operate'
,where:{'itemtype':'1'}
});
}else{
notable = active.initnotable();
}
}
});
});
function unuse(){
//layer.prompt({title: '输入任何口令,并确认', formType: 1}, function(pass, index){
//layer.close(index);
layer.prompt({title: '拒绝原因', formType: 2}, function(text, index){
layer.close(index);
layer.msg('演示完毕!您的口令:'+ pass +'<br>您最后写下了:'+text);
});
// });
}
function use(){
layer.alert('同意此活动');
}
function add(){
var index = layer.open({
title: '新增月计划',
type: 2,
content: 'monthadd.jsp',
area: ['600px', '400px'],
maxmin: true
});
layer.full(index);
}