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

时间:2021-06-10 19:09:40

自定义开发页面如果用到了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");
}
});
});