Jquery与Bootstrap实现后台管理页面增删改查功能示例
更新时间:2017年1月26日 10:00 点击:2036
使用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;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- yii2.0框架是PHP开发的一个比较高效率的框架,集合了作者的大量心血,下面通过用户为例给大家详解yii2使用中的一些基本的增删改查操作。 User::find()->all(); //返回所有用户数据; User::findOne($id); //返回 主键...2015-11-24
- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记,内容很详细,感兴趣的小伙伴们可以参考一下...2016-05-20
- 这篇文章主要教大家如何利用Bootstrap3制作图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-14
- 这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23
解决JS组件bootstrap table分页实现过程中遇到的问题
这篇文章主要介绍了JS组件bootstrap table分页实现过程中遇到的问题,感兴趣的小伙伴们可以参考一下...2016-04-23- 增删改查操作,其中增删改操作被称为数据操作语言 DML,相对来说简单一点。 查操作相对来说复杂一点,涉及到很多子句,所以这篇先讲增删改操作,以例子为主,后面再讲查操作...2020-07-11
- 这篇文章主要介绍了搭建MyBatis-Plus框架并进行数据库增删改查,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-12
Django开发RESTful API实现增删改查(入门级)
这篇文章主要介绍了Django开发RESTful API实现增删改查(入门级),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-05-10.net MVC+Bootstrap下使用localResizeIMG上传图片
这篇文章主要为大家详细介绍了.net MVC和Bootstrap下使用 localResizeIMG上传图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-04-27- 这篇文章主要介绍了Mybatis实现动态增删改查功能的示例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-02
- 这篇文章主要介绍了Mybatis基于xml配置实现单表的增删改查,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-12
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap...2017-01-16- 这篇文章主要介绍了全面解析Bootstrap图片轮播效果,Bootstrap提供了carousel插件,实现图片轮播非常方便,需要的朋友可以参考下...2016-01-14
Angular ui.bootstrap.pagination分页
这篇文章主要为大家详细介绍了Angular ui.bootstrap.pagination 分页的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
这篇文章主要为大家详细介绍了仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件的相关资料,感兴趣的小伙伴们可以参考一下...2016-07-06- 这篇文章主要为大家详细介绍了php bootstrap实现简单登录的具体方法,感兴趣的小伙伴们可以参考一下...2016-03-10
- 本文章来为各位介绍一篇Laravel对数据库增删改查的例子了,这个是基于查询构建器来实现了,具体的如下所示。 获取查询构建器很简单,还是要依赖DB门面,我们使用DB门面的...2016-11-25
- 这篇文章主要介绍了Yii针对添加行的增删改查操作,涉及Yii结合jQuery针对页面元素的动态操作及数据库增删改查等操作相关实现技巧,需要的朋友可以参考下...2016-10-20
angularjs+bootstrap实现自定义分页的实例代码
本篇文章主要介绍了angularjs+bootstrap实现自定义分页的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 ...2017-06-24- 这篇文章主要为大家详细介绍了C#访问SQLServer增删改查代码实例,感兴趣的小伙伴们可以参考一下...2020-06-25