Bootstrap 实现查询的完美方法
Bootstrap，来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。
废话不多说了，直接给大家贴bootstrap实现查询的代码了。具体代码如下所示：
<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title><%=request.getParameter("title")%></title>
</head>
<body>
<!--头部引入-->
<%@includefile="/jsp/public/header.jspf"%>
<divclass="main">
<!--左侧菜单-->
<%@includefile="/jsp/public/menu.jsp"%>
<divclass="left-side">
<divclass="contrain">
<divclass="position">
<aclass="a2"href=""><spanclass="iconfont"></span></a><spanclass="iconfont"></span><span><%=request.getParameter("title")%></span>
</div>
<!--操作部分-->
<divclass="bgrouptext-right">
<!--<s:aaction="dataRule_addUI"cssClass="buttonbPrimary"><iclass="iconfont"></i>新增</s:a>
<ahref="###"class="buttonbSuccess"onclick="editRule();"><iclass="iconfont"></i>编辑</a>
<ahref="###"class="buttonbInfo"onclick="collectRule();"><iclass="iconfont"></i>收藏</a>
<ahref="###"class="buttonbDanger"onclick="delRule();"id="delRuleId"><iclass="iconfont"></i>删除</a>-->
</div>
<divclass="showMessage">
<!--表单部分-->
<formclass="form-inline"id="taskList_form">
<divclass="form-group">
<c:setvar="querywhere"value="state='1'"/>
<c:iftest="${notemptyparam.pdKey}"><c:setvar="querywhere"value="pdKey='${param.pdKey}'"/></c:if>
流程名称：<OATag:selectcssclass="form-controlpdKey"name="pdKey"classname="ProcDefExtend"listkey="pdName"otherattr="${notemptyparam.pdKey?'disabled':''}"listvalue="pdKey"querywhere="${querywhere}"value="${param.pdKey}"auth="false"/>
</div>
<divclass="form-group">
开单人：<inputname="openUserName"onkeypress="if(event.keyCode==13){$('#bnt_search').click();returnfalse;}"class="form-control"/>
</div>
<divclass="form-grouppdate">
<labelfor="date">送达时间：</label>
<inputclass="form-controllayer-date"id="start"placeholder="请选择开始日期"name="startDate"/>
<iclass="iconfont"></i>
</div>
<divclass="form-grouppdate">
<labelfor="date">至</label>
<inputclass="form-controllayer-date"id="end"placeholder="请选择结束日期"name="endDate"/>
<iclass="iconfont"></i>
</div>
<%--<divclass="form-group">
<labelfor="keywords">关键词：</label>
<s:textfieldtype="text"cssClass="form-control"name="keyword"id="keywords"value="%{keyword}"placeholder="请输入关键词"/>
</div>--%>
<divclass="form-group">
<ahref="javascript:void(0);"class="buttonbPrimary"id="bnt_search"onclick="_search();"><iclass="iconfont">n</i>查询</a>
</div>
</form>
<!--表格部分-->
<divclass="content">
<divclass="table-responsive">
<divid="toolbar"><ahref="javascript:void(0);"onclick="batchSignTask('同意','ok');"><iclass="iconiconfont"></i>批量同意/提交</a></div>
<tableid="taskList_table"class="table-stripedtable-hover"data-mobile-responsive="true"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<scripttype="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:"${notemptyparam.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'<imgsrc="/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){
vardiv='<ahref="#"onclick="top.tabShow(\''+rowData.pdName+'\',\'/workflow/central!showTaskForm.action?taskId='+rowData.DBID_+'\')">'+value+'</a>';
returndiv;
}},
{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){
vardiv='未读';
if("2"==value){
div="已读";
}
returndiv;
}}
]]
});
//初次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'});
/*vardata=null;
varpdKey=$(".pdKey").val();
varopenUserName=$("input[name='openUserName']").val();
varstartDate=$("input[name='startDate']").val();
varendDate=$("input[name='endDate']").val();
varpageSize=$(".page-size")[0].firstChild.data;
varpageNumber=$(".page-number.activea").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:"${notemptyparam.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);
}
});*/
}
/**
*批次操作表单
*/
functionbatchSignTask(signTypeLabel,signType){
varrows=$table.bootstrapTable('getSelections');
if(rows.length>0){
vartaskId="";
for(vari=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>
<scripttype="text/javascript">
//日历控件处理
varstart={
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//将结束日的初始值设定为开始日
}
};
varend={
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实现查询的完美方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！