93 lines
3.5 KiB
HTML
93 lines
3.5 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||
|
|
<title>Fixed Grid Custom</title>
|
||
|
|
<link rel="stylesheet" href="../../../builds/merged/grid.simple.min.css"/>
|
||
|
|
<style type="text/css">
|
||
|
|
#searchTable_fixedDiv {
|
||
|
|
padding: 0;
|
||
|
|
border-width: 0;
|
||
|
|
width: 98%;
|
||
|
|
overflow-y: auto;
|
||
|
|
margin-bottom: -1px;
|
||
|
|
}
|
||
|
|
#searchTable {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
#searchTable_pt_outTab {
|
||
|
|
border-top-width: 1px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript" src="../../../plugins/jquery-1.4.4.min.js"></script>
|
||
|
|
<script type="text/javascript" src="../../../builds/js/lang/grid.zh-CN.min.js"></script>
|
||
|
|
<script type="text/javascript" src="../../../builds/merged/grid.simple.min.js"></script>
|
||
|
|
</head>
|
||
|
|
<body style="background-color: #fff;">
|
||
|
|
<table id="searchTable">
|
||
|
|
<tr>
|
||
|
|
<th w_index="XH" w_sort="XH,asc" width="5%;">XH</th>
|
||
|
|
<th w_index="ID" w_sort="ID" width="5%;">ID</th>
|
||
|
|
<th w_index="CHAR" w_align="left" width="15%;">CHAR</th>
|
||
|
|
<th w_index="TEXT" w_align="left" width="30%;">TEXT</th>
|
||
|
|
<th w_index="DATE" width="15%;">DATE</th>
|
||
|
|
<th w_index="TIME" width="15%;">TIME</th>
|
||
|
|
<th w_index="NUM" width="5%;">NUM</th>
|
||
|
|
<th w_render="operate" width="10%;">Operate</th>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var gridObj;
|
||
|
|
var fixedGridHeight = 200;
|
||
|
|
var fixedGridLock = false;
|
||
|
|
$(function () {
|
||
|
|
$.fn.bsgrid.defaults.extend.afterRenderGridMethods['fixedHeader'] = fixedHeader;
|
||
|
|
|
||
|
|
gridObj = $.fn.bsgrid.init('searchTable', {
|
||
|
|
url: '../data/json.jsp',
|
||
|
|
// autoLoad: false,
|
||
|
|
pageSizeSelect: true,
|
||
|
|
pageSize: 10
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#searchTable').wrap('<div id="searchTable_fixedDiv"></div>');
|
||
|
|
$('#searchTable_fixedDiv').height(fixedGridHeight);
|
||
|
|
fixedHeader('first');
|
||
|
|
$(window).resize(function () {
|
||
|
|
fixedHeader();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function fixedHeader(iFirst) {
|
||
|
|
if (fixedGridLock) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
fixedGridLock = true;
|
||
|
|
if ($.trim(iFirst) != 'first') {
|
||
|
|
$('#searchTable thead tr:eq(0)').remove();
|
||
|
|
}
|
||
|
|
if (fixedGridHeight < $('#searchTable').height()) {
|
||
|
|
$('#searchTable_fixedDiv').height(fixedGridHeight);
|
||
|
|
$('#searchTable').width($('#searchTable_fixedDiv').width() - 18);
|
||
|
|
} else {
|
||
|
|
$('#searchTable_fixedDiv').height($('#searchTable').height());
|
||
|
|
$('#searchTable').width($('#searchTable_fixedDiv').width() - 1);
|
||
|
|
}
|
||
|
|
$('#searchTable thead tr:eq(0)').clone(true).prependTo('#searchTable thead');
|
||
|
|
$('#searchTable thead tr:eq(0)').css({'z-index': 10, position: 'fixed'}).width($('#searchTable thead tr:last').width());
|
||
|
|
|
||
|
|
var thObjs = $('#searchTable thead tr:eq(1) th');
|
||
|
|
thObjs.each(function (i) {
|
||
|
|
var thObj = $(this);
|
||
|
|
$('#searchTable thead tr:eq(0) th:eq(' + i + ')').height(thObj.height() + 1).width(thObj.width() + 1);
|
||
|
|
});
|
||
|
|
fixedGridLock = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
function operate(record, rowIndex, colIndex, options) {
|
||
|
|
return '<a href="#" onclick="alert(\'ID=' + gridObj.getRecordIndexValue(record, 'ID') + '\');">Operate</a>';
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|