1.数据表格列表渲染
<script>
layui.config({
base: "${base}/resources/layui/lay/mymodules/"
}).extend({ //设定模块别名
tablePlug: 'tablePlug/tablePlug' //相对于上述 base 目录的子目录
}).use(['layer','form','table','laydate','tablePlug','element','util'], function(){
var layer = layui.layer //弹层
,table = layui.table //表格
,element = layui.element //元素操作
,util = layui.util//工具集
,laydate = layui.laydate
,tablePlug = layui.tablePlug
,form = layui.form,$=layui.$;
tablePlug.smartReload.enable(true);//开启智能重载模式
$.ajaxSetup({cache:false});//设置IE下ajax不缓存
laydate.render({
elem: '#fromDate'
,max:layui.util.toDateString('${toDate}','yyyy-MM-dd')
,done: function(value, date, toDate){
toDate.config.min = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds
}
}
});
laydate.render({
elem: '#toDate'
,min:layui.util.toDateString('${fromDate}','yyyy-MM-dd')
,done: function(value, date, fromDate){
fromDate.config.max = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds
}
}
});
//对表格进行渲染
var tableIns = table.render({
elem: '#contract_other_list' //表格数据的id
,toolbar: '#toolbarDemo' //表格行的事件
,smartReloadModel: true
,defaultToolbar: ['exports','print']//表单头部导出与打印
,url: "${base}/contractother/contractotherlist.htm?"+encodeURI($('#queryForm').serialize()) //数据接口
,page: true //开启分页
,limit:10
,limits:[10,20,30]
,cols: [[ //表头
{type:'numbers'}
,{field: 'contractId', title: '合同编号',width:98,align:'center',style:'text-align: center;'}
,{field: 'contractName',title: '简要说明',minWidth:120,align:'center',style:'text-align: center;'}
,{field: 'typeName',title: '合同类型',width:70,align:'center',style:'text-align: center;'}
,{field: 'vendorName',title: '供应商',minWidth:180}
//,{field: 'deptName',title: '签约部门',width:105,align:'center',style:'text-align: center;'}
,{field: 'serviceUser',title: '维护人',width:70,align:'center',style:'text-align: center;'}
,{field: 'signDate',title: '签约日期',width:90,align:'center',style:'text-align: center;'
,templet: function(d){
var date=d.signDate;
date=date.replace(new RegExp(/-/gm) ,"/");
return layui.util.toDateString(date,'yyyy-MM-dd');
}
}
,{field: 'startDate',title: '开始日期',width:105,align:'center',style:'text-align: center;',hide:true}
,{field: 'endDate',title: '服务期',minWidth:100,align:'center',style:'text-align: center;'
,templet: function(d){
var startDate=d.startDate.replace(new RegExp(/-/gm) ,"/");
var endDate=d.endDate.replace(new RegExp(/-/gm) ,"/");
return layui.util.toDateString(startDate,'yyyy-MM-dd') +' '+ layui.util.toDateString(endDate,'yyyy-MM-dd');
}
}
,{field: 'amount',title: '合同金额',width:82,align:'center',style:'text-align: center;'}
,{field: 'status',title: '审批状态',width:70,align:'center',style:'text-align: center;',toolbar: '#barDemo'}
// ,{field: 'processUser',title: '审批人',width:82,align:'center',style:'text-align: center;'}
,{field: 'archiveStatus',title: '归档状态',width:70,align:'center',style:'text-align: center;'
,templet: function(d){
if(d.archiveStatus == '1'){
var archiveTime=d.archiveTime.replace(new RegExp(/-/gm) ,"/");
return "<font color=green>已归档</font> "+d.archiveUser+" "+layui.util.toDateString(archiveTime,'yyyy-MM-dd');
}else{
if(${assfn:listEquals(mainAuths,'ARCHIVE') ==2} && 11 == d.status){
return "<font color='red'>未归档</font>";
}else{
return "<font color='red'>未归档</font>";
}
}
}
}
,{field: 'archiveUser',title: '归档人员',width:102,align:'center',style:'text-align: center;',hide:true}
,{field: 'archiveTime',title: '归档日期',width:102,align:'center',style:'text-align: center;',hide:true}
,{field: 'recordUser',title: '登记人',width:75,align:'center',style:'text-align: center;'}
,{field: 'recordTime',title: '登记日期',width:82,align:'center',style:'text-align: center;'
,templet: function(d){
var recordTime=d.recordTime?d.recordTime.replace(new RegExp(/-/gm) ,"/"):'';
return layui.util.toDateString(recordTime,'yyyy/MM/dd');
}
}
//,{field:'timeStamp',title:'TimeStamp', width:10,hide:true}
,{title: '操作',width:270,align:'center',style:'text-align: center;',fixed:'right',toolbar: '#barEdit'}
]]
,parseData: function(res){ //res 即为原始返回的数据
//console.log(JSON.stringify(res.rows[0]));
return {
"code": '0', //解析接口状态
"msg": '', //解析提示文本
"count": res.records, //解析数据长度
"data": res.rows //解析数据列表
};
}
});
</script>
2.表头事件监听
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="addRowData">新建其他合同</button>
<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="viewRowData">查看作废合同</button>
</div>
</script>
//头工具栏事件 要写在use(['layer','form',,,], function(){ 花括号内
table.on('toolbar(test)', function(obj){
switch(obj.event){
case 'addRowData':
editRow('',1,0);
break;
case 'viewRowData':
viewRowData();
break;
case 'isAll':
break;
};
});
/* addOrEdit;//0:查看；1：添加；2：修改；5：审核
updateType;//修改类型：0,新增；1，普通修改；2，特殊修改(指的是对已经审批通过或归档的合同进行的修改，需要记录历史)
*/
function editRow(contractId,addOrEdit,updateType){
var title = 0==addOrEdit?'查看合同':1==addOrEdit?'添加合同':2==addOrEdit?'修改合同':'';
layer.open({
type: 2,
title:title,
maxmin:true,
id:'editRow',
shadeClose: true,
shade: 0.8,
offset: '50px',
area: ['915px', '750px'],
content:'${base}/contractother/before2addoredit.htm?addOrEdit='+addOrEdit+'&moduleId=${moduleId}&updateType='+updateType+'&contractId='+contractId
,cancel: function(index, layero){
tableReload();//重新加载表格数据
layer.close(index);
}
});
}
//查看作废合同
function viewRowData(){
var title = '已作废合同';
layer.open({
type: 2,
title:title,
maxmin:true,
id:'viewRowData',
shadeClose: true,
shade: 0.6,
offset: '50px',
area: ['900px', '630px'],
content:'${base}/contractother/viewotherdel.htm'
,cancel: function(index, layero){
tableReload();
layer.close(index);
}
});
}
3.监听表行操作栏事件
查看，修改，变更事件，都是使用layui的弹出层，根据相同方法不同参数，会跳到一个同一个编辑信息页面。
提交审批，作废则是直接进行后台处理，不用过多的页面效果，使用的是ajax事件提交（也可以使用layui的方式）。
//操作按钮
<script type="text/html" id="barEdit">
<a href='javascript:void(0)' class="layui-btn layui-btn-xs" lay-event="viewRow">查看</a>
{{# if(d.status == 11 ){ }}
<a href='javascript:void(0)' class="layui-btn layui-btn-warm layui-btn-xs" lay-event="changeServiceUser">维护人</a>
<a href='javascript:void(0)' class="layui-btn layui-btn-xs" lay-event="changeRow">变更</a>
{{# } }}
{{# if(d.status != 11 ){ }}
<a href='javascript:void(0)' class="layui-btn layui-btn-xs" lay-event="editRow">修改</a>
<a href='javascript:void(0)' class="layui-btn layui-btn-xs" lay-event="startApprove">提交审批</a>
{{# } }}
<a href='javascript:void(0)' class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteRow">作废</a>
</script>
//监听工具条
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'startApprove'){
startApprove(data.contractId);
} else if(obj.event === 'viewRow'){//查看
editRow(data.contractId,0,0);
} else if(obj.event === 'editRow'){//修改
editRow(data.contractId,2,1);
} else if(obj.event === 'changeRow'){
editRow(data.contractId,2,2);
}else if(obj.event === 'changeServiceUser'){
changeServiceUser(data.contractId);
}else if(obj.event === 'deleteRow'){//作废
deleteRow(data.contractId);
}
});
//提交审批
function startApprove(contractId){
layer.confirm('是否确认提交审批?', {offset: '120px',icon: 3, title:'提示'}, function(index){
$.ajax({
type: "POST",
url: "${base}/contractother/startapproveworkflow.htm?contractId="+contractId,
error:function(){
layer.msg('请求失败！', {icon: 5});
},
success: function(msg){
if(msg=='success'){
layer.msg("提交成功！", {icon: 6});
tableReload();
}else{
layer.msg(msg, {icon: 5});
}
}
});
layer.close(index);
});
}
//作废合同
function deleteRow(contractId){
layer.confirm('是否要作废合同?', {offset: '120px',icon: 3, title:'提示'}, function(index){
$.ajax({
type: "POST",
url: "${base}/contractother/changeisenabled.htm?contractId="+contractId,
error:function(){
layer.msg('请求失败！', {icon: 5});
},
success: function(){
layer.msg("提交成功！", {icon: 6});
tableReload();
}
});
layer.close(index);
});
}
自定义表格内容事件
例如当我门点击维护人的名字时，会弹出一个页面，显示维护人的个人信息。
通过id去定义一个事件，使用js的模态窗口（也可以使用其他方式）
//新建维护人的表格
<label class="layui-form-label">*新维护人</label>
<div class="layui-input-inline">
<input type="text" id="serviceUserName" name="serviceUserName" readonly autocomplete="off" placeholder="单击此处选择用户" class="layui-input">
</div>
$("#serviceUserName").bind("click",function(){
//模态窗口弹出的弹出层
$myPopup.showModalDialog('${base}/useroms/before2userlist4selectpage.htm','845px', '514px',function(user){
if(user){
$("#serviceUser").val(user.userId);
$("#serviceUserName").val(user.realName);
}
});
});
1477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
