Jquery与Bootstrap实现后台管理页面增删改查功能示例

使用jquery与bootstrap实现了一个比较简单但功能齐全的增删改查功能的后台管理页面，虽然只是一个CRUD页面，但麻雀虽小五脏俱全，JS常用的功能都用到了，本例用原生的jquery与bootstrap配合使用，不考虑JS的重构性及打包，该例子零耦合，开箱即用。

先看Demo：

一、用到的Jquery功能

1、获取/赋值input输入值

$（"#my_id"）.val（）;// 获取$（"#my_id"）.val（“user_id"）;// 赋值

2、获取/赋值textarea文本域输入值

$（"#my_textarea"）.val（）;// 获取$（"#my_textarea"）.val（"my_textarea"）;// 赋值// 文本域显示默认值，这个和input不一样，不能通过value赋默认值<textarea name="my_textarea" readonly="true"style="width:100px;height:30px;">这里是文本域默认的内容</textarea>

3、隐藏/显示输入框

$（"#my_input"）.hide（）;$（"#my_input"）.show（）;

4、获取表单form输入的数据

$（"#my_input"）.hide（）;$（"#my_input"）.show（）;

二、示例代码

示例前端active_list.html代码：

<！DOCTYPE html><html><head><meta charset="gb2312"><title>活动列表</title><link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" 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运行下的问题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（"确认删除吗？"））{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数据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（"标题不能为空！"）;return false;}if（！tag_name）{alert（"标签不能为空！"）;return false;}var form_data = $（"#form_data"）.serialize（）;// 异步提交数据到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（"标签名不能重复！"）;$（"#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 （） {// 关闭时清空edit状态为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>标题：<input type="text" name="search_title" value="{search_title}"></td><td><！-- 按钮触发模态框 --><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">默认</a></td></tr></tbody></table></form>总数（<b>{total_count}</b>）<table class="table table-hover table-bordered" ><thead><tr><th>排序</th><th>显示标题</th><th>图片链接</th><th>标签</th><th>截止时间</th><th>状态</th><th>活动详情</th><th>奖项设置</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">内容编辑</a></td><td><span class="glyphicon glyphicon-cog"></span> <a href="active_prize.php?active_id={active_id}" target="_blank">设置奖项</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}       <！-- 模态框（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标签--><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">标题</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">标签</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"><！-- 块元素变为内联元素 用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">状态</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">关闭</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/** * 获取提交的数据 * */$act= $_POST["act"];$id= $_POST["id"];$user_id= （int）$_POST["user_id"];$form_data = $_POST["form_data"];$param_arr = array（）;// 获取到的数据格式为 “foo=bar&baz=boom&cow=milk&php=hypertext+processor”// http_build_query 的数据形式用parse_str解析为数组格式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":// 返回详细的用户信息// get（$user_id）;echo $ret;exit（）;break;case "del":// 删除// delete（）;break;}echo $ret > 0 ? 1 : 0;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。