bootstrapTable使用例子
程序员文章站
2022-07-15 10:38:29
...
效果图
JSP
<script type="text/javascript">
//公交运行信息列表---下拉列表
$.post("busRunInfoSelect", function(data) {
for(i=0;i<=data.length-1;i++){
$("#busSelect").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
}
});
//公交运行信息列表-------------------选择下拉列表重新加载表单
$(document).ready(function() {
initTable();
$("#busSelect").change(function(){
var checkValue=$("#busSelect").val();//获取下拉列表选择值
bootstrapTableUrl = "xx/xx/busRunInfo?busId="+checkValue;//拼接请求地址
$("#contentTable").bootstrapTable("refresh",{url: bootstrapTableUrl });//更新表单
});
});
//公交运行信息列表------初始化表单
function initTable(){
$('#contentTable').bootstrapTable({
url : 'xx/xx/busRunInfo', //请求后台的URL（*）
method: 'post', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: false, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: false, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "", //排序方式,例如 "ID asc"
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
//pageNumber:1, //初始化加载第一页，默认第一页
//pageSize: 4, //每页的记录行数（*）
//pageList: [10, 25, 50, 100, 200], //可供选择的每页的行数（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
queryParamsType: "limit", //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort;设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber
dataType: "json",
uniqueId: "id", //每一行的唯一标识，一般为主键列
contentType: "application/x-www-form-urlencoded", //增加该行，后台才能获取到pagesize/pageno
queryParams: queryParams,//传递参数（*）
showColumns: false, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
showToggle:false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns : [
{
field : 'lineName',
title : '线路名称',
sortable : false
}
, {
field : 'upDown',
title : '上下行',
sortable : false
}
, {
field : 'runScope',
title : '运行区间',
sortable : false
}
, {
field : 'lineInfo',
title : '行驶路线',
sortable : false
}
, {
field : 'presetTime',
title : '时间段',
sortable : false
}
, {
field : 'realityStartTime',
title : '实际发车时间',
sortable : false
}
, {
field : 'realityStopTime',
title : '实际到站时间',
sortable : false
}
]
});
};
//公交运行信息列表
function queryParams(params) {
if((params.sort+params.order)=="undefined")
{
orderBy="";
}
else{
orderBy=params.sort+" "+params.order;
}
var formData = $("#searchForm").form2json();
formData["pageSize"] = params.limit;
formData["pageNo"] = params.pageNumber;
formData["orderBy"] =orderBy;
return formData;
};
</script>
-----------------------------------------------------------------------------------------------------------------------------------------------------------
<select class="input-medium" id="busSelect" style="width: 200px; height: 27px;">
<option>请选择车辆</option>
</select>
<!-- 公交运行信息列表 -->
<table id="contentTable" class="table table-bordered table-hover tile" style="height: 220px"></table> controller
// 公交运行信息列表
@ResponseBody
@RequestMapping(value = "busRunInfo")
public JSONObject busRunInfo(@RequestParam(value = "busId", defaultValue = "1") String id) {
JSONObject rt = new JSONObject();
List<Map<String, String>> list = busMonitorService.busRunInfo(id);
rt.put("rows", list);
return rt;
}
// 公交运行信息下拉列表
@ResponseBody
@RequestMapping(value = "busRunInfoSelect")
public List<Map<String, String>> busRunInfoSelect() {
List<Map<String, String>> list = busMonitorService.busRunInfoSelect();
return list;
}service
// 公交运行信息
public List<Map<String, String>> busRunInfo(String id) {
List<Map<String, String>> list = new ArrayList<>();
Map<String, String> map = new HashMap<>();
map.put("lineName", "快速公交1");
map.put("upDown", "上行");
map.put("runScope", "北环-外环");
map.put("lineInfo", "北环-*路-人民路-外环");
map.put("presetTime", "7：00 - 7：40");
map.put("realityStartTime", "7：00");
map.put("realityStopTime", "7：45");
Map<String, String> map2 = new HashMap<>();
map2.put("lineName", "快速公交1");
map2.put("upDown", "下行");
map2.put("runScope", "外环-北环");
map2.put("lineInfo", "外环-人民路-*路-北环");
map2.put("presetTime", "7：10 - 7：50");
map2.put("realityStartTime", "7：11");
map2.put("realityStopTime", "7：50");
Map<String, String> map3 = new HashMap<>();
map3.put("lineName", "快速公交1");
map3.put("upDown", "上行");
map3.put("runScope", "北环-外环");
map3.put("lineInfo", "北环-*路-人民路-外环");
map3.put("presetTime", "7：30 - 8：10");
map3.put("realityStartTime", "7：30");
map3.put("realityStopTime", "8：12");
Map<String, String> map4 = new HashMap<>();
map4.put("lineName", "快速公交1");
map4.put("upDown", "下行");
map4.put("runScope", "外环-北环");
map4.put("lineInfo", "外环-人民路-*路-北环");
map4.put("presetTime", "7：40 - 8：20");
map4.put("realityStartTime", "7：41");
map4.put("realityStopTime", "8：21");
Map<String, String> map5 = new HashMap<>();
map5.put("lineName", "快速公交2");
map5.put("upDown", "上行");
map5.put("runScope", "北环-外环");
map5.put("lineInfo", "北环-*路-人民路-外环");
map5.put("presetTime", "7：00 - 7：40");
map5.put("realityStartTime", "7：00");
map5.put("realityStopTime", "7：45");
Map<String, String> map6 = new HashMap<>();
map6.put("lineName", "快速公交2");
map6.put("upDown", "下行");
map6.put("runScope", "外环-北环");
map6.put("lineInfo", "外环-人民路-*路-北环");
map6.put("presetTime", "7：10 - 7：50");
map6.put("realityStartTime", "7：11");
map6.put("realityStopTime", "7：50");
Map<String, String> map7 = new HashMap<>();
map7.put("lineName", "快速公交2");
map7.put("upDown", "上行");
map7.put("runScope", "北环-外环");
map7.put("lineInfo", "北环-*路-人民路-外环");
map7.put("presetTime", "7：30 - 8：10");
map7.put("realityStartTime", "7：30");
map7.put("realityStopTime", "8：12");
Map<String, String> map8 = new HashMap<>();
map8.put("lineName", "快速公交2");
map8.put("upDown", "下行");
map8.put("runScope", "外环-北环");
map8.put("lineInfo", "外环-人民路-*路-北环");
map8.put("presetTime", "7：40 - 8：20");
map8.put("realityStartTime", "7：41");
map8.put("realityStopTime", "8：21");
if (id.equals("1")) {
list.add(map);
list.add(map2);
list.add(map3);
list.add(map4);
} else {
list.add(map5);
list.add(map6);
list.add(map7);
list.add(map8);
}
return list;
}
// 公交运行信息下拉列表
public List<Map<String, String>> busRunInfoSelect() {
List<Map<String, String>> list = new ArrayList<>();
Map<String, String> map = new HashMap<>();
map.put("id", "1");
map.put("name", "快速公交1");
Map<String, String> map1 = new HashMap<>();
map1.put("id", "2");
map1.put("name", "快速公交2");
list.add(map);
list.add(map1);
return list;
}