首页
所有分类
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学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 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
默认端口(3) 443(1) 反向代理(2) 压力测试(1) 前后端分离(1) 二级域名(1) SSL(3) shell(3) 防盗链(1) reload(1)
You might like
基于PHP中的常用函数回顾
2013/07/11 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
Javascript计算时间差的函数分享
2011/07/04 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
微信小程序如何引用外部js，外部样式，公共页面模板
2019/07/23 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python易忽视知识点小结
2015/05/25 Python
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
独特的python循环语句
2016/11/20 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
python求前n个阶乘的和实例
2020/04/02 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
英国航空官网：British Airways
2016/09/11 全球购物
小车司机岗位职责
2013/11/25 职场文书
董事长秘书职责
2014/01/31 职场文书
《将心比心》教学反思
2014/04/08 职场文书
商务日语专业自荐信
2014/04/17 职场文书
学校安全生产承诺书
2014/05/23 职场文书
作风建设年活动总结
2014/08/27 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
2014年共青团工作总结
2014/12/10 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python