今早在CSDN论坛上看到一个帖子,是关于如何修改ASP.NET页导航的样式的问题。描述如下——
-----------------------------------------------------------------
DataGrid的页导航有“上一页/下一页”和“页码”两种模式,当选择“页码”模式时,如果页数超过10页了,就会显示成:
1 2 3 4 5 6 7 8 9 10 ...
我想请教的是:有没有比较好的办法,将后面的...换成中文,例如“更多”
-----------------------------------------------------------------
这个问题初看起来确实有点困难,因为分页数字的“...”已经被封装在DataGrid里了,而且DataGrid也没有提供相应的属性来修改。于是很多朋友就想继承自DataGrid自己写一个“个性化”的DataGrid,或用一些第三方控件来实现,这样做固然可行,但却大大的增加了开发成本,不到万不得已,这些方法我觉得还是不用的为妙。
从另一个角度看,DataGrid到了前台就是一个普通的<Table>元素(HTML对象),利用DHTML+JavaScript的强大功能,可以在客户端动态的更改页面上的任何元素,改几个字眼自然不在话下……
示例:
后台代码——
(在页面上添加一个新的DataGrid,并设置其分页为每页8条数据,页导航用“数字”,并在后台page_load事件中添加如下代码)
private void Page_Load(object sender, System.EventArgs e)
{
DataTable table = new DataTable();
table.Columns.Add("Test",typeof(string));
for(int i=0;i<100;i++)
table.Rows.Add(new object[]{"测试数据_"+i});
this.DataGrid1.DataSource = table;
this.DataGrid1.DataBind();
}
前台代码——
(将一下代码拷贝到页面<Head></Head>之间)
<script language="javascript">
<!--
window.attachEvent("onload",HandleDataGrid);
function HandleDataGrid()
{
var dataGrid = document.getElementById("DataGrid1");
var pageCell = dataGrid.rows[dataGrid.rows.length -1].cells[0];
pageCell.childNodes[pageCell.childNodes.length - 1].innerText = "更多";
}
// -->
</script>
注:分析了一下DataGrid生成的客户端代码,发现“...”其实是位于<Table>最后一行的内的最后一个<a>标记,所以可以用pageCell.childNodes[pageCell.childNodes.length - 1]获取对该标记的引用
-------------------------------------------------------
题外话:
其实很多复杂或难以实现的东西,如果我们从另一个角度去分析,很多时候可以得到简单的处理方法