首页
所有分类
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 相关文章推荐
用jQuery打造TabPanel效果代码
May 22 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
Java设计中的Builder模式的介绍
Mar 22 Javascript
Vue实现浏览器打印功能的代码
Apr 17 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
watch(1) re模块(2) okenizer(1) vue-cli3.x(1) 分词器(1) 项目打包(2) sched(1) scss(1) 监听(2) 事件调度器(1)
You might like
PHP SQLite类
2009/05/07 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
javascript 短路法代码精简
2009/08/20 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
Python模块包中__init__.py文件功能分析
2016/06/14 Python
python实现手机通讯录搜索功能
2018/02/22 Python
Pycharm更换python解释器的方法
2018/10/29 Python
django页面跳转问题及注意事项
2019/07/18 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
世界上最大的折扣香水店：FragranceNet.com
2016/10/26 全球购物
美国半成品食材配送服务商：Home Chef
2018/01/25 全球购物
咖啡馆创业计划书
2014/01/26 职场文书
市场部管理制度
2014/02/02 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
端午节活动总结
2014/08/26 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
初中家长评语大全
2014/12/26 职场文书
现场施工员岗位职责
2015/04/11 职场文书
干货：如何写好观后感 ！
2019/05/21 职场文书
宪法宣传标语100条
2019/10/15 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题