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

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

先看Demo：

一、用到的Jquery功能

1、获取/赋值input输入值

rush:js;"> $("#my_id").val();// 获取 $("#my_id").val(“user_id");// 赋值

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

rush:js;"> $("#my_textarea").val();// 获取 $("#my_textarea").val("my_textarea");// 赋值

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

3、隐藏/显示输入框

rush:js;"> $("#my_input").hide(); $("#my_input").show();

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

rush:js;"> $("#my_input").hide(); $("#my_input").show();

二、示例代码

示例前端active_list.HTML代码：

rush:js;"> <Meta charset="gb2312"> 活动列表

活动列表

PHP" method="post" class="form"> 标题：

总数（{total_count}）

排序上架 PHP?active_id={active_id}" target="_blank">设置奖项

<button type="button" class="btn btn-danger" onclick="return delete_info({active_id})"&gt;<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a></button>
</td&gt;

</tr>

<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">
×

标题

标签

链接

图片链接">

        <div class="form-group"&gt;
          <label for="lastname" class="col-sm-3 control-label"&gt;截止时间</label>
          <div class="col-sm-9"&gt;
            <!-- 块元素变为内联元素 用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="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-inline"&gt;
            <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" name="is_forever" id="is_forever" value="1" onclick="return click_forever()"&gt;不限时
              </label>

          </div>
        </div>

        <div class="form-group"&gt;
          <label for="lastname" class="col-sm-3 control-label"&gt;状态</label>
          <div class="col-sm-9"&gt;

            <label class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-inline"&gt;
              <input type="radio" name="status" id="status_on" value="1" >上架
            </label>
            <label class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-inline"&gt;
              <input type="radio" name="status" id="status_off" checked="checked" value="0" >下架
            </label>
          </div>
        </div>

        <div class="form-group"&gt;
          <label for="remark" class="col-sm-3 control-label"&gt;简介</label>
          <div class="col-sm-9"&gt;
            <textarea class="form-control" name="summary" value="{summary}" id="summary"
                placeholder="活动简介"&gt;

            </textarea>
          </div>
        </div>
        <div class="form-group"&gt;
          <label for="remark" class="col-sm-3 control-label"&gt;备注</label>
          <div class="col-sm-9"&gt;
            <textarea class="form-control" name="remark" value="{remark}" id="remark"
                  placeholder="备注"&gt;

            </textarea>
          </div>
        </div>
      </div>
    <div class="modal-footer"&gt;
      <button type="button" class="btn btn-default" data-<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>miss="modal"&gt;<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a>
      </button>
      <button type="submit" class="btn btn-primary"&gt;
        提交
      </button><span id="tip"&gt; </span>
    </div>
    </form>
  </div><!-- /.modal-content -->
</div><!-- /.modal -->

动作处理页面active_action.PHP

rush: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做增删改查 Bootstrap增删改查 bootstrap的增删改查

上一篇：JQueryEasyUI框架下的combobox的取下一篇：前端开发必知的15个jQuery小技巧

相关推荐

jquery页面搜索关键词突出显示

页面搜索关键词突出 // 页面搜索关键词突出 $(function () { $(".list_r").find('span').css({ // 每次搜索开始，先把所有字体颜色恢复初始状态 'color': "#838792"

作者：今♀妃惜彼时间：2024-09-23

jQuery实时显示日期、时间

jQuery实时显示日期、时间 html: <span id="time"></span> js: <script src="Js/jquery.min.js"></script> <%--引用jQuery

作者：今♀妃惜彼时间：2024-09-23

jQuery 添加水印

jQuery 添加水印 <script src="../../../../AJs/jquery.min.js"></script> <script type="text/javascript"> $(document).re

作者：今♀妃惜彼时间：2024-09-23

Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息

中文：Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息，之所以出现此错误，常见的原因是：通过调用Response.Write()修改相应时，将启用响应筛选器、HttpModules或服务器追踪。详细信息：分析附近的“输

作者：今♀妃惜彼时间：2024-09-23

Asp.net 后台调用js方法

1. 用Response.Write方法代码如下： Response.Write("<script type='text/javascript'>alert("XXX");</script>"); 此方只能调用内部函数

作者：今♀妃惜彼时间：2024-09-23

Jquery实现按钮点击遮罩加载，处理完后恢复

Jquery实现按钮点击遮罩加载，处理完后恢复思路： 1.点击按钮调用OnClientClick事件，添加dom元素及样式。 2.当Click中逻辑执行完后，在Click中调用js方法删除掉刚才添加的dom元素。 1 <%@ Page Language="C#" Auto

作者：今♀妃惜彼时间：2024-09-23

.Net后台调用js，提示、打开新窗体、关闭当前窗体

.Net后台调用js，提示、关闭当前窗体、打开新窗体 Response.Write("<script>window.alert('支付成功!');window.open('/JkCommerce/" + href + "',&

作者：今♀妃惜彼时间：2024-09-23

.net 搜索联想词

思路： 1.ajax请求后台方法获取数据。 2.通过jquery将请求到的数据显示在页面上。前台 <div class="sc_con" id="bbsearch"> <input type="text" class=&

作者：今♀妃惜彼时间：2024-09-23

JS点击子元素不触发父元素点击事件(js阻止冒泡)

<html> <title></title> <head> <meta charset="utf-8"> <style type="text/css"> .divone{width:100

作者：今♀妃惜彼时间：2024-09-23

jQuery表单验证提交：前台验证一

jQuery表单验证提交：前台验证一（图文+视频）

作者：编程之家时间：2023-09-13

小编推荐

苹果市值2025年有望达4万亿美元

显示标题	图片链接	标签	截止时间	状态	活动详情	奖项设置	简介	备注	操作