注意:用到StringWriter的原因就是它可以从buffer里面保存原始的字符比如:/t/n什么的。 资源文件的配置方法:首先给你的工程添加一个资源文件,名字和你的控件一样,然后在该文件中添加一下小节
<data name="ScrollTable">
<value><![CDATA[
<script language = 'javascript'>
var container = new Array();
var onResizeHandler;
if (! document.body.currentStyle) document.body.currentStyle = document.body.style;
if (document.body.currentStyle.overflowY == 'visible' || document.body.currentStyle.overflowY == 'scroll'){
w = document.body.offsetWidth - document.body.clientLeft - document.body.clientWidth;
}else{
win = window.open("about:blank", "_blank", "top=0,left=0,width=100,height=100,scrollbars=yes");
win.document.writeln('scrollbar');
w = win.document.body.offsetWidth - win.document.body.clientLeft - win.document.body.clientWidth;
win.close();
}
return w;
}
function getActualWidth(e){
if (! e.currentStyle) e.currentStyle = e.style;
return e.clientWidth - parseInt(e.currentStyle.paddingLeft) - parseInt(e.currentStyle.paddingRight);
}
function findRowWidth(r){
for (var i=0; i < r.length; i++){
r[i].actualWidth = getActualWidth(r[i]);
}
}
function setRowWidth(r){
for (var i=0; i < r.length; i++){
r[i].width = r[i].actualWidth;
r[i].innerHTML = '<span style="width:' + r[i].actualWidth + ';">' + r[i].innerHTML + '</span>';
}
}
function fixTableWidth(tbl){
for (var i=0; i < tbl.tHead.rows.length; i++) findRowWidth(tbl.tHead.rows[i].cells);
findRowWidth(tbl.tBodies[0].rows[0].cells);
if (tbl.tFoot) for (var i=0; i < tbl.tFoot.rows.length; i++) findRowWidth(tbl.tFoot.rows[i].cells);
//tbl.width = '';
for (var i=0; i < tbl.tHead.rows.length; i++) setRowWidth(tbl.tHead.rows[i].cells);
setRowWidth(tbl.tBodies[0].rows[0].cells);
if (tbl.tFoot) for (var i=0; i < tbl.tFoot.rows.length; i++) setRowWidth(tbl.tFoot.rows[i].cells);
}
function makeScrollableTable(tbl,scrollFooter,height){
var c, pNode, hdr, ftr, wrapper, rect;
if (typeof tbl == 'string') tbl = document.getElementById(tbl);
pNode = tbl.parentNode;
fixTableWidth(tbl);
c = container.length;
container[c] = document.createElement('<SPAN style="height: 100; overflow: auto;">');
container[c].id = tbl.id + "Container";
pNode.insertBefore(container[c], tbl);
container[c].appendChild(tbl);
container[c].style.width = tbl.clientWidth + 2 * tbl.clientLeft + scrollbarWidth();
hdr = tbl.cloneNode(false);
hdr.id += 'Header';
hdr.appendChild(tbl.tHead.cloneNode(true));
tbl.tHead.style.display = 'none';
if (!scrollFooter || !tbl.tFoot){
ftr = document.createElement('<SPAN style="width:1;height:1;clip: rect(0 1 1 0);background-color:transparent;">');
ftr.id = tbl.id + 'Footer';
ftr.style.border = tbl.style.border;
ftr.style.width = getActualWidth(tbl) + 2 * tbl.clientLeft;
ftr.style.borderBottom = ftr.style.borderLeft = ftr.style.borderRight = 'none';
}else{
ftr = tbl.cloneNode(false);
ftr.id += 'Footer';
ftr.appendChild(tbl.tFoot.cloneNode(true));
ftr.style.borderTop = 'none';
tbl.tFoot.style.display = 'none';
}
wrapper = document.createElement('<table border=0 cellspacing=0 cellpadding=0>');
wrapper.id = tbl.id + 'Wrapper';
pNode.insertBefore(wrapper, container[c]);
wrapper.insertRow(0).insertCell(0).appendChild(hdr);
wrapper.insertRow(1).insertCell(0).appendChild(container[c]);
wrapper.insertRow(2).insertCell(0).appendChild(ftr);
wrapper.align = tbl.align;
tbl.align = hdr.align = ftr.align = 'left';
hdr.style.borderBottom = 'none';
tbl.style.borderTop = tbl.style.borderBottom = 'none';
// adjust page size
if (c == 0 && height == 'auto'){
onResizeAdjustTable();
onResizeHandler = window.onresize;
window.onresize = onResizeAdjustTable;
}else{
container[c].style.height = height;
}
}
function onResizeAdjustTable(){
if (onResizeHandler) onResizeHandler();
var rect = container[0].getClientRects()(0);
var h = document.body.clientHeight - (rect.top + (document.body.scrollHeight - rect.bottom));
container[0].style.height = (h > 0) ? h : 1;
}
function printPage(){
var tbs = document.getElementsByTagName('TABLE');
var e;
for (var i=0; i < container.length; i++) container[i].style.overflow = '';
window.print();
for (var i=0; i < container.length; i++) container[i].style.overflow = 'auto';
}
</script>
]]></value>
</data>
好了,这样就可以完成了。使用该方法可以实现客户端的排序和托拽功能,只要你找到相应的js代码(或者自己写)然后使用此法分析你的客户端代码,最后将你的DataGrid的输出定位成你想要的结果,一切就OK了!由于时间关系该控件分页和滚动不能同时,希望有兴趣的网友可以实现之。我在写此文章的目的旨在抛砖引玉的作用,希望对大家的编程技术有所提高和帮助。谢谢阅读!有什么问题或者好的建议请与我联系。