<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>table行的显示与隐藏测试</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/JS/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://miemiedev.github.com/mmGrid/src/mmGrid.css">
<script type="text/javascript" src="http://miemiedev.github.com/mmGrid/src/mmGrid.js"></script>
<link rel="stylesheet" type="text/css" href="http://miemiedev.github.com/mmGrid/src/mmPaginator.css">
<script type="text/javascript" src="http://miemiedev.github.com/mmGrid/src/mmPaginator.js"></script>
<script type="text/javascript">
var cols = [
{title:‘语文‘, name:‘chinese‘, width: 30, align: ‘center‘},
{title:‘数学‘, name:‘math‘, width: 30, align: ‘center‘},
{title:‘英语‘, name:‘english‘, width: 30, align: ‘center‘},
{title:‘体育‘, name:‘sports‘, width: 30, align: ‘center‘},
{title:‘音乐‘, name:‘music‘, width: 30, align: ‘center‘}
];
var dataArray = [{chinese:"91",math:"91",english:"91",sports:"91",music:"91"},
{chinese:"92",math:"92",english:"92",sports:"92",music:"92"},
{chinese:"93",math:"93",english:"93",sports:"93",music:"93"},
{chinese:"94",math:"94",english:"94",sports:"94",music:"94"}];
var myTable = $(‘#myTable‘).mmGrid({
height: 460,
cols: cols,
items:dataArray,
sortStatus: ‘asc‘, //升序
multiSelect: true, //多选
checkCol: true, //选框列
fullWidthRows: true, //伸展列宽自动充满表格
nowrap :true, //内容不折行
loadingText: ‘正在载入‘,
noDataText: ‘暂无数据‘,
plugins :[$(‘#myPage‘).mmPaginator({//分页插件
style : ‘plain‘,
totalCountName : ‘totalCount‘,
page : 1,
pageParamName : ‘currentPage‘,
limitParamName : ‘pageSize‘,
limitLabel : ‘每页{0}条‘,
totalCountLabel: ‘共<span>{0}</span>条记录‘,
limit : null,
limitList : [10, 20, 30, 40]
})]
});
$("#selectItem").change(function(){
var selectIndex = $(this).val();
var myRows = myTable.rows();
myTable.load(dataArray);
if(selectIndex>=1 && selectIndex<=4){
for(var i=1;i<=myRows.length;i++){
if(i != selectIndex){
$("#myTable tr:eq("+(i-1)+")").hide();
}
}
}else if(selectIndex==5){
for(var i=1;i<=myRows.length;i++){
$("#myTable tr:odd").hide();
}
}else if(selectIndex==6){
for(var i=1;i<=myRows.length;i++){
$("#myTable tr:even").hide();
}
}
});
});
</script>
</head>
<body>
<span>选择要显示的行：</span>
<select id="selectItem">
<option value="0">所有行</option>
<option id="item1" value="1"/>第一行</option>
<option id="item2" value="2"/>第二行</option>
<option id="item3" value="3"/>第三行</option>
<option id="item4" value="4"/>第四行</option>
<option id="oddItem" value="5"/>奇数行</option>
<option id="evenItem" value="6"/>偶数行</option>
</select>
<body>
<table id="myTable"></table>
<div id="myPage" style="text-align: right;"></div>
</body>
</body>
</html>
时间： 2024-08-27 01:31:46