关闭

Bootstrap-查询按钮和重置按钮

标签: BootstrapjqueryCSS3HTML5
10503人阅读 评论(1) 收藏 举报
分类:

1、问题背景

     一般情况下,查询列表有查询条件、查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据;点击重置按钮会将查询条件恢复到原始状态


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Bootstrap-查询按钮和重置按钮</title>
		<link rel="stylesheet" href="../js/bootstrap-3.3.5/dist/css/bootstrap.css" />
		<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="../js/bootstrap-3.3.5/dist/js/bootstrap.js" ></script>
		<script>
			$(document).ready(function(){
				//查询按钮事件
				$("#searchBtn").off().on("click",function(){
					var stuNo = $("#stuNo").val();
					var stuName = $("#stuName").val();
					alert("学生学号:"+stuNo+"\n学生姓名:"+stuName);
					console.info(stuNo+"\n"+stuName);
				});
				
				//重置按钮事件
				$("#resetBtn").off().on("click",function(){
					$("#stuNo").val("");
					$("#stuName").val("");
				});
			});
		</script>
	</head>
	<body>
		<div class="row" style="padding-top: 10px;">
			<div class="col-xs-12">
				<div class="col-xs-2">
					<input type="text" class="form-control" id="stuNo" placeholder="请输入学号"/>
				</div>
				<div class="col-xs-2">
					<input type="text" class="form-control" id="stuName" placeholder="请输入姓名"/>
				</div>
				<div class="col-xs-2">
					<button class="btn btn-primary btn-sm" id="searchBtn">查询</button>
					<button class="btn btn-sm" id="resetBtn">重置</button>
				</div>
			</div>
		</div>
	</body>
</html>

3、实现结果

(1)初始化



(2)输入查询条件点击“查询”



(3)点击“重置”


0
2
查看评论

bootstrap-select清除选中的状态,恢复默认状态

PC端项目中经常会出现大量的数据列表页面,涉及到下拉框选择筛选条件; 当时用到bootstrap-select下拉框时该如何点击重置按钮就清除下拉框的选中状态呢?如【图1】当我们选择摸一个条件之后如【图2】此时点击重置按钮要将【图2】的状态回到【图1】,我们会使用很多方法,比如: ...
  • LLDD2014425
  • LLDD2014425
  • 2017-06-20 11:01
  • 8234

实现Bootstrap中select的重置功能

今天被一个重置bootstrap的select的需求所困扰许久,最后通过网上一位大神指点迷津,成功解决。这里把他分享给大家 》》============================================================================》 若简单地...
  • l_z_w99
  • l_z_w99
  • 2017-08-21 16:30
  • 690

使用bootstrap制作搜索框

在项目开发过程中,我们或多或少都会使用到搜索选项, 那么如何制作一个标准,好看的搜索框呢,这里推荐bootstrap自带的一个控件-input-group 这个控件在bootstrap中文网上没有说明,所以需要去看官方的文档,地址在 input-group 先简单看下对于这个控件官方的说明 ...
  • wuhawang
  • wuhawang
  • 2016-08-16 09:51
  • 26604

bootstrapTable 搜索框和查询功能

1..知识点bootstrapTable 刷新和查询配置 2.提升js代码性能 1.减少全局变量声明 2.缓存dom节点查找结果 /**  * @param col bootstrapTable列表生成配置对象  */ var searchValue ={};//查询...
  • sixteen_cicle
  • sixteen_cicle
  • 2017-04-18 11:13
  • 17493

form表单的reset

form表单的reset 重置表单(把表单的所有输入元素重置为它们的默认值。):1.使用reset按钮,条件reset按钮必须在form表单内部。2. 可以不在表单内部。用途示例:一般我们做添加页面和编辑页面时用的都是同一个页面,这样以来编辑后再添加时表单内容就需要清除,很多人在使用后台代...
  • 21aspnet
  • 21aspnet
  • 2012-07-11 19:48
  • 7050

bootstrapValidator show.bs.model事件中resetForm失效

今天想在弹出的模态框中清空bootstrap的样式信息。比如下图 这是添加的模态框,每次添加的时候想还原div,也就是重置表单,让验证信息都去掉,看到官网上有个例子说 Resetting Form When Showing the Modal If you want to reset a...
  • zero_295813128
  • zero_295813128
  • 2016-09-28 17:43
  • 5052

Bootstrap 实现输入框中的 x 按钮删除文本值

bootstrap 的 form-control提供了一个 form-control-feedback类,用于在输入框中显示一个状态,下面的地址有实例: http://www.w3schools.com/bootstrap/bootstrap_forms_inputs2.asp 如果有多个输入框...
  • jl381169437
  • jl381169437
  • 2016-05-01 23:13
  • 7190

Bootstrap 实现查询的方法

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE html> <html lang="en&...
  • lovoo
  • lovoo
  • 2016-10-26 09:09
  • 7401

Bootstrap Table 查询实现

实现查询思路: 1.定义一个局左的Toolbar包含 新建、保存和新建的按钮 2.定义一个局右的QueryForm 包含查询条件 和 查询清除按钮 3.定义一个Table 实现效果如下: 代码如下 div class="container-fluid"&g...
  • qq_26115733
  • qq_26115733
  • 2018-01-16 00:55
  • 162

Bootstrap Table 实现简单的查询和显示功能

最近用bootstraptable写了一个查询显示的界面。 下面是主要代码:   1.    我引入的css和js link rel="stylesheet" href="${basePath...
  • actionzh
  • actionzh
  • 2017-08-12 22:39
  • 2312
    个人资料
    • 访问:5578706次
    • 积分:72940
    • 等级:
    • 排名:第28名
    • 原创:1925篇
    • 转载:76篇
    • 译文:3篇
    • 评论:1193条
    百度技术栏目
    网易博客
    新浪博客
    博客专栏
    Linux

    文章:47篇

    阅读:66271
    dojo

    文章:10篇

    阅读:30471
    Flex

    文章:13篇

    阅读:29322
    FusionCharts

    文章:14篇

    阅读:71436
    文章分类
    最新评论