宜宾网站建设公司

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

使用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赋默认值

3、隐藏/显示输入框

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

4、获取表单form输入的数据

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

二、示例代码

示例前端active_list.html代码：




  
  活动列表
  
  
  

  








  活动列表


  

  

    
    

      标题：
        
        
      
    

    

      
          默认
      
    

    
  

  


  总数（{total_count}）


  
  

    排序
    显示标题
    图片链接
    标签
    截止时间
    状态
    活动详情
    奖项设置
    简介
    备注
    操作
  

  
  
  
  

    {order_num}
    {title}[{active_id}]
    
    {tag_name}
    {expire_time}
     上架 下架
    内容编辑
     设置奖项
    
    {remark}
    
      
        
    
    

  


  


  


  {page_str}       

动作处理页面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实现后台管理页面增删改查功能示例
链接URL：http://ybzwz.com/article/pjddcc.html

其他资讯