溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Jquery與Bootstrap實現(xiàn)后臺管理頁面增刪改查功能示例

發(fā)布時間：2020-10-25 04:28:01 來源：腳本之家 閱讀：215 作者：Corwien 欄目：web開發(fā)

使用jquery與bootstrap實現(xiàn)了一個比較簡單但功能齊全的增刪改查功能的后臺管理頁面，雖然只是一個CRUD頁面，但麻雀雖小五臟俱全，JS常用的功能都用到了，本例用原生的jquery與bootstrap配合使用，不考慮JS的重構(gòu)性及打包，該例子零耦合，開箱即用。

先看Demo：

Jquery與Bootstrap實現(xiàn)后臺管理頁面增刪改查功能示例

一、用到的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">這里是文本域默認的內(nèi)容</textarea>

3、隱藏/顯示輸入框

$("#my_input").hide();
$("#my_input").show();

4、獲取表單form輸入的數(shù)據(jù)

$("#my_input").hide();
$("#my_input").show();

二、示例代碼

示例前端active_list.html代碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
  <title>活動列表</title>
  <link  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數(shù)據(jù)
              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();

    // 異步提交數(shù)據(jù)到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("標簽名不能重復(fù)！");
              $("#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 () {
    // 關(guān)閉時清空edit狀態(tài)為add
    $("#act").val("add");
    location.reload();
  })
  });
</script>
<body>
<div class="container" >

<h2>
  活動列表
</h2>
  <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>  <!-- 按鈕觸發(fā)模態(tài)框 -->
        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addUserModal">
          添加活動
        </button>
      </td>
    </tr>
    <tr>
      <td colspan="10" >
        <input type="submit" class="btn btn-default" value="搜索" />&nbsp;&nbsp;<a href="active_info_list.php">默認</a>
      </td>
    </tr>
    </tbody>
  </table>
  </form>

  總數(shù)（<b>{total_count}</b>）
<table class="table table-hover table-bordered" >
  <thead>
  <tr>
    <th>排序</th>
    <th>顯示標題</th>
    <th>圖片鏈接</th>
    <th>標簽</th>
    <th>截止時間</th>
    <th>狀態(tài)</th>
    <th>活動詳情</th>
    <th>獎項設(shè)置</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}" /></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">內(nèi)容編輯</a></td>
    <td><span class="glyphicon glyphicon-cog"></span>&nbsp;<a href="active_prize.php?active_id={active_id}" target="_blank">設(shè)置獎項</a></td>
    <td><textarea readonly="true"/>{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>
      &nbsp;&nbsp;
    <button type="button" class="btn btn-danger" onclick="return delete_info({active_id})">刪除</button>
    </td>

  </tr>

  <!-- END list -->


  </tbody>
</table>
  {page_str} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

  <!-- 模態(tài)框（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">
            &times;
          </button>
          <h5 class="modal-title" id="myModalLabel">
            活動詳情
          </h5>
        </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()" >
            <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=""  />
                <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">
                <!-- 塊元素變?yōu)閮?nèi)聯(lián)元素 用display:inline屬性即可成一行，塊元素用block -->
                <input type="text"  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">狀態(tài)</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">關(guān)閉
          </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

/**
 * 獲取提交的數(shù)據(jù)
 *
 */

$act    = $_POST['act'];
$id    = $_POST['id'];
$user_id  = (int)$_POST['user_id'];
$form_data = $_POST['form_data'];
$param_arr = array();


// 獲取到的數(shù)據(jù)格式為 “foo=bar&baz=boom&cow=milk&php=hypertext+processor”
// http_build_query 的數(shù)據(jù)形式用parse_str解析為數(shù)組格式
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;

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手