首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJanuary 22, 2017

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

先看Demo：

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

一、用到的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;

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

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

- Author -

Corwien

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
在Node.js中将SVG图像转换为PNG，JPEG，TIFF，WEBP和HEIF格式的方法
Aug 22 Javascript
Vue 路由间跳转和新开窗口的方式（query、params）
Dec 25 Javascript
vue中用 async/await 来处理异步操作
Jul 18 Javascript
canvas多重阴影发光效果实现
Apr 20 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 #Javascript
Vue.js学习之计算属性
Jan 22 #Javascript
ionic中列表项增加和删除的实现方法
Jan 22 #Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 #Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 #Javascript
select下拉框插件jquery.editable-select详解
Jan 22 #Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 #Javascript
责任书(145) 委托书(259) 聘任书(31) 建议书(203) 意向书(73) 担保书(46) 主持词(345) 广告词(105) 承诺书(369) 竞聘书(31)
You might like
php分页示例分享
2014/04/30 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
Jquery cookie操作代码
2010/03/14 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
React组件生命周期详解
2017/07/03 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
js重写alert事件（避免alert弹框标题出现网址）
2020/12/04 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python 用户登录验证的小例子
2013/03/06 Python
Python3基础之基本数据类型概述
2014/08/13 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
python实现图片九宫格分割
2021/03/07 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
洛杉矶生活休闲而精致的基础品牌：Mika Jaymes
2018/01/07 全球购物
德国二手设计师时装和复古时装跳蚤市场：Mädchenflohmarkt
2020/11/09 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
新闻编辑自荐信
2013/11/03 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
学前教育专业求职信
2014/09/02 职场文书
2014年物流工作总结
2014/11/25 职场文书
联谊活动总结范文
2015/05/09 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python