📄 如何在datagrid里面产生滚动条.htm
字号:
pMarkup.Insert(pMarkup.IndexOf(">") + ">".Length, "
<THEAD>");<BR> // 将第一个tr闭区间用Thead包起来，现在第一个
<THEAD>已经画出来了需要画<BR> //
它的结尾</THEAD>和</TBODY>,同样找到第一个</TR>来插入</THEAD>和</TDOBY><BR> pMarkup
= pMarkup.Insert( pMarkup.IndexOf("</TR>") + "</TR>".Length,"</THEAD>
<TBODY>");<BR> //
在最后一个</TBODY></TABLE>的前面插入一个</TR></TBODY>就可以了。<BR> pMarkup
= pMarkup.Replace("</TABLE>",
"</TBODY></TABLE>");<BR> return
pMarkup;<BR>}<BR> 在这个方法中我们首先实例化了一个StringWriter的对象writer，又用该对象为参数实例了一个HtmlTextWriter对象buffer，最关键的是我们调用了基类的Render用来将buffer里面填满要输出的东西（一堆脚本就是Table，如果你是用监视器查看里面的内容就可以看到）。好了剩下的工作就是分析这个脚本了，然后我们在该脚本第一个出现<TR>的地方将这个<TR>替换成<THEAD>和<TR>后面的替换方法类似。最后我们将这个被我们替换和修改的Table输出到客户端，一切OK！<BR><BR> 注意：用到StringWriter的原因就是它可以从buffer里面保存原始的字符比如：/t/n什么的。
资源文件的配置方法：首先给你的工程添加一个资源文件，名字和你的控件一样，然后在该文件中添加一下小节<BR><DATA
name="ScrollTable"><BR> <VALUE><![CDATA[<br>
<SCRIPT language=javascript><br>
<br>
var container = new Array();<br>
var onResizeHandler;<br>
<br>
function scrollbarWidth(){<br>
var w;<br>
<br>
if (! document.body.currentStyle) document.body.currentStyle = document.body.style;<br>
<br>
if (document.body.currentStyle.overflowY == 'visible' || document.body.currentStyle.overflowY == 'scroll'){<br>
w = document.body.offsetWidth - document.body.clientLeft - document.body.clientWidth;<br>
}else{<br>
win = window.open("about:blank", "_blank", "top=0,left=0,width=100,height=100,scrollbars=yes");<br>
win.document.writeln('scrollbar');<br>
w = win.document.body.offsetWidth - win.document.body.clientLeft - win.document.body.clientWidth;<br>
win.close();<br>
}<br>
<br>
<br>
<br>
return w;<br>
}<br>
<br>
function getActualWidth(e){<br>
if (! e.currentStyle) e.currentStyle = e.style;<br>
<br>
return e.clientWidth - parseInt(e.currentStyle.paddingLeft) - parseInt(e.currentStyle.paddingRight);<br>
}<br>
<br>
function findRowWidth(r){<br>
for (var i=0; i < r.length; i++){<br>
r[i].actualWidth = getActualWidth(r[i]);<br>
}<br>
}<br>
<br>
function setRowWidth(r){<br>
for (var i=0; i < r.length; i++){<br>
r[i].width = r[i].actualWidth;<br>
r[i].innerHTML = '<span style="width:' + r[i].actualWidth + ';">' + r[i].innerHTML + '</span>';<br>
}<br>
}<br>
<br>
function fixTableWidth(tbl){<br>
for (var i=0; i < tbl.tHead.rows.length; i++) findRowWidth(tbl.tHead.rows[i].cells);<br>
findRowWidth(tbl.tBodies[0].rows[0].cells);<br>
if (tbl.tFoot) for (var i=0; i < tbl.tFoot.rows.length; i++) findRowWidth(tbl.tFoot.rows[i].cells);<br>
<br>
//tbl.width = '';<br>
<br>
for (var i=0; i < tbl.tHead.rows.length; i++) setRowWidth(tbl.tHead.rows[i].cells);<br>
setRowWidth(tbl.tBodies[0].rows[0].cells);<br>
if (tbl.tFoot) for (var i=0; i < tbl.tFoot.rows.length; i++) setRowWidth(tbl.tFoot.rows[i].cells);<br>
}<br>
<br>
function makeScrollableTable(tbl,scrollFooter,height){<br>
var c, pNode, hdr, ftr, wrapper, rect;<br>
<br>
if (typeof tbl == 'string') tbl = document.getElementById(tbl);<br>
<br>
pNode = tbl.parentNode;<br>
fixTableWidth(tbl);<br>
<br>
c = container.length;<br>
container[c] = document.createElement('<SPAN style="height: 100; overflow: auto;">');<br>
container[c].id = tbl.id + "Container";<br>
pNode.insertBefore(container[c], tbl);<br>
container[c].appendChild(tbl);<br>
container[c].style.width = tbl.clientWidth + 2 * tbl.clientLeft + scrollbarWidth();<br>
<br>
<br>
<br>
hdr = tbl.cloneNode(false);<br>
hdr.id += 'Header';<br>
hdr.appendChild(tbl.tHead.cloneNode(true));<br>
tbl.tHead.style.display = 'none';<br>
<br>
if (!scrollFooter || !tbl.tFoot){<br>
ftr = document.createElement('<SPAN style="width:1;height:1;clip: rect(0 1 1 0);background-color:transparent;">');<br>
ftr.id = tbl.id + 'Footer';<br>
ftr.style.border = tbl.style.border;<br>
ftr.style.width = getActualWidth(tbl) + 2 * tbl.clientLeft;<br>
ftr.style.borderBottom = ftr.style.borderLeft = ftr.style.borderRight = 'none';<br>
}else{<br>
ftr = tbl.cloneNode(false);<br>
ftr.id += 'Footer';<br>
ftr.appendChild(tbl.tFoot.cloneNode(true));<br>
ftr.style.borderTop = 'none';<br>
tbl.tFoot.style.display = 'none';<br>
}<br>
<br>
wrapper = document.createElement('<table border=0 cellspacing=0 cellpadding=0>');<br>
wrapper.id = tbl.id + 'Wrapper';<br>
pNode.insertBefore(wrapper, container[c]);<br>
<br>
wrapper.insertRow(0).insertCell(0).appendChild(hdr);<br>
wrapper.insertRow(1).insertCell(0).appendChild(container[c]);<br>
wrapper.insertRow(2).insertCell(0).appendChild(ftr);<br>
<br>
wrapper.align = tbl.align;<br>
tbl.align = hdr.align = ftr.align = 'left';<br>
hdr.style.borderBottom = 'none';<br>
tbl.style.borderTop = tbl.style.borderBottom = 'none';<br>
<br>
<br>
<br>
// adjust page size<br>
if (c == 0 && height == 'auto'){<br>
onResizeAdjustTable();<br>
onResizeHandler = window.onresize;<br>
window.onresize = onResizeAdjustTable;<br>
}else{<br>
container[c].style.height = height;<br>
}<br>
}<br>
<br>
function onResizeAdjustTable(){<br>
if (onResizeHandler) onResizeHandler();<br>
<br>
var rect = container[0].getClientRects()(0);<br>
var h = document.body.clientHeight - (rect.top + (document.body.scrollHeight - rect.bottom));<br>
container[0].style.height = (h > 0) ? h : 1;<br>
}<br>
<br>
function printPage(){<br>
var tbs = document.getElementsByTagName('TABLE');<br>
var e;<br>
<br>
for (var i=0; i < container.length; i++) container[i].style.overflow = '';<br>
<br>
window.print();<br>
<br>
for (var i=0; i < container.length; i++) container[i].style.overflow = 'auto';<br>
}<br>
<br>
</SCRIPT>
<BR> ]]></VALUE><BR></DATA><BR> <BR> 好了，这样就可以完成了。使用该方法可以实现客户端的排序和托拽功能，只要你找到相应的js代码（或者自己写）然后使用此法分析你的客户端代码，最后将你的DataGrid的输出定位成你想要的结果，一切就OK了！由于时间关系该控件分页和滚动不能同时，希望有兴趣的网友可以实现之。我在写此文章的目的旨在抛砖引玉的作用，希望对大家的编程技术有所提高和帮助。谢谢阅读！有什么问题或者好的建议请与我联系。<BR><BR><IMG
height=1 src="如何在DataGrid里面产生滚动条.files/down_info.htm" width=1 border=0></TD>
</TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=559 align=center border=0>
<TBODY>
<TR>
<TD background=如何在DataGrid里面产生滚动条.files/teach_head.gif
height=14></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=559 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=559 border=0>
<TBODY>
<TR>
<TD width=10 background=如何在DataGrid里面产生滚动条.files/teach_left.gif></TD>
<TD height=100>
<TABLE cellSpacing=0 cellPadding=0 width=515 align=center
border=0><TBODY>
<TR>
<TD width=30 background=如何在DataGrid里面产生滚动条.files/xianxian.gif
height=20><IMG height=20
src="如何在DataGrid里面产生滚动条.files/teach_topic.gif" width=30></TD>
<TD background=如何在DataGrid里面产生滚动条.files/xianxian.gif>
<DIV align=left>相关文章<BR></DIV></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=515 align=center
border=0><TBODY>
<TR>
<TD height=4></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=515 align=center
border=0><TBODY>
<TR>
<TD bgColor=#bbbbbb height=2></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=515 align=center
border=0><TBODY>
<TR>
<TD height=25></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=515 align=center
border=0><TBODY>
<TR>
<TD width=30 background=如何在DataGrid里面产生滚动条.files/xianxian.gif
height=20><IMG height=20
src="如何在DataGrid里面产生滚动条.files/teach_topic.gif" width=30></TD>
<TD background=如何在DataGrid里面产生滚动条.files/xianxian.gif>
<DIV align=left>相关软件<BR></DIV></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=515 align=center
border=0><TBODY>
<TR>
<TD height=4></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=515 align=center
border=0><TBODY>
<TR>
<TD bgColor=#bbbbbb height=2></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=515 align=center
border=0><TBODY>
<TR>
<TD height=25></TD></TR></TBODY></TABLE></TD>
<TD width=9
background=如何在DataGrid里面产生滚动条.files/teach_right.gif></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD background=如何在DataGrid里面产生滚动条.files/teach_r4_c2.gif
height=13></TD></TR></TBODY></TABLE></TD></TR></TABLE></CENTER></DIV>
<SCRIPT language=javascript src="如何在DataGrid里面产生滚动条.files/in_copy2.js"></SCRIPT>
</BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -