前端表格操作注意事项
2018-08-29 本文已影响0人
BrightHeart
Layer进行删除时,弹出框进行确认是否删除
1.删除按钮添加onclick
<a class="btn btn-xs btn-danger" data-toggle="modal" th:onclick="'javascript:DeletePro('+${project.projectId}+');'">删除</a>
2.编写按钮中添加的onclick中的DeletePro
function DeletePro(pId){
layer.open({
title:'删除项目',
content:'请确认是否删除',
yes: function (index,layero) {
$.post('/admin/project/delete',{pId:pId}).done(function (date) {
if (date.state == "success"){
layer.msg("删除成功",{
time:1000
},function () {
window.location.href = "/admin/project/project";
})
}
}).error(function () {
layer.msg("服务器异常");
});
layer.close(index);
}
});
}
3.注意事项
layer.open({
content: '测试回调',
yes: function(index, layero){ //function()中第二个参数是layero不是layer
//do something
layer.close(index); //如果设定了yes回调,需进行手工关闭
}
});
模态框查看详细信息
1. 在每一行的查看按钮添加onclick
<a class="btn btn-xs btn-success" data-toggle="modal" th:onclick="'javascript:UpdatePro('+${project.projectId}+');'">修改</a>
2. 编写按钮中添加的onclick中的SelectPro,利用AJAX异步登录获取数 据,添加到模态框
function SelectPro(pId){
$.ajax({
url:'/admin/project/select',
async:false,
type:'get',
data:{pId:pId},
success:function(date) {
$("#projectId").val(date.projectId);
$("#projectId").attr("readonly","readonly"); //让input框变为不可编辑状态
$("#projectName").val(date.projectName);
$("#projectName").attr("readonly","readonly");
$("#projectBrief").val(date.projectBrief);
$("#projectBrief").attr("readonly","readonly");
$("#projectBewrite").val(date.projectBewrite);
$("#projectBewrite").attr("readonly","readonly");
$("#startTime").val(date.startTime);
$("#startTime") .attr("readonly","readonly");
$("#planTime").val(date.planTime);
$("#planTime").attr("readonly","readonly");
$("#overTime").val(date.overTime);
$("#overTime").attr("readonly","readonly");
$("#projectType").val(date.projectType);
$("#projectType").attr("disabled","disabled"); //让select框无法编辑
var names="";
for (var i = 0;i < date.userList.length;i++){
names += date.userList[i].userName + ",";
}
names = names.substring(0,names.length - 1); //subString方法截取字符串subString(start,end)
$("#user").val(names);
$("#user").attr("readonly","readonly");
$("#projecrModal").modal("show");//先给模态框内赋值,再让模态框显示
$("#overTime").show(); //让表单提交按钮显示出来,隐藏则hide();
$("#proBtn").hide();
}
})
}