使用SSH+bootstrap 禁用和启用功能完成修改、删除按钮的禁用和启用
文章目录
- 一、使用步骤
- 总结
提示：以下是本篇文章正文内容，下面案例可供参考
一、使用步骤
1.引入库
代码如下（示例）：
package com.fh.model.user;
import java.util.Date;
import org.springframework.format.annotation.DateTimeFormat;
import com.fasterxml.jackson.annotation.JsonFormat;
public class Role {
private Integer roleId;// 角色id
private String roleName;// 角色名称
private Integer status;// 1是禁用 2是启用
private String remark;// 角色描述
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
private Date createDate;//创建时间
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
private Date updateDate;//修改时间
private String flag;
public String getFlag() {
Date date = new Date();
if (date.getTime()>=updateDate.getTime()) {
//已启用
flag="1";
}else if (date.getTime()>createDate.getTime() && date.getTime()<=updateDate.getTime()) {
//正在启用
flag="2";
}else {
//未启用
flag="3";
}
return flag;
}
public void setFlag(String flag) {
this.flag = flag;
}
public Integer getRoleId() {
return roleId;
}
public void setRoleId(Integer roleId) {
this.roleId = roleId;
}
public String getRoleName() {
return roleName;
}
public void setRoleName(String roleName) {
this.roleName = roleName;
}
public Integer getStatus() {
return status;
}
public void setStatus(Integer status) {
this.status = status;
}
public String getRemark() {
return remark;
}
public void setRemark(String remark) {
this.remark = remark;
}
public Date getCreateDate() {
if(createDate==null) {
return new Date();
}
return createDate;
}
public void setCreateDate(Date createDate) {
this.createDate = createDate;
}
public Date getUpdateDate() {
return updateDate;
}
public void setUpdateDate(Date updateDate) {
this.updateDate = updateDate;
}
}
2.读入数据
代码如下（示例）：
//封装类加个属性,定义一个变量用来计算时间，
//不用在数据库增加字段,它的数据是根据开始时间和结束时间计算出来的
private String flag;
public String getFlag() {
Date date = new Date();
if (date.getTime()>=updateDate.getTime()) {
//已启用
flag="1";
}else if (date.getTime()>createDate.getTime() && date.getTime()<=updateDate.getTime()) {
//正在启用
flag="2";
}else {
//未启用
flag="3";
}
return flag;
}
public void setFlag(String flag) {
this.flag = flag;
}
//前端展示数据加个字段
{
"data": "flag",
"render": function (data, type, row, meta) {
if (data != null)
return data.toString().replace("1", "已启用").replace("2", "正在启用").replace("3", "未启用").replace("4", "错误");
else
return "";
},"title":"是否禁用"
},
//当属性==2时（正在启用）使用disaled锁定按钮,不让按钮再次使用
{
"data":"roleId","title":"操作",
"render":function(data, type, row, meta){
var sxj = "启用";
if(row.status != null && row.status==2)
{
sxj = "禁用";
}
var aa="";
if (row.flag==2) {
aa+='<button type="button" οnclick="showUpdateDiv(' + data + ')" class="btn btn-success" disabled="disabled" >'+
'<span class="glyphicon glyphicon-pencil"></span> 修改'+
'</button>'
}else{
aa+='<button type="button" οnclick="showUpdateDiv(' + data + ')" class="btn btn-success" >'+
'<span class="glyphicon glyphicon-pencil"></span> 修改'+
'</button>'
}
var bb="";
if (row.flag==2) {
bb+='<button type="button" οnclick="del(' + data + ')" class="btn btn-danger" disabled="disabled">'+
'<span class="glyphicon glyphicon-trash"></span> 删除'+
'</button>'
}else{
bb+='<button type="button" οnclick="del(' + data + ')" class="btn btn-danger">'+
'<span class="glyphicon glyphicon-trash"></span> 删除'+
'</button>'
}
return '<div class="btn-group btn-group-xs">'+aa+bb+
'<button type="button" οnclick="upda(' + data + ')" >'+
'<span s="glyphicon glyphicon-pencil"></span> '+sxj+
'</button>'+
'</div>';
}
},
//效果图
//禁用和启用 展示字段
//禁用和启用 展示字段
{
"data": "status",
"render": function (data, type, row, meta) {
if (data != null)
return data.toString().replace("1", "禁用").replace("2", "启用");
else
return "";
},"title":"状态"
},
//禁用和启用 按钮
//禁用和启用 按钮
{
"data":"roleId","title":"操作",
"render":function(data, type, row, meta){
var sxj = "启用";
if(row.status != null && row.status==2)
{
sxj = "禁用";
}
return '<div class="btn-group btn-group-xs">'+
'<button type="button" οnclick="upda(' + data + ')" >'+
'<span s="glyphicon glyphicon-pencil"></span> '+sxj+
'</button>'+
'</div>';
}
},
//禁用和启用ajax
//禁用和启用ajax
function upda(roleId){
$.ajax({
url:"<%=request.getContextPath() %>/roleController/updateRole.do",
type:"post",
data:{
roleId:roleId
},
success:function(result){
if(result==1){
bootbox.alert("修改成功！");
search();
}else{
bootbox.alert("修改异常！");
}
},error:function(e){
console.log(e);
}
});
}
//后台代码
RequestMapping("updateRole")
@ResponseBody
public Integer updateRole(Role r) {
try {
//通过ID获取对象
Role role = roleService.toAddRole(r.getRoleId());
if (role.getStatus() == 1) {
role.setStatus(2);
} else {
role.setStatus(1);
}
roleService.addRole(role);
return 1;
} catch (Exception e) {
System.out.println(e);
return 0;
}
}
总结
提示：这里对文章进行总结：
例如：根据创建时间和修改时间进行计算，从中得到自己需要的数据,当正在启用时，锁定修改和删除按钮，想使用时点击禁用和启用，修改修改时间，完成这个功能
