Bootstrap 实现查询的完美方法
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
废话不多说了，直接给大家贴bootstrap实现查询的代码了。具体代码如下所示：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title><%=request.getParameter("title") %></title>
</head>
<body>
<!-- 头部引入 -->
<%@ include file="/jsp/public/header.jspf" %>
<div class="main">
<!-- 左侧菜单 -->
<%@ include file="/jsp/public/menu.jsp" %>
<div class="left-side">
<div class="contrain">
<div class="position">
<a class="a2" href=""><span class="iconfont"></span></a> <span class="iconfont"></span> <span><%=request.getParameter("title") %></span>
</div>
<!-- 操作部分 -->
<div class="bgroup text-right">
<!-- <s:a action="dataRule_addUI" cssClass="button bPrimary"><i class="iconfont"></i>新增</s:a>
<a href="###" class="button bSuccess" onclick="editRule();"><i class="iconfont"></i>编辑</a>
<a href="###" class="button bInfo" onclick="collectRule();"><i class="iconfont"></i>收藏</a>
<a href="###" class="button bDanger" onclick="delRule();" id="delRuleId"><i class="iconfont"></i>删除</a> -->
</div>
<div class="showMessage">
<!-- 表单部分 -->
<form class="form-inline" id="taskList_form">
<div class="form-group">
<c:set var="querywhere" value="state='1'"/>
<c:if test="${not empty param.pdKey}"><c:set var="querywhere" value="pdKey='${param.pdKey}'"/></c:if>
流程名称：<OATag:select cssclass="form-control pdKey" name="pdKey" classname="ProcDefExtend" listkey="pdName" otherattr="${not empty param.pdKey?'disabled':''}" listvalue="pdKey" querywhere="${querywhere}" value="${param.pdKey}" auth="false"/>
</div>
<div class="form-group">
开单人：<input name="openUserName" onkeypress="if(event.keyCode==13){$('#bnt_search').click();return false;}" class="form-control"/>
</div>
<div class="form-group pdate">
<label for="date">送达时间：</label>
<input class="form-control layer-date" id="start" placeholder="请选择开始日期" name="startDate" />
<i class="iconfont"></i>
</div>
<div class="form-group pdate">
<label for="date">至</label>
<input class="form-control layer-date" id="end" placeholder="请选择结束日期" name="endDate"/>
<i class="iconfont"></i>
</div>
<%-- <div class="form-group">
<label for="keywords">关键词：</label>
<s:textfield type="text" cssClass="form-control" name="keyword" id="keywords" value="%{keyword}" placeholder="请输入关键词"/>
</div> --%>
<div class="form-group">
<a href="javascript:void(0);" class="button bPrimary" id="bnt_search" onclick="_search();"><i class="iconfont"></i>查询</a>
</div>
</form>
<!-- 表格部分 -->
<div class="content">
<div class="table-responsive">
<div id="toolbar"><a href="javascript:void(0);" onclick="batchSignTask('同意','ok');"><i class="icon iconfont"></i>批量同意/提交</a></div>
<table id="taskList_table" class="table-striped table-hover" data-mobile-responsive="true"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var $table = $("#taskList_table");
$table.bootstrapTable({
url: '${ctx}/task_list.action', //请求后台的URL（*）
method: 'post', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
contentType: "application/x-www-form-urlencoded",
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1,
pageSize: 10,
pageList: [10, 25, 50, 100, 'All'],
smartDisplay: false,//智能显示分页按钮
paginationPreText: "上一页",
paginationNextText: "下一页",
queryParams: function (params) {
return {
rows: this.pageSize,
page: this.pageNumber,
webRequest: true,
/* pdKey:"${not empty param.pdKey?param.pdKey:''}" */
pdKey:$(".pdKey").val(),
openUserName:$("input[name='openUserName']").val(),
startDate:$("input[name='startDate']").val(),
endDate:$("input[name='endDate']").val()
};
},
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
idField : 'DBID_',
sortName : 'CREATE_',
sortOrder : 'desc',
sortable: true, //是否启用排序
columns:[[
{field:'DBID_',checkbox:true},
{field:'flowImg',title:'签核图',width:100,formatter:function(value,rowData,rowIndex){
return '<img src="/common/js/jquery-easyui-1.3.3/themes/icons/workflow.png" style="Cursor:pointer" title="流程图" alt="流程图" onclick="top.tabShow(\'流程图：'+rowData.pdName+'\',\'${ctx}/workflow/central!trackTask.action?proDbId='+rowData.PROCINST_+'\')"/>';
}},
{field:'pdName',title:'流程名称',sortable:true,width:180},
{field:'flowNo',title:'编号',width:200,formatter:function(value,rowData,rowIndex){
var div = '<a href="#" onclick="top.tabShow(\''+rowData.pdName+'\',\'/workflow/central!showTaskForm.action?taskId='+rowData.DBID_+'\')">'+value+'</a>';
return div;
}},
{field:'ACTIVITY_NAME_',title:'关卡名称',width:200},
{field:'keyWord_',title:'主旨',width:400},
{field:'username',title:'开单人',width:100},
{field:'prevMemberName_',title:'送出人',width:100},
{field:'CREATE_',title:'送达时间',sortable:true,width:200},
{field:'TASKSTATE_',title:'状态',width:200,formatter:function(value,rowData,rowIndex){
var div = '未读';
if("2"==value){
div="已读";
}
return div;
}}
]]
});
//初次5分钟后执行
window.setTimeout(_search, 1000*60*5);
//-处理搜索功能------------------------------------
//搜索按钮绑定回车事件
document.onkeydown = function(event){
if (event.keyCode == 13) {
event.cancelBubble = true;
event.returnValue = false;
_search();
}
}
function _search() {
$table.bootstrapTable('refresh', {url: '${ctx}/task_list.action'});
/* var data = null;
var pdKey = $(".pdKey").val();
var openUserName=$("input[name='openUserName']").val();
var startDate=$("input[name='startDate']").val();
var endDate=$("input[name='endDate']").val();
var pageSize = $(".page-size")[0].firstChild.data;
var pageNumber = $(".page-number.active a").text();
if(pdKey!=null){
data={rows:pageSize,page:pageNumber,pdKey:pdKey,openUserName:openUserName,startDate:startDate,endDate:endDate,webRequest: true};
}else{
data={rows:pageSize,page:pageNumber,webRequest:true,pdKey:"${not empty param.pdKey?param.pdKey:''}"};
}
$.ajax({
url:'${ctx}/workflow/central!findTaskList.action',
type:'post',
dataType:'json',
data:data,
success:function(json,textstatus){
$table.bootstrapTable('removeAll');
$table.bootstrapTable('load',json);
}
}); */
}
/**
*批次操作表单
*/
function batchSignTask(signTypeLabel,signType){
var rows = $table.bootstrapTable('getSelections');
if(rows.length>0){
var taskId="";
for(var i=0;i<rows.length;i++){
if(taskId!=""){
taskId +=",";
}
taskId += rows[i].DBID_;
}
top.sy.dialogSimp({title:'签核视窗',queryParams:{'signTypeLabel':signTypeLabel,'signType':signType},href : '${ctx}/jsp/workflow/dialog/signCommentWin.jsp'}
,'${ctx}/workflow/central!signTask.action?batchSignTask=1&taskId='+taskId
,wf_tl_data);
}else{
Confirm.show('提示', '请选取要批次操作的数据行！');
}
}
</script>
<script type="text/javascript">
// 日历控件处理
var start = {
elem: '#start',
format: 'YYYY-MM-DD',
/* min: laydate.now(), //设定最小日期为当前日期 */
max: '2099-06-16', //最大日期
istime: true,
istoday: false,
choose: function(datas){
end.min = datas; //开始日选好后，重置结束日的最小日期
end.start = datas //将结束日的初始值设定为开始日
}
};
var end = {
elem: '#end',
format: 'YYYY-MM-DD',
/* min: laydate.now(), */
max: '2099-06-16',
istime: true,
istoday: false,
choose: function(datas){
start.max = datas; //结束日选好后，重置开始日的最大日期
}
};
laydate(start);
laydate(end);
laydate.skin('molv');
</script>
</html>
以上所述是小编给大家介绍的Bootstrap 实现查询的完美方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
使用Bootstrap框架制作查询页面的界面实例代码
以Bootstrap框架来进行设计和开发,是目前国际上比较流行的一个趋势.很多软件公司在优化新产品时,因为其在js和控件上的综合优势,会选用这个开发框架. Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不同的页面元素的布局),在Bootstrap中很好的支持了,只要简单设置了属性,就能自动实现响应时布局,大大简化了程序员的界面的过程. 因此,本人
-
完美实现bootstrap分页查询
最近,开始我们的Java项目,要求尽量使用bootstrap,因为它比easyUI要好看的多.然后就开始上网查,边查边做,虽然我们引入了一些bootstrap的样式,但是并没有js代码,所有的功能都需要自己用js做.其实并不难,只要我们明白分页的实质就行.说了这么多,就让我们看看分页查询的表格是怎么做出来的吧. 先上效果图: 1.引入的css样式 我们需要引入bootstrap自带的表格样式,这样比较好看,如果再需要修改的话,我们就在其基础上再改. <link rel="styleshee
-
Bootstrap 实现查询的完美方法
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 废话不多说了,直接给大家贴bootstrap实现查询的代码了.具体代码如下所示: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE html&
-
Bootstrap中CSS的使用方法
Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型. <!DOCTYPE html> <html lang="zh-CN"> ... </html> 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示: <meta name="viewport" content=&quo
-
对laravel in 查询的使用方法详解
今天遇到多条件搜索,其中需要用到in查询,但是laravel不支持 [ 'type', 'in', '1,2,3'] 这样的写法 经过一波百度,也没发现什么好的方法. 其中一种方法是: $where = function ($query) {$query->whereIn('id', [1,2])->orWhere('d_id', '=', '83');} 这样确实可以解决,是一种解决方法.但我总觉得还有更好的方法,找到了 DB::Raw(); 开始我是这样用的 但是这样总会在sql后面出现i
-
Vue记住滚动条和实现下拉加载的完美方法
滚动条 常见于移动端 App 在滚动点击进入的时候 问题描述 当我们在开发 web app 的时候,经常会遇到一个问题,就是当从一个可滚动的列表页进入到下一个详情页面,然后返回列表页面的时候,很难去还原滚动条的状态,无法记住进来时候的位置. 以前我尝试过很多方法: 有 vue-router 自带的 scrollBehavior,需要记住 scrollTop,然后还原,但是管理这个 scrollTop 显得很麻烦,有的时候还不容易取值还有使用纯 CSS 的方式,在列表页面放置一个 router-v
-
MySQL 分组查询的优化方法
MySQL 在处理 GROUP BY 和 DISTINCT 查询的方式在大多数情况下类似,事实上,在优化过程中有时候会把在这两种方式中转换.两类查询都能够从索引中受益,通常,这也是优化这两种查询最为重要的方式. 在无法使用索引时,MySQL 对于 GROUP BY 查询有两种策略:使用临时表或者 filesort 执行分组.对于给定的查询,两种方式都没法更高效.我们可以通过配置 SQL_BIG_RESULT 和 SQL_SMALL_RESULT 来指定优化器选择其中一个方式. 通常,对查询表的i
-
Java Fluent Mybatis 聚合查询与apply方法详解流程篇
前言 接着上一篇文章:Java Fluent Mybatis 分页查询与sql日志输出详解流程篇 我把分页已经调整好了,现在实验一下官方给出的聚合查询方法. GitHub代码仓库:GitHub仓库 数据准备 为了聚合查询的条件,添加了几条数据. MIN 我们试着获取最小的年龄. 方法实现 @Override public Integer getAgeMin() { Map<String, Object> result = testFluentMybatisMapper .findOneMap(
-
Spring Data JPA查询方式及方法名查询规则介绍
目录 Spring Data JPA查询方式及方法名查询规则 一.通过解析方法名创建查询 二.使用 @Query 创建查询 JPA 常用查询方法记录 CrudRepository 默认带的查询方法 简单的扩展-以字段为关键字进行查询 使用@Query 进行复杂查询 使用 Specification 进行复杂查询 Predicate CriteriaBuilder Root Spring Data JPA查询方式及方法名查询规则 Spring Data JPA 一.通过解析方法名创建查询 在执行查
-
mybatis 模糊查询的实现方法
mybatis 模糊查询的实现方法 mybatis的逆向助手确实好用,可以省去很多编写常规sql语句的时间,但是它没办法自动生成模糊查询语句,但开发中模糊查询是必不可少的,所以,需要手动对mapper编写模糊查询功能. 这里先明确MyBatis/Ibatis中#和$的区别: 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的值为order by "111", 如果传入的值是id,则解
-
ORACLE多条件统计查询的简单方法
前几天要做一个统计查询的功能,因为涉及多张表,多种条件的统计分析.一开始便想到了UNION和IF语句,然后写了1000多行代码,就为了查30条数据觉得不应该. 然后就开始百度,多种条件下的统计.然后有一种语法让我眼前一亮,case when then else end 当满足CASE设定的条件时,就可以执行then语句.由于我要做的分组查询统计,是要罗列每一种情况,而且根据输入的"管理员编号"不同返回不同结果,结果记录的条数和每一种情况是可知的,这个语法完全可用 核心代码如下: SEL
-
php连接odbc数据源并保存与查询数据的方法
本文实例讲述了php连接odbc数据源并保存与查询数据的方法.分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: $connstr = "driver=microsoft access driver (*.mdb);dbq=".realpath("db.mdb"); $connid = odbc_connect($connstr,"","",sql_cur_use_odbc); $odbc_exec =