GeneralGrid.htc
<public:attach event=oncontentready onevent="init()">
<script language=javascript>
border="1";
cellSpacing="0";
cellPadding="3";
width="100%";
borderColor="GainsBoro";
style.backgroundColor="CaptionText";
style.borderCollapse="collapse";
//每页行数
var iPageSize=10;
//当前页号
var iCurPage=1;
//起始行
var iBeginRow=1;
//总页数
var iMaxPage=0;
var vInfoInput=null;
function init()
{
var vTr=element.insertRow(element.rows.length);
var vTd=vTr.insertCell(0);
vTd.colSpan=element.rows(0).cells.length;
vTd.align="right";
vInfoInput=document.createElement("input");
vInfoInput.type="button";
vInfoInput.disabled="true";
vInfoInput.value="第"+iCurPage+"页"+"共"+parseInt((element.rows.length-3)/iPageSize+1)+"页";
vInfoInput.style.height="18px";
vTd.appendChild(vInfoInput);
vInput=document.createElement("input");
vInput.type="button";
vInput.style.font="normal 9pt Marlett";
vInput.value="33";
vInput.attachEvent("onmousedown",onPageFirst);
vTd.appendChild(vInput);
vInput=document.createElement("input");
vInput.type="button";
vInput.style.font="normal 9pt Marlett";
vInput.value="3";
vInput.attachEvent("onmousedown",onPagePrevious);
vTd.appendChild(vInput);
vInput=document.createElement("input");
vInput.type="button";
vInput.style.font="normal 9pt Marlett";
vInput.value="4";
vInput.attachEvent("onmousedown",onPageNext);
vTd.appendChild(vInput);
vInput=document.createElement("input");
vInput.type="button";
vInput.style.font="normal 9pt Marlett";
vInput.value="44";
vInput.attachEvent("onmousedown",onPageLast);
vTd.appendChild(vInput);
iBeginRow=getDefaultBeginRow();
iMaxPage=parseInt((element.rows.length-3)/iPageSize+1);
//设置单元格样式
for(iRow=iBeginRow;iRow<element.rows.length-1;iRow++)
{
if(iRow>(iBeginRow+iPageSize*iCurPage-1)||iRow<(iBeginRow+iPageSize*(iCurPage-1)))
{
element.rows(iRow).style.display="none";
}
}
}
//首页
function onPageFirst()
{
iCurPage=1;
for(iRow=iBeginRow;iRow<element.rows.length-1;iRow++)
{
if(iRow>(iBeginRow+iPageSize*iCurPage-1)||iRow<(iBeginRow+iPageSize*(iCurPage-1)))
{
element.rows(iRow).style.display="none";
}
else
{
element.rows(iRow).style.display="";
}
}
vInfoInput.value="第"+iCurPage+"页"+"共"+iMaxPage+"页";
}
//下一页
function onPageNext()
{
if(iCurPage!=iMaxPage)
{
iCurPage++;
}
for(iRow=iBeginRow;iRow<element.rows.length-1;iRow++)
{
if(iRow>(iBeginRow+iPageSize*iCurPage-1)||iRow<(iBeginRow+iPageSize*(iCurPage-1)))
{
element.rows(iRow).style.display="none";
}
else
{
element.rows(iRow).style.display="";
}
}
vInfoInput.value="第"+iCurPage+"页"+"共"+iMaxPage+"页";
}
//上一页
function onPagePrevious()
{
if(iCurPage!=1)
{
iCurPage--;
}
for(iRow=iBeginRow;iRow<element.rows.length-1;iRow++)
{
if(iRow>(iBeginRow+iPageSize*iCurPage-1)||iRow<(iBeginRow+iPageSize*(iCurPage-1)))
{
element.rows(iRow).style.display="none";
}
else
{
element.rows(iRow).style.display="";
}
}
vInfoInput.value="第"+iCurPage+"页"+"共"+iMaxPage+"页";
}
//尾页
function onPageLast()
{
iCurPage=iMaxPage;
for(iRow=iBeginRow;iRow<element.rows.length-1;iRow++)
{
if(iRow>(iBeginRow+iPageSize*iCurPage-1)||iRow<(iBeginRow+iPageSize*(iCurPage-1)))
{
element.rows(iRow).style.display="none";
}
else
{
element.rows(iRow).style.display="";
}
}
vInfoInput.value="第"+iCurPage+"页"+"共"+iMaxPage+"页";
}
//得到默认起始行
function getDefaultBeginRow()
{
for(kIndex=0;kIndex<element.rows.length;kIndex++)
{
if(element.rows(kIndex).cells(0).tagName=="TD")
{
return kIndex;
}
}
}
</script>
应用示例
Grid.htm
<style>
/*定义通用数据表格样式Begin*/
.GeneralGrid
{
behavior:url('GeneralGrid.htc');
}
.GeneralGrid TH
{
font:bold 9pt 宋体;
text-align:center;
background-color:WhiteSmoke;
}
.GeneralGrid TD
{
font:normal 9pt 宋体;
background-color:CaptionText;
}
/*定义通用数据表格样式End*/
</style>
<table class="GeneralGrid">
<tr><th>字段1</th><th>字段2</th><th>字段3</th><th>字段4</th></tr>
<tr><td>值1_1</td><td>值1_2</td><td>值1_3</td><td>值1_4</td></tr>
<tr><td>值2_1</td><td>值2_2</td><td>值2_3</td><td>值2_4</td></tr>
<tr><td>值3_1</td><td>值3_2</td><td>值3_3</td><td>值3_4</td></tr>
<tr><td>值4_1</td><td>值4_2</td><td>值4_3</td><td>值4_4</td></tr>
<tr><td>值5_1</td><td>值5_2</td><td>值5_3</td><td>值5_4</td></tr>
<tr><td>值6_1</td><td>值6_2</td><td>值6_3</td><td>值6_4</td></tr>
<tr><td>值7_1</td><td>值7_2</td><td>值7_3</td><td>值7_4</td></tr>
<tr><td>值8_1</td><td>值8_2</td><td>值8_3</td><td>值8_4</td></tr>
<tr><td>值9_1</td><td>值9_2</td><td>值9_3</td><td>值9_4</td></tr>
<tr><td>值10_1</td><td>值10_2</td><td>值10_3</td><td>值10_4</td></tr>
<tr><td>值11_1</td><td>值11_2</td><td>值11_3</td><td>值11_4</td></tr>
<tr><td>值12_1</td><td>值12_2</td><td>值12_3</td><td>值12_4</td></tr>
<tr><td>值13_1</td><td>值13_2</td><td>值13_3</td><td>值13_4</td></tr>
<tr><td>值14_1</td><td>值14_2</td><td>值14_3</td><td>值14_4</td></tr>
</table>
看效果吧!
