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

先看Demo：

一、用到的Jquery功能

1、获取/赋值input输入值

获取 $("#my_id").val(“user_id");// 赋值

2、获取/赋值textarea文本域输入值

获取 $("#my_textarea").val("my_textarea");// 赋值

// 文本域显示默认值，这个和input不一样，不能通过value赋默认值
<textarea name="my_textarea" readonly="true"style="width:100px;height:30px;">这里是文本域默认的内容

3、隐藏/显示输入框

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

二、示例代码

示例前端active_list.HTML代码：

<Meta charset="gb2312"> 活动列表

活动列表

PHP" method="post" class="form"> 标题：

总数（{total_count}）

排序上架 PHP?active_id={active_id}" target="_blank">设置奖项

<button type="button" class="btn btn-danger" onclick="return delete_info({active_id})"&gt;<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a></button>
</td&gt;

</tr>

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

标题

标签

链接

图片链接">

        <div class="form-group"&gt;
          <label for="lastname" class="col-sm-3 control-label"&gt;截止时间</label>
          <div class="col-sm-9"&gt;
            <!-- 块元素变为内联元素 用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="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-inline"&gt;
            <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" name="is_forever" id="is_forever" value="1" onclick="return click_forever()"&gt;不限时
              </label>

          </div>
        </div>

        <div class="form-group"&gt;
          <label for="lastname" class="col-sm-3 control-label"&gt;状态</label>
          <div class="col-sm-9"&gt;

            <label class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-inline"&gt;
              <input type="radio" name="status" id="status_on" value="1" >上架
            </label>
            <label class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-inline"&gt;
              <input type="radio" name="status" id="status_off" checked="checked" value="0" >下架
            </label>
          </div>
        </div>

        <div class="form-group"&gt;
          <label for="remark" class="col-sm-3 control-label"&gt;简介</label>
          <div class="col-sm-9"&gt;
            <textarea class="form-control" name="summary" value="{summary}" id="summary"
                placeholder="活动简介"&gt;

            </textarea>
          </div>
        </div>
        <div class="form-group"&gt;
          <label for="remark" class="col-sm-3 control-label"&gt;备注</label>
          <div class="col-sm-9"&gt;
            <textarea class="form-control" name="remark" value="{remark}" id="remark"
                  placeholder="备注"&gt;

            </textarea>
          </div>
        </div>
      </div>
    <div class="modal-footer"&gt;
      <button type="button" class="btn btn-default" data-dismiss="modal"&gt;<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a>
      </button>
      <button type="submit" class="btn btn-primary"&gt;
        提交
      </button><span id="tip"&gt; </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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/jquery/42212.html

bootstrap做增删改查 Bootstrap增删改查 bootstrap的增删改查

上一篇：JQueryEasyUI框架下的combobox的取下一篇：前端开发必知的15个jQuery小技巧

猜你在找的jQuery相关文章

《锋利的jQuery》笔记：插件的使用和写法

jQuery插件的种类 1、封装对象方法这种插件是将对象方法封装起来，用于对通过选择器获取的...

作者：前端之家时间：2020-12-28

jQuery插件开发入门

扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。入门编写一个jQuery...

作者：前端之家时间：2020-12-28

jquery.roundabout.js实现3D图片层叠旋转木马切换

最近项目中需要实现3D图片层叠旋转木马切换的效果，于是用到了jquery.roundabout.js。兼容...

作者：前端之家时间：2020-12-28

jQuery效果之jQuery实现图片的依次加载图片

css代码： js代码：

作者：前端之家时间：2020-12-28

jQuery之deferred对象详解

一、什么是deferred对象？开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。...

作者：前端之家时间：2020-12-28

jQuery插件开发进阶

jQuery插件开发模式软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能...

作者：前端之家时间：2020-12-28

jQuery 实现邮箱输入自动提示功能：（一）

记得去年做某个项目的时候，用到了邮箱输入自动提示功能，于是网上搜了一下，发现了这个写...

作者：前端之家时间：2020-12-28

jQuery插件之上传文件ajaxfileupload.js源码与使用

在网页应用中，一般会用到上传文件或者图片什么的到服务器，那么可以用ajaxfileupload.js，...

作者：前端之家时间：2020-12-28

jQuery效果之封装一个文章图片弹出放大效果

首先先搭写一个基本的格式：然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递...

作者：前端之家时间：2020-12-28

《从零开始学习jQuery》：用jQuery操作元素的属性与样式

元素属性和Dom属性简介对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也...

作者：前端之家时间：2020-12-28

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

一、用到的Jquery功能

二、示例代码

猜你在找的jQuery相关文章