DNN交互设计-网格视图dnnGrid（十一）

最新推荐文章于 2024-08-10 23:45:03 发布

missautumn

最新推荐文章于 2024-08-10 23:45:03 发布

阅读量1.2k

点赞数

分类专栏：经历 DNN开发 ASP.NET/jQuery 文章标签： dnn ux dnnGrid gridview datagrid

经历同时被 3 个专栏收录

63 篇文章 0 订阅

订阅专栏

DNN开发

44 篇文章 0 订阅

订阅专栏

ASP.NET/jQuery

44 篇文章 0 订阅

订阅专栏

界面模式及使用

上图中应用了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% }