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;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.CSS也经常给的不全,自己经过大概一个月左右的时间,把表格封装了一下,希望能分享给大家. 表格封装了3个版本,接下来给大家展示一下样式和代码. 版本一 1. 样式 表格布局: 添加:添加一行新的空白代码 修改:选中可修改的列,点击需要修改的单元格,即可变成可编辑的状态. 2.代码 @using Dat
-
BootstrapTable+KnockoutJS相结合实现增删改查解决方案（三）两个Viewmodel搞定增删改查
前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打算正式将ko用起来,于是乎对ko和bootstraptable做了一些封装,在此分享出来供园友们参考.封装思路参考博客园大神萧秦,如果园友们有更好的方法,欢迎讨论. KnockoutJS系列文章: BootstrapTable与KnockoutJS相结合实现增删改查功能[一] BootstrapTa
-
JS结合bootstrap实现基本的增删改查功能
提出问题:如何利用原生的js实现基本的增删改查功能??? 解决问题 假如你已经对JS有一定基础 假如你对bootstrap有一定基础 下面是具体的例子, 包含两个文件(index.jsp 和 index.js) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC
-
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
Bootstrap是一个前端框架,解放Web开发者的好东东,展现出的UI非常高端大气上档次,理论上可以不用写一行css.只要在标签中加上合适的属性即可. KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己写JS增删节点,只要预先定义模板和符合其语法定义的属性即可.简单的说,我们只需要关注数据的存取. 一.Knockout.js简介 1.Knockout.js和MVVM 如今,各种前端框架应接不暇,令人眼花缭乱,有时不得
-
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4的语法,虽然没有完全掌握,但是算是有了一个大致的了解.于是乎有了今天的这篇文章:通过T4模板快速生成页面. KnockoutJS系列文章: BootstrapTable与KnockoutJS相结合实现增删改查功能[一] BootstrapTable与KnockoutJS相结合实现增删改查功能[二]
-
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
在上篇文章给大家介绍了BootstrapTable与KnockoutJS相结合实现增删改查功能[一],介绍了下knockout.js的一些基础用法.接下来通过本文继续给大家介绍.如果你也打算用ko去做项目,且看看吧! Bootstrap是一个前端框架,解放Web开发者的好东东,展现出的UI非常高端大气上档次,理论上可以不用写一行css.只要在标签中加上合适的属性即可. KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己
-
Jquery与Bootstrap实现后台管理页面增删改查功能示例
使用jquery与bootstrap实现了一个比较简单但功能齐全的增删改查功能的后台管理页面,虽然只是一个CRUD页面,但麻雀虽小五脏俱全,JS常用的功能都用到了,本例用原生的jquery与bootstrap配合使用,不考虑JS的重构性及打包,该例子零耦合,开箱即用. 先看Demo: 一.用到的Jquery功能 1.获取/赋值input输入值 $("#my_id").val();// 获取 $("#my_id").val("user_id");/
-
SpringBoot+Vue+Axios+BootStrap实现图书的增删改查功能示例
目录 一.开发工具 二.项目结构 三.编写项目 四.运行项目 由于是初学Vue.Axios,可能在界面和功能上存在着一些问题,但这些并不妨碍使用.如果有对编程感兴趣的朋友,可以试着做一做.这个由于是第一次做,不太熟练.在后续的过程中会不断的完善. 一.开发工具 IntelliJ IDEA Ultimate 2021.1 apache-maven-3.5.4 MySQL5.7 JDK 1.8.0_281 二.项目结构 三.编写项目 1.创建数据库 SET NAMES utf8mb4; SET FO
-
Node如何后台数据库使用增删改查功能
这篇文章主要介绍了Node如何后台数据库使用增删改查功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 无论node还是java增删改查都是一样的原理,变得是配合框架使用时候有简便方法而已. 优化:为了维护方便这里我们把sql语句提出来放在一个对象里面,只有要改变的参数放在请求接口的router里面 首先在routes文件夹里面创建userSql.js,在里面创建一个对象,再导出 var SQL = { inset:{// 增 actorIn:
-
jQuery实现对网页节点的增删改查功能示例
本文实例讲述了jQuery实现对网页节点的增删改查功能.分享给大家供大家参考,具体如下: 前面介绍过<JavaScript针对网页节点的增删改查用法>,其实JavaScript对DOM的操作已经总结了很久的,而对于jQuery对网页节点的操作,虽然一直在用,但一直没有好好总结一下,实在是不应该. 下面举同样的例子来说明这个问题: 如上图,提供3个按钮,1个下拉列表,1个输入框,提供增删改查的操作. 网页中最多10个节点,最少0个节点,多了不让加,少了不让减. 首先是本网页的基本布局: <
-
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
本文实例讲述了jQuery+datatables插件实现ajax加载数据与增删改查功能.分享给大家供大家参考,具体如下: 这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查 注意,需要引入jquery.datatables.layer html代码: <div class="thead"> <input placeholder="请输入搜索内容" id="searchTitle" type=&quo
-
C#实现XML文档的增删改查功能示例
本文实例讲述了C#实现XML文档的增删改查功能.分享给大家供大家参考,具体如下: 1. 创建实例XML文件(Books.xml) <?xml version="1.0" encoding="iso-8859-1"?> <bookstore> <book id="1" category="COOKING"> <title lang="en">Everyday I
-
Vue用户管理的增删改查功能详解
目录 1.向api请求发出查询用户列表数据,渲染表单数据 2.通过v-model绑定查询数据,进行表单信息查询 3.通过改变布尔值,来控制打开取消添加用户对话框 4.通过动态绑定current-page和page-size,再绑定触发事件,查询指定多少条数据,进行数据分页 总结 1.向api请求发出查询用户列表数据,渲染表单数据 1.定义查询参数列表对象queryInfo:{} queryInfo: { query: '', // 查询 pagenum: 1, // 当前页数 pagesize:
-
BootStrap Jstree 树形菜单的增删改查的实现源码
1.首先需下载jstree的插件点击打开链接 2.在页面引入插件js文件css文件 <link rel="stylesheet" href="plugins/jstree/themes/classic/style.css" rel="external nofollow" > <script type="text/javascript" src="plugins/jstree/_lib/jquery.