首页
所有分类
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 相关文章推荐
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
javascript面向对象编程代码
Dec 19 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
vue跨域解决方法
Oct 15 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 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
图像处理(1) FuzzyWuzzy(1) opencv(7) moviepy(1) 模型保存加载(1) PyTorch(1) 人工智能(2) Pyecharts(7) 井字棋(1) 模糊匹配(1)
You might like
php echo 输出字符串函数详解
2010/05/13 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
python中bisect模块用法实例
2014/09/25 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
python配置grpc环境
2019/01/01 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
django项目中新增app的2种实现方法
2020/04/01 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
EJB的基本架构
2016/09/22 面试题
yy结婚证婚词
2014/01/10 职场文书
运动会通讯稿100字
2014/01/31 职场文书
买房委托公证书
2014/04/08 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
汽车转让协议书
2015/01/29 职场文书
南京导游词
2015/02/03 职场文书
教师师德表现自我评价
2015/03/05 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL