GridView列宽改变 [英] GridView Column Width Altering

问题描述

有人可以帮我解决问题吗？

我在网页中有一个gridview，其数据源是一个oracle数据库。我想知道当您在网页上是否可以更改列宽？

  string select = SELECT * FROM TABLE
 
 OracleCommand cmd = new OracleCommand（select，connectionstring）; 
 cmd.Connection.Open（）; 
 
 GridView.DataSource = cmd.ExecuteReader（）; 
 GridView.DataBind（）; 
  

这将输出gridview中的表。有没有办法在浏览器中改变gridview属性？可能有一些javascript？

提前谢谢，

解决方案

你可以通过gridview本身的列中的样式来指定这些属性。您可以将AutoGenerateColumns属性设置为false，并指定所需的列，并指定每列中的大小。此外，遵循良好的网页设计实践，您可以使用css为每列设计样式。如果你想在飞行中改变它，我会建议使用ItemTemplates，并添加您可以在该字段中修改的组件。

Ex：

 < asp：GridView runat =serverAutoGenerateColumns =falseID =GridDataSourceID ='MyObjectDataSource'CssClass =grid_table> 
< AlternatingRowStyle CssClass =even/> 
<列> 
< asp：TemplateField> 
< HeaderTemplate> 
< div id =NameColumnrunat =server>名称中心< / div> 
< / HeaderTemplate> 
< ItemTemplate> 
<％＃Eval（LastName）％>，<％＃Eval（FirstName）％> 
< / ItemTemplate> 
< / asp：TemplateField> 
< asp：TemplateField> 
< HeaderTemplate> 
< div id =AgeColumnrunat =server> Age< / div> 
< / HeaderTemplate> 
< ItemTemplate> 
<％＃Eval（Age）％> 
< / ItemTemplate> 
< / asp：TemplateField> 
< EmptyDataTemplate>没有用户< / EmptyDataTemplate> 
< / asp：GridView> 
  

使用此代码，您可以访问列宽：

  NameColumn.Width = 100; 
 AgeColumn.Width = 2; 
  

但是，有很多方法可以完成此操作，包括直接获取列：

  Grid.Columns [0] .HeaderStyle.Width = 100; 
 Grid.Columns [0] .ItemStyle.Width = 100; 
 Grid.Columns [1] .HeaderStyle.Width = 2; 
 Grid.Columns [1] .ItemStyle.Width = 2; 
  

或再次使用css：

  Grid.Columns [0] .HeaderStyle.CssClass =name_column_header; 
 Grid.Columns [0] .ItemStyle.CssClass =name_column_data; 
 Grid.Columns [1] .HeaderStyle.CssClass =age_column_header; 
 Grid.Columns [1] .ItemStyle.Width =age_column_data; 
  

无论如何，世界上你的牡蛎，这些只是一些起点。

Can someone please help me with my problem?

I have a gridview in a webpage, whose datasource is an oracle database. I would like to know if it is possible to change the column widths while you are on the web page?

string select = "SELECT * FROM TABLE"

OracleCommand cmd = new OracleCommand(select, connectionstring);
cmd.Connection.Open();

GridView.DataSource = cmd.ExecuteReader();
GridView.DataBind();

This outputs the table in the gridview. Is there a way to change gridview properties while in the browser? perhaps some javascript?

Thank you in advance,

解决方案

You can specify these attributes through the styles in the columns of the gridview itself. You can set the AutoGenerateColumns attribute to false, and specify the columns you want, and specify the sizes within each column. Furthermore, following good web-design practices, you can use css to style each column. If you would like to change it on the fly, I would suggest using ItemTemplates, and adding components you can modify in the field.

Ex:

<asp:GridView runat="server" AutoGenerateColumns="false" ID="Grid" DataSourceID='MyObjectDataSource' CssClass="grid_table">
                <AlternatingRowStyle CssClass="even" />
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <div id="NameColumn" runat="server">Name Center</div>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <%# Eval("LastName") %>, <%# Eval("FirstName") %>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <div id="AgeColumn" runat="server">Age</div>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <%# Eval("Age") %>
                        </ItemTemplate>
                    </asp:TemplateField>
                <EmptyDataTemplate>There are no Users</EmptyDataTemplate>
            </asp:GridView>

With this code you can access the column widths:

NameColumn.Width = 100;
AgeColumn.Width = 2;

However, there are many ways you can accomplish this, including getting the columns directly:

Grid.Columns[0].HeaderStyle.Width = 100;
Grid.Columns[0].ItemStyle.Width = 100;
Grid.Columns[1].HeaderStyle.Width = 2;
Grid.Columns[1].ItemStyle.Width = 2;

Or again using css:

Grid.Columns[0].HeaderStyle.CssClass = "name_column_header";
Grid.Columns[0].ItemStyle.CssClass = "name_column_data";
Grid.Columns[1].HeaderStyle.CssClass = "age_column_header";
Grid.Columns[1].ItemStyle.Width = "age_column_data";

Anyways, the world's your oyster, these are just some starting points.

这篇关于GridView列宽改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！