使用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 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;以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
