bootstrap-table refresh自定义搜索form button的坑

最新推荐文章于 2024-05-04 23:20:49 发布

浩瀚云海

最新推荐文章于 2024-05-04 23:20:49 发布

阅读量2k

点赞数 1

分类专栏： bootstrap java 文章标签： java bootstrap-table

本文链接：https://blog.csdn.net/qq_35723619/article/details/84367476

版权

java 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

bootstrap

4 篇文章 0 订阅

订阅专栏

今天试用bootstrap-table做自定义搜索实现：

html实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap案例</title>
<link rel="stylesheet" type="text/css" href="/xjzhgdyun/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/xjzhgdyun/bootstraptable/bootstrap-table.css" />
<link rel="stylesheet" type="text/css" href="../css/test.css" />
<script type="text/javascript" src="/xjzhgdyun/js/jquery.min.js"></script>
<script type="text/javascript" src="/xjzhgdyun/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="/xjzhgdyun/bootstraptable/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/xjzhgdyun/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script> 
<script type="text/javascript" src="../js/test.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h4>全国施工企业列表</h4>
			</div>
		</div>
		
		   <div class="row">
			<h3>js获取数据</h3>
			<div class="col-md-12">
				<table id="table">
				
				</table>
			</div>
			
		</div>  <!-- js获取数据结束 -->
		 <div class="row">
			<h3>html获取数据</h3>
			<div class="col-md-12">
					<table id="table1"
							data-toggle="table" 
							data-url="/xjzhgdyun/get_demo_table_list.call"
							data-method="post"
							data-content-type="application/x-www-form-urlencoded; charset=UTF-8"
							data-pagination="true"  
							data-show-columns="true"
							data-show-refresh="true"
							data-show-fullscreen="true"
							data-side-pagination="server"
							data-page-number="1"
							data-page-size="10"
							data-sort-name="name"
							data-sort-order="desc"
							data-page-list="[10, 20,30,all ]"
							data-query-params="queryParams1"
							data-query-params-type="undefind"
							data-toolbar="#tb1"
						>
					    <thead>
					        <tr>
					            <th data-field="name" data-align="center">Item ID</th>
					            <th data-field="telephone" data-align="center">Item Name</th>
					            <th data-field="password" data-align="center">Item Price</th>
					            <th data-field="toolbar" data-width="120px" data-align="center">状态</th>
					        </tr>
					    </thead>
					</table>

			</div><!-- html 获取数据结束 -->
		</div> 
		<div class="row">
			<div class="col-md-12" id="tb">
				<form class="form-inline" id="resource-form">
				  	  <div class="form-group form-inner">
					    <label for="user_name" class="form-lable">姓名：</label>
					    <input type="text" class="form-control form-input" id="username" name="user_name"  placeholder="姓名">
					  </div>
					  <div class="form-group form-inner">
					    <label for="telephone" class="form-lable">手机号：</label>
					    <input type="text" class="form-control form-input" id="telephone" name="telephone" placeholder="手机号">
					  </div>
					  <div class="form-group form-inner">
					    <label for="password" class="form-lable">密码：</label>
					    <input type="text" class="form-control form-input" id="password" name="password" placeholder="密码">
					  </div>
					 	<a class="btn btn-info  glyphicon glyphicon-search form-search" onclick="searchfun()" >搜索</a>
					 	<a class="btn btn-info glyphicon glyphicon-plus form-search" onclick="clearfun()" >清除</a>
						<a class="btn btn-info glyphicon glyphicon-plus form-search" data-toggle="modal" data-target="#myModal">添加</a>
				</form>
			</div>
			<div class="row">
			<div class="col-md-12" id="tb1">
				<form class="form-inline" id="resource-form">
				  	  <div class="form-group form-inner">
					    <label for="user_name" class="form-lable">姓名：</label>
					    <input type="text" class="form-control form-input" id="username1" name="user_name"  placeholder="姓名">
					  </div>
					  <div class="form-group form-inner">
					    <label for="telephone" class="form-lable">手机号：</label>
					    <input type="text" class="form-control form-input" id="telephone1" name="telephone" placeholder="手机号">
					  </div>
					  <div class="form-group form-inner">
					    <label for="password" class="form-lable">密码：</label>
					    <input type="text" class="form-control form-input" id="password1" name="password" placeholder="密码">
					  </div>
					 	<a class="btn btn-info  glyphicon glyphicon-search form-search" onclick="searchfun1()" >搜索</a>
						<a class="btn btn-info glyphicon glyphicon-plus form-search" data-toggle="modal" data-target="#myModal">添加</a>
				</form>
			</div>
			
		</div>
	</div>
	<!-- 模态框（Modal） -->
			<div class="modal fade" id="myModal" 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>
			                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
			            </div>
			            <div class="modal-body">在这里添加一些文本</div>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			                <button type="button" class="btn btn-primary">提交更改</button>
			            </div>
			        </div><!-- /.modal-content -->
			    </div><!-- /.modal -->
			</div>
</body>
</html>

js实现：

$(function(){
	$('#table').bootstrapTable({
	    url:'/xjzhgdyun/get_demo_table_list.call',
	    method:'post',
	    dataType:'json',
	    contentType:"application/x-www-form-urlencoded; charset=UTF-8",
	    showRefresh:true,
	    showColumns:true,
	    showFullscreen:true,
	    pagination:true,
	    pageNumber:1,
	    pageSize:10,
	    pageList:[10,20,30],
	    data_local: "zh-US",//表格汉化
	    cache:false,//禁用 AJAX 数据缓存。
	    search:false,//启用搜框
	    toolbar: '#tb',//指定工具栏
        sidePagination: "server", //服务端处理分页 server 前端分页client
        striped: true,//设置为 true 会有隔行变色效果
        queryParamsType:'undefind',
        queryParams: queryParams,
        sortClass:"name",
        sortName:"name",
	    idField: "name",
	    columns:[{
	    	title:'姓名',
	    	field:'name',
	    	align:'center'
	    },{
	    	title:'联系方式',
	    	field:'telephone',
	    	align:'center',
	    	sortable:true
	    		
	    },{
	    	title:'密码',
	    	field:'password',
	    	align:'center'
	    },{
	    	title:'操作',
	    	field:'toolbar',
	    	width:120,
	    	align:'center'
	    },]
	});
	
});


//得到查询的参数
function remove(id){
	alert(id);
}
function edit(id){
	alert(id);
}
//获取参数
function queryParams(params) {
	alert($("#username").val());
	if($("#username").val()!=null||""!=$("#username").val()){
		this.pageNumber=1;
	}
	var pars = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
			 offset:this.offset,
	         pageSize: this.pageSize,   //页面大小
	         pageNumber: this.pageNumber,  //页码
	         sortName:this.sortName,
	         sortOrder:this.sortOrder,
	         searchText:this.searchText,
	         name: $("#username").val(),
	         telephone: $("#telephone").val(),
	         password: $("#password").val(),
	     };
    return pars;
}
function searchfun() {
	$("#table").bootstrapTable('refresh');
}
function clearfun(){
	$("#username").val("");
	$("#telephone").val("");
    $("#password").val("");
    searchfun();
}
function queryParams1(params) {
	var pars = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
	         pageSize: params.pageSize,   //页面大小
	         pageNumber: params.pageNumber,  //页码
	         sortName:params.sortName,
	         sortOrder:params.sortOrder,
	         searchText:params.searchText,
	         name: $("#username1").val(),
	         telephone: $("#telephone1").val(),
	         password: $("#password1").val(),
	     };
    return pars;
}
function searchfun1() {
	$("#table1").bootstrapTable('refresh');
}

这里介绍配置参数：

写自定义函数：

function queryParams(params) {
	alert($("#username").val());
	if($("#username").val()!=null||""!=$("#username").val()){
		this.pageNumber=1;
	}
	var pars = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
			 offset:this.offset,
	         pageSize: this.pageSize,   //页面大小
	         pageNumber: this.pageNumber,  //页码
	         sortName:this.sortName,
	         sortOrder:this.sortOrder,
	         searchText:this.searchText,
	         name: $("#username").val(),
	         telephone: $("#telephone").val(),
	         password: $("#password").val(),
	     };
    return pars;
}

官方文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

搜索结果：

controller:

@Controller
public class TestController extends BaseController {
	@Autowired
	private TestService testService;
	
	@RequestMapping("/get_demo_table_list.call")
	public void get_roles_list(int pageSize,int pageNumber,String sortName,String sortOrder,String name,String telephone,String password,
			HttpServletResponse response) throws IOException
	{
		testService.get_demo_table_list(pageSize,pageNumber,sortName,sortOrder,name,telephone,password);
		response.getWriter().write(testService.getReturnObject().toString());
	}
	
}

public void get_demo_table_list(int pageSize,int pageNumber,String sortName,String sortOrder,String name,String telephone,String password) {
		String sql="SELECT id, user_name,telephone,`password`,role_number from `user` where 1=1 ";
		
		if(null != name && !"".equals(name)){
			sql += " AND user_name like '%"+name+"%' ";
		}
		
		if(null != telephone && !"".equals(telephone)){
			sql += " AND telephone = '"+telephone+"' ";
		}
		if(null != password && !"".equals(password)){
			sql += " AND password = '"+password+"' ";
		}
		int count=userDao.findCountByMySql(sql);
		List<User> list = userDao.findListByMySql(sql, pageNumber, pageSize);
		JSONObject jo=new JSONObject();
		JSONArray ja=new JSONArray();
		JSONObject jr=new JSONObject();
		for(User u : list){
			jo.put("name",u.getUser_name());
			jo.put("telephone", u.getTelephone());
			jo.put("password", u.getPassword());
			String toolbar="<a class=\"btn btn-xs btn-warning glyphicon glyphicon-trash toolbar-del\" onclick=\"remove('"+u.getId()+"')\" >删除</a>"+
					"<a class=\"btn btn-xs btn-success glyphicon glyphicon-pencil toolbar-edit\" onclick=\"edit('"+u.getId()+"')\" >编辑</a>";
			jo.put("toolbar",toolbar);
			ja.add(jo);
		}
		jr.put("total", count);
		jr.put("rows", ja);
		super.setReturnObject(jr);
	}

这个我给大家演示我遇到的坑：

我们把这里改为button：

这里添加监控刷新事件：

contraller改变：

点击搜索按钮，看到

我们看到页面竟然触发了刷新页面：

后台也接收到数据，我们放开断点：

我们发现问题竟然发了两次请求刷新页面在搜索请求之后，所有在数据渲染时，搜索的数据被覆盖了

查阅资料才发现：

bootstrap:button放在form里不指定type会刷新页面：

现在我们加上类型：

页面不刷新了

有刷新页面了

总结：button在在form里type省略会刷新页面，type=submit时会刷新页面，type=button|reset不会刷新页面，

这里个人建议如果使用ajax提交数据我们可以使用a标签做button

或者把form改为div

感谢支持

浩瀚云海

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-table refresh自定义搜索form button的坑

今天试用bootstrap-table做自定义搜索实现：html实现：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8&q
复制链接

扫一扫

专栏目录