首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap 实现查询的完美方法

Posted in Javascript onOctober 26, 2016

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 实现查询的完美方法

- Author -

CharlinGod

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
解决使用attachEvent函数时，this指向被绑定的元素的问题的方法
Aug 13 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
React Native第三方平台分享的实例（Android，IOS双平台）
Aug 04 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 #Javascript
jquery延迟对象解析
Oct 26 #Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 #Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 #Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 #Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 #Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 #Javascript
Eclipse(1) 变量提升(1) JOIN(1) form表单(1) 缓冲区(1) json_extract(1) cypress(1) ant design(2) pdf(1) 弹窗(1)
You might like
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
浅谈php自定义错误日志
2015/02/13 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python迭代器与生成器详解
2016/03/10 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
Edwaybuy西班牙：小米在线商店
2019/12/04 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
如何查找和删除数据库中的重复数据
2014/11/05 面试题
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
中专毕业自我鉴定
2013/10/16 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
安全协议书
2014/04/23 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
助理政工师申报材料
2014/06/03 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
导游词之西安骊山
2019/12/03 职场文书