首页
所有分类
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 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
js最简单的拖拽效果实现代码
Sep 24 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
Apr 12 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
功能完善的小程序日历组件的实现
Mar 31 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
演讲稿(869) 证婚词(21) 思想汇报(404) 职业生涯规划书(234) 介绍信(57) 欢迎词(65) 表扬信(62) 邀请函(127) 心得体会(660) 道歉信(39)
You might like
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
python处理数据,存进hive表的方法
2018/07/04 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
澳大利亚优质的家居用品和生活方式公司：Bed Bath N’ Table
2019/04/16 全球购物
德国最大的服装、鞋子和配件在线商店之一：Outfits24
2019/07/23 全球购物
房地产营销策划方案
2014/02/08 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
餐厅营销的秘密：为什么老顾客会流水？
2019/08/08 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers