bootstrap Table 的使用

<%@page import="java.util.Enumeration"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="expires" content="0">
<title>Preset Remove</title>
<link href="${pageContext.request.contextPath}/static/css/jumbotron-narrow.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/static/jquery/jquery.min.js"></script> 
<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap-table/bootstrap-table.min.js"></script>
<link href="${pageContext.request.contextPath}/static/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/static/jquery/ie-emulation-modes-warning.js"></script>
<script src="${pageContext.request.contextPath}/static/jquery/ie10-viewport-bug-workaround.js"></script>
 <script src="${pageContext.request.contextPath}/static/layer/layer.js"></script>
 <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/themes/default/easyui.css" type="text/css" >
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/themes/icon.css" type="text/css">

</head>
<body>
<div class="container">
	<div class="row marketing">
		<h2 class="sub-header">Preset列表</h2>
		<div class="table-responsive">
			<table id="presetTable">
			</table>
		</div>
	</div>	
</div>
<script type="text/javascript">	
$(function() {
	$('#presetTable')
			.bootstrapTable(
					{
						method : 'get',
						url : '${pageContext.request.contextPath}/preset/getList',
						cache : false,
						height : 500,
						striped : true,
						pagination : true,
						pageSize : 10,
						pageList : [ 10, 30, 50, 100, 200 ],
						formatNoMatches : function() {
							return 'N/A';
						},
						formatLoadingMessage : function() {
							return '加载中, 请稍后...';
						},
						formatRecordsPerPage : function(pageNumber) {
							return sprintf('每页显示 %s 记录', pageNumber);
						},
						formatShowingRows : function(pageFrom, pageTo,
								totalRows) {
							return sprintf('显示 %s 到 %s ,总共 %s 条', pageFrom,
									pageTo, totalRows);
						},
						onLoadSuccess : function(data) {
						},
						
						columns : [ {
							field : 'item',
							title : '#',
							align : 'center',
							valign : 'middle'
						}, {
							field : 'cameraid',
							title : 'CameraId',
							align : 'center',
							valign : 'middle'
						}, {
							field : 'name',
							title : 'Name',
							align : 'center',
							valign : 'middle'
						},  {
							field : 'presetid',
							title : 'PresetId',
							align : 'center',
							valign : 'middle'
						}, {
				              title: "操作",
				              align: 'center',
				              valign: 'middle',
				              formatter: function (value, row, index) {
				            	  var button = '<button class="btn btn-danger btn-sm" onclick="setRemove(' + row.presetid + ')">删除</button>';
				            	  return button;
				              }
				          } ]
					});
	setInterval("refreshList()", 5000);//5秒钟一次  
});

function setRemove(presetid) {
	layer.confirm('确认删除？', {
		  btn: ['确定','取消']
		}, function(index){
			$.ajax({
				type : "GET",
				url : "${pageContext.request.contextPath}/preset/setRemove",
				dataType : 'json',
				data : {"presetId":presetid},
				cache : false,//清除缓存
				success : function(data) {
					if(data == "OK"){
						refreshList();
					}else{
						layer.msg("删除错误"+data, {icon: 2}); 
					}
				}
			});
			layer.close(index);
		}, function(){
		});
}

function refreshList() {
	$('#presetTable')
	.bootstrapTable(
			'refresh',
			{
				url : '${pageContext.request.contextPath}/preset/getList',
				silent : true
	});
}
</script>
</body>
</html>
bootstrap Table 的使用

猜你喜欢
