1 查询样式
1 <div class="col-md-12"> 2 <div class="clearfix"></div> 3 <div style="margin-top: 10px"> 4 5 <form class="form" id="list_form" method="post" action="/game/nvidia/item/list.action"> 6 <div class="form-group col-md-3"> 7 <label class="control-label">商品</label> 8 <input type="text" class="form-control" name="item" placeholder="商品ID或名称" value="${item }"> 9 </div> 10 <div class="form-group col-md-3"> 11 <label class="control-label">分类</label> 12 <select name="type" class="form-control"> 13 <option value="0">全部</option> 14 <c:forEach var="tmp" items="${typeMap}"> 15 <option value="${tmp.id}" 16 <c:if test="${type eq tmp.id}">selected</c:if>>${tmp.name}</option> 17 </c:forEach> 18 </select> 19 </div> 20 <div class="form-group col-md-3" style="margin-top:30px;float:right"> 21 <label class="sr-only" for="search_button">search</label> 22 <input class="btn btn-primary" id="search_button" type="submit" value="查询"> 23 <label class="sr-only" for="add_item">add</label> 24 <input class="btn btn-success" id="add_item" type="button" value="添加"> 25 </div> 26 <div class="form-group col-md-3"> 27 </div> 28 </form> 29 </div>
2 显示 用table
<div style="text-align: center"> <table class="table table-bordered" style="table-layout: fixed;"> <thead> <tr> <th style="text-align: center"> <input type="checkbox" id="choose_all" name="choose_all"> </th> <th style="text-align: center">商品ID</th> <th style="text-align: center" width="20%">商品名称</th> <th style="text-align: center" width="14%">所属游戏</th> <th style="text-align: center">金额</th> <th style="text-align: center">分类</th> <th style="text-align: center">上线</th> <th style="text-align: center">生效</th> <th style="text-align: center">上线时间</th> <th style="text-align: center">操作</th> </tr> </thead> <tbody id="i-datalist" data-query-name="App"> <%@ include file="/WEB-INF/views/gamebox/nvidia/item_page.jsp" %> </tbody> </table> </div>
item_page。jsp:
1 <c:forEach var="item" items="${items}" varStatus="vs"> 2 <tr> 3 <td style="text-align: center"> 4 <input type="checkbox" name="batch_op"> 5 </td> 6 <td style="text-align: center">${item.id }</td> 7 <td style="text-align: center">${item.name}</td> 8 <td style="text-align: center">${item.app_name }(${item.app_id })</td> 9 <td style="text-align: center" class="handle"> 10 <fmt:formatNumber value="${item.price/100 }" pattern="#,##0.0#"/> 11 </td> 12 <td style="text-align: center">${item.type_name}</td> 13 <td style="text-align: center" class="online_status_name">${item.online_status_name}</td> 14 <td style="text-align: center">${item.validate_status_name}</td> 15 <td style="text-align: center"> 16 <fmt:formatDate value="${item.online_time}" pattern="yyyyMMdd" type="date" dateStyle="long"/> 17 </td> 18 <td style="text-align: center"> 19 <button class="btn btn-default online_button" item_id = "${item.id }" online_status = "${item.online_status }"> 20 <c:if test="${item.online_status == 1}">下线</c:if> 21 <c:if test="${item.online_status != 1}">上线</c:if> 22 </button> 23 <button name="edit" class="btn btn-success edit_button" item_id="${item.id }"> 24 编辑 25 </button> 26 <button class="btn btn-danger delete_button" item_id="${item.id }" item_name="${item.name}"> 27 删除 28 </button> 29 </td> 30 31 </tr> 32 33 </c:forEach>
整个code:
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 6 <link rel="stylesheet" href="http://static.qiyi.com/qui/0.0.1/css/qui.css"> 7 <!-- 1)加入QUI的css end--> 8 <link href="http://static.qiyi.com/css/common/app_store_css/app_store.css" rel="stylesheet" type="text/css"/> 9 <link type="text/css" rel="stylesheet" href="http://static.qiyi.com/css/common/sellCenter_css/pikaday.css"/> 10 11 <link type="text/css" rel="stylesheet" href="/css-src/compatible.css"/> 12 13 <!-- 2)加入QUI的主类库 注意一定要放在再sea1.2.js之前 start--> 14 <script charset="utf-8" type="text/javascript" src="http://static.qiyi.com/qui/0.0.1/js/qui.js"></script> 15 <!-- 2)加入QUI的主类库 end--> 16 <script type="text/javascript" src="http://static.iqiyi.com/js/lib/sea1.2.js"></script> 17 18 <%@ include file="/WEB-INF/include/bootstrap.jsp" %> 19 <style rel="stylesheet" type="text/css"> 20 body { 21 font-family: "Microsoft YaHei", Verdana, Geneva, sans-serif; 22 } 23 .selected { 24 color : black; 25 } 26 </style> 27 <title>Nvidia商品管理</title> 28 </head> 29 <body> 30 <%@ include file="/WEB-INF/include/top.jsp" %> 31 <div class=".container-fluid box1000"> 32 <%@ include file="/WEB-INF/include/gamebox-top.jsp" %> 33 <%@ include file="/WEB-INF/include/nvidia-operation-top.jsp" %> 34 35 <div class="row"> 36 <div class="col-md-12"> 37 <div class="clearfix"></div> 38 <div style="margin-top: 10px"> 39 40 <form class="form" id="list_form" method="post" action="/game/nvidia/item/list.action"> 41 <div class="form-group col-md-3"> 42 <label class="control-label">商品</label> 43 <input type="text" class="form-control" name="item" placeholder="商品ID或名称" value="${item }"> 44 </div> 45 <div class="form-group col-md-3"> 46 <label class="control-label">分类</label> 47 <select name="type" class="form-control"> 48 <option value="0">全部</option> 49 <c:forEach var="tmp" items="${typeMap}"> 50 <option value="${tmp.id}" 51 <c:if test="${type eq tmp.id}">selected</c:if>>${tmp.name}</option> 52 </c:forEach> 53 </select> 54 </div> 55 <div class="form-group col-md-3" style="margin-top:30px;float:right"> 56 <label class="sr-only" for="search_button">search</label> 57 <input class="btn btn-primary" id="search_button" type="submit" value="查询"> 58 <label class="sr-only" for="add_item">add</label> 59 <input class="btn btn-success" id="add_item" type="button" value="添加"> 60 </div> 61 <div class="form-group col-md-3"> 62 </div> 63 </form> 64 </div> 65 <div style="text-align: center"> 66 <table class="table table-bordered" style="table-layout: fixed;"> 67 <thead> 68 <tr> 69 70 <th style="text-align: center"> 71 <input type="checkbox" id="choose_all" name="choose_all"> 72 </th> 73 <th style="text-align: center">商品ID</th> 74 <th style="text-align: center" width="20%">商品名称</th> 75 <th style="text-align: center" width="14%">所属游戏</th> 76 <th style="text-align: center">金额</th> 77 <th style="text-align: center">分类</th> 78 <th style="text-align: center">上线</th> 79 <th style="text-align: center">生效</th> 80 <th style="text-align: center">上线时间</th> 81 <th style="text-align: center">操作</th> 82 </tr> 83 </thead> 84 <tbody id="i-datalist" data-query-name="App"> 85 <%@ include file="/WEB-INF/views/gamebox/nvidia/item_page.jsp" %> 86 </tbody> 87 </table> 88 </div> 89 </div> 90 <nav style="text-align: center"> 91 <ul class="pagination" id="pagination"></ul> 92 </nav> 93 </div> 94 95 </div> 96 <%@ include file="/WEB-INF/include/foot.jsp" %> 97 <script> 98 Q.projectName = 'qiyiV2'; 99 Q.verurl = "http://static.iqiyi.com/js/qiyiV2/appstorever.js"; 100 Q.load("appstoreMgr13Index"); 101 102 qui.config({ 103 baseUrl: '/js-src' 104 }); 105 qrequire(["gamebox/nvidia/item_list"], function () { 106 }); 107 qrequire(['gamebox-top'], function () { 108 }); 109 </script> 110 <!-- 分页 --> 111 <script src="/bootstrap/js/bootstrap-paginator.min.js" type="application/javascript"></script> 112 <script type="application/javascript"> 113 var options = { 114 totalPages: ${pageCount}, 115 currentPage: ${pageNum}, 116 bootstrapMajorVersion: 3, 117 itemTexts: function (type, page, current) { 118 switch (type) { 119 case "first": 120 return "First"; 121 case "prev": 122 return "Previous"; 123 case "next": 124 return "Next"; 125 case "last": 126 return "Last"; 127 case "page": 128 return page; 129 } 130 }, 131 onPageClicked: function (e, originalEvent, type, page) { 132 var data = $("#list_form").serialize(); 133 window.location.href = '/game/nvidia/item/list.action?' + data + '&pageNum=' + page; 134 } 135 }; 136 $('#pagination').bootstrapPaginator(options); 137 </script> 138 </body> 139 140 </html>