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

最新推荐文章于 2023-06-20 10:54:00 发布

zlp377957570

最新推荐文章于 2023-06-20 10:54:00 发布

阅读量2k

点赞数

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

一、用到的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;”>这里是文本域默认的内容
3、隐藏/显示输入框

$("#my_input").hide();
$("#my_input").show();
4、获取表单form输入的数据

$("#my_input").hide();
$("#my_input").show();
二、示例代码
示例前端active_list.html代码：

活动列表

function act_resize_img(imgObj, rectWidth, rectHeight, fixIeBug)
{
try
{
if(!fixIeBug) fixIeBug = true;
//修正在IE运行下的问题
if( (imgObj.width0 || imgObj.height0) && 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 = $. t r i m ($ (’#title’).val());
var tag_name = $. t r i m ($ (’#tag_name’).val());
var act = $. t r i m ($ (’#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();
})
});

活动列表

标题：	添加活动
默认

总数（{total_count}）

排序	显示标题	图片链接	标签	截止时间	状态	活动详情	奖项设置	简介	备注	操作
{order_num}	{title}[{active_id}]		{tag_name}	{expire_time}	上架下架	内容编辑	设置奖项

{page_str}

上传封面图片

src="upload_img.php" scrolling="no" width="380px" height="35">

排名

标题

标签

封面图链接

        <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 -->

动作处理页面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;

zlp377957570

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Jquery与Bootstrap实现后台管理页面增删改查功能示例

使用jquery与bootstrap实现了一个比较简单但功能齐全的增删改查功能的后台管理页面，虽然只是一个CRUD页面，但麻雀虽小五脏俱全，JS常用的功能都用到了，本例用原生的jquery与bootstrap配合使用，不考虑JS的重构性及打包，该例子零耦合，开箱即用一、用到的Jquery功能1、获取/赋值input输入值$("#my_id").val();// 获取$("#my_id")....
复制链接

扫一扫