功能主要有:
1.ajax分页,可设定每页显示数量,保存cookie,不足空行填充,隔行换色,独行点击高亮,突显行号,自定义跳转页。
2.查找,配置要查找的属性,可单属性查找,全属性查找,多个时间区间查找,查找结果显示效果与ajax请求一致
3.排序,全部属性列排序,数字字段排序,本地汉字排序,升降序切换
4.实现上述功能你无需任何JavaScript代码,只需按特定的格式写html代码即可。
?
html代码如下:
?
?
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<link rel="stylesheet" href="/test2/css/my.css" type="text/css" media="screen" />
</head>
<body>
<div class="Big">
<div class="toolBar">
<div style="float:left;font-size:12px;">
<select id="listColumn" name="listColumn" style="float:left;">
<option value="1">显示所有记录</option>
<option value="num">编号</option>
<option value="name">监测方法</option>
<option value="fromTime">发布日期</option>
<option value="valid">有效年限</option>
<option value="issue">发布单位</option>
<option value="" selected="selected">所有列中查找</option>
</select>
<input type="text" id="SearchStr" name="SearchStr">
<input type="text" id="time1" name="time1" class="Wdate" onfocus="WdatePicker({skin:'whyGreen'})" style="display:none;">
<input type="text" id="time2" name="time2" class="Wdate" onfocus="WdatePicker({skin:'whyGreen'})" style="display:none;">
<a href="#" id="SIMsearch"><img src="/test2/images/search.png"/></a>
<a href="#" id="SIMsearch1" style="display:none;"><img src="/test2/images/search.png"/></a>
</div>
<div style="float:right;font-size:12px;">
<a href="#" id="addBut"><img src="/test2/images/add.png"/>新增</a>
<span id="whosPage" style="display:none;">monitorMethod</span>
<span id="openWidth" style="display:none;">450</span>
<span id="openHeight" style="display:none;">300</span>
<span id="hasTimeSearch" style="display:none;">fromTime</span>
</div>
</div>
<div class="containDate">
<table class="dateView" id="tt">
<thead>
<tr style="position:relative; top:expression(this.offsetParent.scrollTop);">
<th width="3%"></th>
<th width="11%" tName="num">编号</th>
<th width="18%" tName="name">监测方法</th>
<th width="15%" tName="fromTime">发布日期</th>
<th width="10%" tName="valid">有效年限</th>
<th width="23%" tName="issue">发布单位</th>
<th width="20%">操作</th>
</tr>
</thead>
<tbody id="tDate">
</tbody>
</table>
</div>
<%@include file="/page.jsp" %>
</div>
</body>
</html>
?
?
只适合不会做界面,而又需要快速开发的学生做毕业设计使用~
?