一,程式碼
fastadmin的前端使用了layui,需要按照layui的寫法去寫
<div class="panel panel-default panel-intro">
{:build_heading()}
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<table class="table table-bordered">
<tr><td>id:{$row.id}</td><td>型別:{$row.type_str}</td></tr>
<tr><td>{$row.house_title}</td><td>{$row.house_introduction}</td></tr>
<tr><td colspan="2">
<span id="btn_allow" style="display:{$disp_allow};width:100px;"
onclick="set_house_status_ui(1,{$row.id})"
class="btn btn-success btn-edit btn-disabled" title="編輯">
<i class="fa fa-check-circle fa-fw"></i> 透過</span>
<span id="btn_deny" style="display:{$disp_deny};width:100px;"
onclick="set_house_status_ui(2,{$row.id})"
class="btn btn-danger btn-del btn-disabled" title="刪除">
<i class="fa fa-times-circle fa-fw"></i> 拒絕</span>
</td></tr>
</table>
<div id="myDiv" style="display: none;">
<textarea id="reject_text" placeholder="提示使用者的文字資訊"
style="width: 580px;height:80px;margin-left: 10px;margin-top: 10px;"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
.greenStatus {color:#008B45;}
.redStatus {color:#CD0000;}
.yellowStatus {color:#EEB422;}
</style>
<script>
//返回成功後修改狀態
function set_view_status(status){
if (status == 2) {
document.getElementById('status_str').innerHTML = '稽核拒絕';
document.getElementById('status_str').setAttribute("class", "redStatus");
document.getElementById('btn_deny').style.display='none';
document.getElementById('btn_allow').style.display='';
}
if (status == 1) {
document.getElementById('status_str').innerHTML = '稽核透過';
document.getElementById('status_str').setAttribute("class", "greenStatus");
document.getElementById('btn_deny').style.display='';
document.getElementById('btn_allow').style.display='none';
}
}
//開啟視窗,輸入拒絕使用者的原因
function reject(status,id) {
layer.open({
type: 1,
area: ['600px', '200px'],
title: '提示使用者拒絕原因',
btn: ['確定', '取消'],//按鈕
content: $('#myDiv'),
btn1: function(index, layero){
// 確定按鈕被點選時的處理邏輯
var text = document.getElementById('reject_text').value;
//alert('text:'+text);
set_house_status_func(status,id,text);
layer.close(index); // 關閉當前彈窗
},
btn2: function(index, layero){
// 可以在這裡關閉彈窗或者執行其他邏輯
layer.msg('已取消',{
time: 1000
});
layer.close(index); // 關閉當前彈窗
}
});
}
//彈出確認的資訊
function set_house_status_ui(status,id) {
var status_str='';
if (status == 1){
status_str = '確定要透過稽核嗎?';
} else if (status == 2){
status_str = '確定要拒絕稽核嗎?';
}
Layer.confirm(status_str, {
btn: ['確認','取消'] //按鈕
}, function(index){
layer.close(index);
if (status == 2) {
reject(status,id);
} else {
set_house_status_func(status,id,'');
}
return true;
}, function(index){
layer.msg('已取消',{
time: 1000
});
layer.close(index);
return false;
});
}
//訪問介面,這個介面的功能是設定一條記錄的狀態
function set_house_status_func(status,id,text) {
Fast.api.ajax({
url:'itemdir/item/setstatus',
data:{
status:status,
id:id,
text:text,
}
}, function(data, ret){
//失敗後回撥
console.log(data);
return false;
}, function(data, ret){
//成功後回撥
console.log(data);
if (ret.msg == 'success'){
//alert("修改已成功!");
layer.msg('修改已成功!',{
time: 1000
});
var status = data.status;
if (status==2){
set_view_status(2);
} else if (status==1) {
set_view_status(1);
}
} else {
//alert("修改失敗!");
layer.msg('修改失敗!',{
time: 1000
});
}
return false;
});
}
</script>
二,測試效果,如圖: