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">n</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 實現查詢的完美方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
