如何控制列表视图栏位的宽度？

最新推荐文章于 2025-09-04 17:39:42 发布

转载最新推荐文章于 2025-09-04 17:39:42 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chendianhong/archive/2009/07/27/1532151.html

文章标签：

#javascript #ViewUI

本文介绍了一种通过JavaScript动态调整论坛列表栏位宽度的方法，解决了讨论板列表无法通过常规视图设置进行自定义的问题。

在最近的一个应用中，帮客户修改一个论坛的板面，全部是用讨论板列表设计的，一般的列表是可以通过designer的视图设置栏位的宽度，就可以设定列表的板面的了，但偏偏讨论板不能这样子处理。因为插入自定议视图时，有部分栏会出现一些问题，比如“答复数”栏，“主题”等等。既然自定义数据视图处理不了，那没办法了，只能从修改html页面数据入手，当页面载入所有数据的时候，通过JS的方式，动态去修改所有列表的栏位的宽度，记注，当在设置列表的栏位的宽度时，还必须修改所有宽位的宽度，将所有栏位的宽度固定，这样就不会出现由于某一栏位数据量过大，而导致板面不整齐的现在。下面是一段修改列表栏位宽度的JS示例代码，这代码最好是放在masterpage里面最好，如果是直接放在aspx页面上去修改，效果也能达到，但下次修改时，讨论板列表的视图数据就会出现错误。

Code
    <script type="text/javascript" language="javascript">
        var tagName="A";
         var tags = document.getElementsByTagName(tagName);
　         for (var i=0; i < tags.length; i++) {
　　　　if (tags[i].title == "排序依据主题")
        {
             var obj=tags[i];
              var objparent=obj.parentElement;
             objparent.width="550px";


        }
        if(tags[i].title == "排序依据创建者")
        {
            var obj=tags[i];
              var objparent=obj.parentElement;
              objparent.style.width="100px";

        }
        if(tags[i].title == "排序依据上次更新时间")
        {
            var obj=tags[i];
              var objparent=obj.parentElement;
              objparent.style.width="150px";

        }
　 }

     tagName="TH";
    var tags = document.getElementsByTagName(tagName);
　     for (var i=0; i < tags.length; i++) {
    if(tags[i].innerHTML.indexOf("答复")>-1)
    {
        tags[i].width="100px";

    }

}
    </script>

效果如下图所示：