Sharepoint 开发心得No.2: 列表(文档库)列宽设置

yundian

需求简述:
在用文档库视图呈现内容数据时，难免有那么一列类似于"详细信息""描述"等长字段内容的，又苦于自动控制样式做的不是那么满意，那设置文档库或列表库某一列的列宽就显得比较重要了...

...............
实现套路:

先看一下未进行任何设置的当前库列表: 名为"con"的列按照内容的宽度自动调整列宽度("con"列是新建的Multiple Line Textbox)，但在浏览者眼里始终有些不太舒服.下面就来一步步改变它的外观样式
首先看一下当前页面的源代码(最好用网页代码编辑工具，不推荐直接将本页面用Sharepoint Designer编辑,因为打开的是AllItems.aspx文件，而这里我们主要分析的是Response到客户端的HTML代码, 进而修改它的样式表)


可以看到"con"对应的客户端代码标记为:

<TH class="ms-vh2-nograd" scope="col" noWrap=True>
现在用Sharepoint Designer打开该列表库,将定位到AllItem.aspx页面找到如下代码区:


<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
    <WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main"><ZoneTemplate>
修改为

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<style type="text/css">   
     .ms-vh2-nograd{   
     width:300px;   
     }   
</style>
    <WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main"><ZoneTemplate>
保存AllItem.aspx并Publish, 查看效果:


是不是明显改观了? :)

分析:
其实本demo并非完美解决方案，因为现在控制的是样式表中的 ms-vh2-nograd 这个类, 如果我在这个List中再新建一个Multiple Line Textbox类型的字段，那么很显然这个列也会遵从ms-vh2-nograd 这个类的样式定义......