Jquery與Bootstrap實現(xiàn)后臺管理頁面增刪改查功能示例
更新時間：2017年01月22日 11:35:22 作者：Corwien
本篇文章主要介紹了Jquery與Bootstrap實現(xiàn)后臺管理頁面增刪改查功能示例，具有一定的參考價值，有興趣的可以了解一下。
使用jquery與bootstrap實現(xiàn)了一個比較簡單但功能齊全的增刪改查功能的后臺管理頁面，雖然只是一個CRUD頁面，但麻雀雖小五臟俱全，JS常用的功能都用到了，本例用原生的jquery與bootstrap配合使用，不考慮JS的重構(gòu)性及打包，該例子零耦合，開箱即用。
先看Demo：
一、用到的Jquery功能
1、獲取/賦值input輸入值
$("#my_id").val();// 獲取
$("#my_id").val(“user_id");// 賦值
2、獲取/賦值textarea文本域輸入值
$("#my_textarea").val();// 獲取
$("#my_textarea").val("my_textarea");// 賦值
// 文本域顯示默認(rèn)值，這個和input不一樣，不能通過value賦默認(rèn)值
<textarea name="my_textarea" readonly="true"style="width:100px;height:30px;">這里是文本域默認(rèn)的內(nèi)容</textarea>
3、隱藏/顯示輸入框
$("#my_input").hide();
$("#my_input").show();
4、獲取表單form輸入的數(shù)據(jù)
$("#my_input").hide();
$("#my_input").show();
二、示例代碼
示例前端active_list.html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>活動列表</title>
<link rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script>
function show_upload_info(img_url,title,n)
{
//document.getElementById("img_view"+n).src = img_url;
//document.getElementById("img_view"+n).style.display = '';
//document.getElementById("img_url"+n).value = img_url;
$("#img_url"+n).val(img_url);
$("#img_view"+n).attr('src', img_url);
}
function act_resize_img(imgObj, rectWidth, rectHeight, fixIeBug)
{
try
{
if(!fixIeBug) fixIeBug = true;
//修正在IE運(yùn)行下的問題
if( (imgObj.width==0 || imgObj.height==0) && fixIeBug ) {
var timer = setInterval(function(){
act_resize_img(imgObj, rectWidth, rectHeight, false);
clearInterval(timer);
}, 1000);
return;
}
var x = imgObj.width>rectWidth ? rectWidth : imgObj.width;
var y = imgObj.height>rectHeight ? rectHeight : imgObj.height;
var scale = imgObj.width/imgObj.height;
if( x>y*scale ) {
imgObj.width = Math.floor(y*scale);
imgObj.height = y;
}else {
imgObj.width = x;
imgObj.height = Math.floor(x/scale);
}
imgObj.style.width = imgObj.width+"px";
imgObj.style.height = imgObj.height+"px";
if (typeof(imgObj.onload)!='undefined')
{
imgObj.onload=null;
}
}
catch(err)
{
}
}
$(document).ready(function() {
// 配置日期事件
$("#expire_time").focus(function () {
WdatePicker({'dateFmt': 'yyyy-MM-dd HH:mm:ss'});
});
});
// 提交表單
function delete_info(active_id)
{
if(confirm("確認(rèn)刪除嗎？"))
{
if(!active_id)
{
alert('Error！');
return false;
}
$.ajax(
{
url: "action/active_action.php",
data:{"active_id":active_id, "act":"del"},
type: "post",
beforeSend:function()
{
$("#tip").html("<span style='color:blue'>正在處理...</span>");
return true;
},
success:function(data)
{
if(data > 0)
{
alert('操作成功');
$("#tip").html("<span style='color:blueviolet'>恭喜，刪除成功！</span>");
location.reload();
}
else
{
$("#tip").html("<span style='color:red'>失敗，請重試</span>");
alert('操作失敗');
}
},
error:function()
{
alert('請求出錯');
},
complete:function()
{
// $('#tips').hide();
}
});
}
// var form_data = new Array();
return false;
}
// 編輯表單
function get_edit_info(active_id)
{
if(!active_id)
{
alert('Error！');
return false;
}
// var form_data = new Array();
$.ajax(
{
url: "action/active_action.php",
data:{"active_id":active_id, "act":"get"},
type: "post",
beforeSend:function()
{
// $("#tip").html("<span style='color:blue'>正在處理...</span>");
return true;
},
success:function(data)
{
if(data)
{
// 解析json數(shù)據(jù)
var data = data;
var data_obj = eval("("+data+")");
// 賦值
$("#order_num").val(data_obj.order_num);
$("#active_id").val(data_obj.active_id);
$("#img_url1").val(data_obj.cover_img_url);
$("#title").val(data_obj.title);
var status = data_obj.status;
if(status == 1)
{
$("#status_on").attr("checked",'checked');
}else{
$("#status_off").attr("checked",'checked');
}
$("#tag_name").val(data_obj.tag_name);
$("#remark").val(data_obj.remark);
$("#summary").val(data_obj.summary);
// $("#expire_time").val(data_obj.expire_time);
$("#act").val("edit");
if(data_obj.expire_time == 0)
{
// 隱藏時間框
$("#expire_time").hide();
$("#is_forever").attr("checked","checked");
}
else
{
$("#expire_time").val(data_obj.expire_time);
}
}
else
{
$("#tip").html("<span style='color:red'>失敗，請重試</span>");
// alert('操作失敗');
}
},
error:function()
{
alert('請求出錯');
},
complete:function()
{
// $('#tips').hide();
}
});
return false;
}
//點擊 活動是否限時事件
function click_forever()
{
// 不能用attr('checked')獲取是否選中，因為返回‘undedied'
// var is_check = $('#is_forever').attr('checked');
// 可以用prop("checked")或is(':checked')來獲取是否選中
var is_check = $('#is_forever').prop("checked");
// alert(is_check);
if(is_check)
{
$("#expire_time").hide();
$("#expire_time").val(0);
}
else
{
$("#expire_time").show();
}
}
// 提交表單
function check_form()
{
var title = $.trim($('#title').val());
var tag_name = $.trim($('#tag_name').val());
var act = $.trim($('#act').val());
if(!title)
{
alert('標(biāo)題不能為空！');
return false;
}
if(!tag_name)
{
alert('標(biāo)簽不能為空！');
return false;
}
var form_data = $('#form_data').serialize();
// 異步提交數(shù)據(jù)到action/add_action.php頁面
$.ajax(
{
url: "action/active_action.php",
data:{"form_data":form_data,"act":act},
type: "post",
beforeSend:function()
{
$("#tip").html("<span style='color:blue'>正在處理...</span>");
return true;
},
success:function(data)
{
if(data > 0)
{
var msg = "添加";
if(act == "edit") msg = "編輯";
$("#tip").html("<span style='color:blueviolet'>恭喜，" +msg+ "成功！</span>");
// document.location.href='system_notice.php'
alert(msg + "OK！");
location.reload();
}
else
{
if(data == -2) alert("標(biāo)簽名不能重復(fù)！");
$("#tip").html("<span style='color:red'>失敗，請重試</span>");
alert('操作失敗');
}
},
error:function()
{
alert('請求出錯');
},
complete:function()
{
$('#acting_tips').hide();
}
});
return false;
}
$(function () { $('#addUserModal').on('hide.bs.modal', function () {
// 關(guān)閉時清空edit狀態(tài)為add
$("#act").val("add");
location.reload();
})
});
</script>
<body>
<div class="container" style="min-width: 1200px;">
<h1>
活動列表
</h1>
<form action="active_info_list.php" method="post" class="form">
<table class="table table-bordered">
<tbody>
<tr>
<td>標(biāo)題：<input type="text" name="search_title" value="{search_title}"></td>
<td> <!-- 按鈕觸發(fā)模態(tài)框 -->
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addUserModal">
添加活動
</button>
</td>
</tr>
<tr>
<td colspan="10" style=" text-align: center; padding: 10px; border: none">
<input type="submit" class="btn btn-default" value="搜索" /> <a href="active_info_list.php">默認(rèn)</a>
</td>
</tr>
</tbody>
</table>
</form>
總數(shù)（<b>{total_count}</b>）
<table class="table table-hover table-bordered" >
<thead>
<tr>
<th>排序</th>
<th>顯示標(biāo)題</th>
<th>圖片鏈接</th>
<th>標(biāo)簽</th>
<th>截止時間</th>
<th>狀態(tài)</th>
<th>活動詳情</th>
<th>獎項設(shè)置</th>
<th>簡介</th>
<th>備注</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- BEGIN list -->
<tr>
<td>{order_num}</td>
<td>{title}[{active_id}]</td>
<td><input readonly="true" value="{cover_img_url}" style="width:150px;"/></td>
<td>{tag_name}</td>
<td>{expire_time}</td>
<td><!-- IF status=="1" --> 上架 <!-- ELSE --><font color="gray">下架</font><!-- ENDIF --></td>
<td><a href="active_content_edit.php?active_id={active_id}" target="_blank">內(nèi)容編輯</a></td>
<td><span class="glyphicon glyphicon-cog"></span> <a href="active_prize.php?active_id={active_id}" target="_blank">設(shè)置獎項</a></td>
<td><textarea readonly="true"style="width:100px;height:30px;"/>{summary}</textarea></td>
<td>{remark}</td>
<td>
<button type="button" class="btn btn-info" data-toggle="modal" onclick="return get_edit_info({active_id})" data-target="#addUserModal">編輯</button>
<button type="button" class="btn btn-danger" onclick="return delete_info({active_id})">刪除</button>
</td>
</tr>
<!-- END list -->
</tbody>
</table>
{page_str}
<!-- 模態(tài)框（Modal） -->
<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
活動詳情
</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="lastname" class="col-sm-3 control-label">上傳封面圖片</label>
<div class="col-sm-9">
<!--注意這里的iframe標(biāo)簽-->
<iframe src="upload_img.php" frameborder="0" scrolling="no" width="380px" height="35"></iframe>
</div>
</div>
<form method="post" action="" class="form-horizontal" role="form" id="form_data" onsubmit="return check_form()" style="margin: 20px;">
<div class="form-group">
<label for="lastname" class="col-sm-3 control-label">排名</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="order_num" name="order_num" value="{order_num}"
placeholder="排名">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-3 control-label">標(biāo)題</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="title" value="{title}" id="title"
placeholder="">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-3 control-label">標(biāo)簽</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="tag_name" value="{tag_name}" id="tag_name"
placeholder="">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-3 control-label">封面圖鏈接</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="cover_img_url" value="{cover_img_url}" id="img_url1"
placeholder="圖片鏈接"> <img onload="act_resize_img(this,60,60,true);" id="img_view1" src="" style="margin:3px;" />
<input type="hidden" id="act" value="add" name="act"/>
<input type="hidden" id="active_id" value="{active_id}" name="active_id"/>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-3 control-label">截止時間</label>
<div class="col-sm-9">
<!-- 塊元素變?yōu)閮?nèi)聯(lián)元素 用display:inline屬性即可成一行，塊元素用block -->
<input type="text" style="width: 300px;display:inline" class="form-control" name="expire_time" value="{expire_time}" class="Wdate" readonly="readonly" id="expire_time"
>
<label class="checkbox-inline">
<input type="checkbox" name="is_forever" id="is_forever" value="1" onclick="return click_forever()">不限時
</label>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-3 control-label">狀態(tài)</label>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" name="status" id="status_on" value="1" >上架
</label>
<label class="checkbox-inline">
<input type="radio" name="status" id="status_off" checked="checked" value="0" >下架
</label>
</div>
</div>
<div class="form-group">
<label for="remark" class="col-sm-3 control-label">簡介</label>
<div class="col-sm-9">
<textarea class="form-control" name="summary" value="{summary}" id="summary"
placeholder="活動簡介">
</textarea>
</div>
</div>
<div class="form-group">
<label for="remark" class="col-sm-3 control-label">備注</label>
<div class="col-sm-9">
<textarea class="form-control" name="remark" value="{remark}" id="remark"
placeholder="備注">
</textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉
</button>
<button type="submit" class="btn btn-primary">
提交
</button><span id="tip"> </span>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
</body>
</html>
動作處理頁面active_action.php
<?php
/**
* 獲取提交的數(shù)據(jù)
*
*/
$act = $_POST['act'];
$id = $_POST['id'];
$user_id = (int)$_POST['user_id'];
$form_data = $_POST['form_data'];
$param_arr = array();
// 獲取到的數(shù)據(jù)格式為 “foo=bar&baz=boom&cow=milk&php=hypertext+processor”
// http_build_query 的數(shù)據(jù)形式用parse_str解析為數(shù)組格式
parse_str($form_data, $param_arr);
// 備注中文處理
$param_arr['remark'] = iconv("utf-8", "gbk", trim($param_arr['remark']));
switch($act)
{
case "add":
// 添加入庫操作
// ...
// ...
break;
case "edit":
// 編輯操作
$user_id = $param_arr['user_id'];
// ...
break;
case "get":
// 返回詳細(xì)的用戶信息
// get($user_id);
echo $ret;
exit();
break;
case "del":
// 刪除
// delete();
break;
}
echo $ret > 0 ? 1 : 0;
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實現(xiàn)立體式數(shù)字滾動條增加效果
這篇文章主要介紹了jQuery立體式數(shù)字滾動條增加的相關(guān)資料,代碼簡單易懂，非常不錯，需要的朋友可以參考下2016-12-12
jQuery插件slicebox實現(xiàn)3D動畫圖片輪播切換特效
Slicebox是一款效果非常華麗的jquery和css3 3d幻燈片插件。Slicebox幻燈片插件能夠?qū)D片切片，然后做3d旋轉(zhuǎn)。Slicebox幻燈片插件共有4種效果，視覺沖擊感非常強(qiáng)。2015-04-04
本篇文章主要介紹了jQuery操作css樣式的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
這篇文章主要介紹了jQuery實現(xiàn)的表格展開伸縮效果,結(jié)合完整實例形式分析了jQuery響應(yīng)鼠標(biāo)事件動態(tài)修改頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-09-09
jQuery綁定事件方法及區(qū)別(bind,click,on,live,one)
這篇文章主要介紹了jq綁定事件方法及區(qū)別,通過五種綁定方式使用bind()進(jìn)行操作,并和one()進(jìn)行區(qū)分,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了jQuery模擬select實現(xiàn)下拉菜單功能,比較實用,需要的朋友可以參考下。2016-06-06
獲取第一個匹配元素外部高度默認(rèn)包括補(bǔ)白和邊框，在本文將為大家介紹下具體的實現(xiàn)代碼，此方法對可見和隱藏元素均有效，感興趣的朋友可以了解下2013-09-09
今天我們介紹的是提示框插件tooltip的制作，其中還會介紹到自定義選擇器插件的開發(fā)2012-08-08
這篇文章主要介紹了JQuery中DOM事件綁定用法,實例分析了bind方法綁定事件的相關(guān)技巧,需要的朋友可以參考下2015-06-06
由點擊頁面其它地方隱藏div所想到的jQuery的delegate
在網(wǎng)頁開發(fā)的過程中經(jīng)常遇到的一個需求就是點擊一div內(nèi)部做某些操作，而點擊頁面其它地方隱藏該div。比如很多導(dǎo)航菜單，當(dāng)菜單展開的時候，就會要求點擊頁面其它非菜單地方，隱藏該菜單2013-08-08