首页
所有分类
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代码
Oct 19 Javascript
JavaScript 模拟用户单击事件
Dec 31 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
Node.JS段点续传：Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
详解Node.js如何处理ES6模块
May 15 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
IIS(7) 远程登录(2) Windows server 2008(5) http(6) 防火墙(2) 远程控制(1) Telnet(1) Windows server 2016(6) https(7) Windows server 2019(5)
You might like
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
javascript第一课
2007/02/27 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
优化javascript的执行速度
2010/01/23 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python实现txt文件格式转换为arff格式
2018/05/31 Python
numpy库与pandas库axis=0，axis= 1轴的用法详解
2019/05/27 Python
python自定义时钟类、定时任务类
2021/02/22 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
python搜索算法原理及实例讲解
2020/11/18 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
致跳远运动员广播稿
2014/02/11 职场文书
《童年》教学反思
2014/02/18 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
实习指导教师评语
2014/12/30 职场文书
售后服务承诺函格式
2015/01/21 职场文书
刑事附带民事代理词
2015/05/25 职场文书
盲山观后感
2015/06/11 职场文书
初中语文教学随笔
2015/08/15 职场文书
SQL中的连接查询详解
2022/06/21 SQL Server