界面模式及使用
上图中应用了dnnGridy的基础样式。使用DNN中default.css提供的CSS样式你就可以得到一个既简单又整洁的Grid.( A cup of team *_*)
HTML
<div class="dnnForm dnnSecurityRoles">
<asp:datagrid id="grdRoles" Width="98%" AutoGenerateColumns="false" EnableViewState="false" runat="server" BorderStyle="None" GridLines="None" CssClass="dnnGrid">
<headerstyle cssclass="dnnGridHeader" verticalalign="Top"/>
<itemstyle cssclass="dnnGridItem" horizontalalign="Left" />
<alternatingitemstyle cssclass="dnnGridAltItem" />
<edititemstyle cssclass="dnnFormInput" />
<selecteditemstyle cssclass="dnnFormError" />
<footerstyle cssclass="dnnGridFooter" />
<pagerstyle cssclass="dnnGridPager" />
<columns>
<asp:templatecolumn>
<itemtemplate>
<a href="#"><img src="http://uxguide.dnngallery.com/icons/sigma/Edit_16X16_Standard.png" alt="Edit"/></a>
</itemtemplate>
</asp:templatecolumn>
<asp:templatecolumn>
<itemtemplate>
<a href="#"><img src="http://uxguide.dnngallery.com/icons/sigma/Users_16X16_Standard.png" alt="Edit"/></a>
</itemtemplate>
</asp:templatecolumn>
<asp:boundcolumn DataField="RoleName" HeaderText="Name">
</asp:boundcolumn>
<asp:boundcolumn DataField="Description" HeaderText="Description">
</asp:boundcolumn>
<asp:templatecolumn HeaderText="Auto">
<itemtemplate>
<dnn:Dnnimage Runat="server" ID="Image1" IconKey="Checked" Visible='<%# DataBinder.Eval(Container.DataItem,"AutoAssignment") %>' />
<dnn:Dnnimage Runat="server" ID="Image2" IconKey="Unchecked" Visible='<%# !(bool)DataBinder.Eval(Container.DataItem,"AutoAssignment") %>' />
</ItemTemplate>
</asp:templatecolumn>
</columns>
</asp:datagrid>
</div>
CSS
.dnnGrid { font-size: inherit }
.dnnGridHeader {
border-bottom: 1px #ddd solid;
font-weight: bold;
font-size: 110%;
}
.dnnGridItem {
border-bottom: 1px #eee solid;
background: #fff;
}
.dnnGridAltItem { background: #f1f1f1 }
.dnnGrid td { padding: 3px 5px }
.dnnGrid td input.dnnFormInput { width: 42% }
.dnnPermissionsGrid .dnnFormItem label { width: 12% }