CSS--挺好的GridView样式

样式:

.datable
{
	background-color:#9FD6FF;
	color:#333333;
	font-size:13px;
	margin:1px;
}

.datable tr
{
	height:20px;
}

.datable .lup
{
	background-color:#C8E1FB;
	font-size: 13px;
	color:#014F8A;
}

.datable .lup th
{
	border-top:solid 1px #FFFFFF;
	border-left:solid 1px #FFFFFF;
	font-weight:normal;
}

.datable .lupbai
{
	background-color:#FFFFFF;
}

.datable .trnei
{
	background-color:#F2F9FF;
}

.datable td
{
	border-top:solid 1px #FFFFFF;
	border-top:solid 1px #FFFFFF;
}
 
前台代码:
<WebControls:GridViewExter ID="GvUsers" runat="server" AutoGenerateColumns="False" 
        DataSourceID="OdsUsers" DataKeyNames="userid"   CssClass="datable" border="0" CellPadding="2" CellSpacing="1" 
        onrowupdating="GvUsers_RowUpdating" onrowediting="GvUsers_RowEditing">
        <Columns>            
            <asp:TemplateField HeaderText="真实姓名" SortExpression="realname">
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("realname") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("realname") %>' ></asp:TextBox>
                </EditItemTemplate>
                <ItemStyle HorizontalAlign="Center" Width="80px" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="登录名称" SortExpression="username">
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("username") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("username") %>'></asp:Label>
                </EditItemTemplate>
                <ItemStyle HorizontalAlign="Center" Width="80px" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="角色名称" SortExpression="rolename">
                <ItemTemplate>
                    <asp:Label ID="Label3" runat="server" Text='<%# Bind("rolename") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:DropDownList runat="server" ID="roledll" DataSourceID="odsRoles" DataTextField='rolename'
                        DataValueField='roleid' SelectedValue=<%# Bind("roleid") %> >
                    </asp:DropDownList>
                </EditItemTemplate>
                <ItemStyle HorizontalAlign="Center" Width="80px" />
            </asp:TemplateField>            
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="SelectBtn" runat="server" CausesValidation="False" 
                        CommandName="Select" Text="选择"></asp:LinkButton>
                </ItemTemplate>
                <ItemStyle Width="80px" HorizontalAlign="Center" />
            </asp:TemplateField>
            <asp:TemplateField ShowHeader="False">
                <ItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" 
                        CommandName="Edit" Text="编辑"></asp:LinkButton>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" 
                        CommandName="Update" Text="更新"></asp:LinkButton>
                    &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" 
                        CommandName="Cancel" Text="取消"></asp:LinkButton>
                </EditItemTemplate>
                <ItemStyle Width="100px" HorizontalAlign="Center" />
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <WebControls:ConfirmButton ID="btn_reset" runat="server" CausesValidation="false" 
                        CommandArgument='<%# Bind("userid") %>' Text="重置密码" 
                        ConfirmText="确认重置该用户的密码?" OnClick="btn_reset_Click">  
                        重置密码
                    </WebControls:ConfirmButton>
                </ItemTemplate>
                <ItemStyle Width="100px" HorizontalAlign="Center" />
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <WebControls:ConfirmButton ID="btn_delete" runat="server" CausesValidation="false" 
                        Text="删除" ConfirmText="确定删除该用户?" CommandName="Delete">  
                        删除
                    </WebControls:ConfirmButton>
                </ItemTemplate>
                <ItemStyle Width="80px" HorizontalAlign="Center" />
            </asp:TemplateField>
        </Columns>
        <RowStyle CssClass="lupbai" /> 
        <HeaderStyle CssClass="lup" /> 
        <AlternatingRowStyle CssClass="trnei" />
    </WebControls:GridViewExter>
效果:
CSS--挺好的GridView样式_第1张图片 
 

你可能感兴趣的:(GridView)