• 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>
    

      

  • 相关阅读:
    从yield关键字看IEnumerable和Collection的区别
    Windows Azure Developer Guidance Map(含PDF下载)
    关于CLR内存管理一些深层次的讨论[上篇]
    关于CLR内存管理一些深层次的讨论[下篇]
    当你的博客文章的作者变成“编辑整理”,你作何感想?
    我看周马,以及3Q大战背后的社会问题
    一个完整的用于追踪数据改变的解决方案
    与VS集成的若干种代码生成解决方案[博文汇总(共8篇)]
    如果在BackgroundWorker运行过程中关闭窗体…
    采用一个自创的"验证框架"实现对数据实体的验证[扩展篇]
  • 原文地址:https://www.cnblogs.com/RealWorld/p/9209767.html
Copyright © 2020-2023  润新知