您的位置:首页 > Web前端 > CSS

SharePoint 2010 GridView/SPGridView完全应用系统样式

2014-04-28 11:10 344 查看
自定义开发页面如果用到了GridView或SPGridView默认跟列表的样式是不一样的,如要要一样,需要:

1)aspx

<asp:GridView DataKeyNames="ID" runat="server" ID="gvList" AutoGenerateColumns="false"
Width="100%" CssClass="ms-listviewtable" BorderWidth="0" CellPadding="0" CellSpacing="-1"
BorderStyle="None" GridLines="None" OnRowCommand="gvList_RowCommand" OnRowCreated="gvList_RowCreated">
<HeaderStyle CssClass="ms-viewheadertr ms-vhltr" />
<RowStyle CssClass="ms-itmhover" />
<AlternatingRowStyle CssClass="ms-alternating ms-itmhover" />
<Columns>
<asp:BoundField HeaderText="打印机名称" DataField="Name" HeaderStyle-CssClass="ms-vh2"
ItemStyle-CssClass="ms-vb2" />
<asp:BoundField HeaderText="备注" DataField="Description" HeaderStyle-CssClass="ms-vh2"
ItemStyle-CssClass="ms-vb2" />
<asp:BoundField HeaderText="打印机路径" DataField="Path" HeaderStyle-CssClass="ms-vh2"
ItemStyle-CssClass="ms-vb2" />
<asp:BoundField HeaderText="打印机优先级" DataField="Priority" HeaderStyle-CssClass="ms-vh2"
ItemStyle-CssClass="ms-vb2" />
<asp:BoundField HeaderText="打印机纸张" DataField="SupportedPageSizes" HeaderStyle-CssClass="ms-vh2"
ItemStyle-CssClass="ms-vb2" />
<asp:TemplateField HeaderText="打印机状态" HeaderStyle-CssClass="ms-vh2"
ItemStyle-CssClass="ms-vb2">
<ItemTemplate>
<%#BindPrinterStatus(Container.DataItem)%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="打印机管理" HeaderStyle-CssClass="ms-vh2"
ItemStyle-CssClass="ms-vb2">
<ItemTemplate>
<asp:LinkButton runat="server" ID="btnEdit" Text="编辑" CommandName="edit" CommandArgument='<%#Bind("ID")%>' />
<asp:LinkButton runat="server" ID="btnStop" Text="禁用" CommandName="stop" CommandArgument='<%#Bind("ID")%>' />
<asp:LinkButton runat="server" ID="btnStart" Text="启用" CommandName="start" CommandArgument='<%#Bind("ID")%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<table width="100%" border="0">
<tbody>
<tr>
<td class="ms-vb" colspan="99">
无查询结果
</td>
</tr>
</tbody>
</table>
</EmptyDataTemplate>
</asp:GridView>


  2) css

<style>
.ms-listviewtable
{
border-spacing: 0px;
}
</style>


  3) js-实现选择效果

var preFocusedRow = null;
$(function () {
$(".ms-itmhover").click(function () {
if (preFocusedRow != null && preFocusedRow != this) {
$(preFocusedRow).removeClass("s4-itm-selected");
}
preFocusedRow = this;
var trObj = $(this);
if (trObj.hasClass("s4-itm-selected")) {
trObj.removeClass("s4-itm-selected");
} else {
trObj.addClass("s4-itm-selected");
}
});
});


  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: