守望轩 » gridview

web developer tips (65): 快速创建一个挂接SQL表的GridView

xjb — Thu, 19 Nov 2009 02:58:17 +0000

原文链接：How to quickly create a GridView that is hooked up to a SQL table?

通常，在一个页面的GridView绑定数据，是添加一个数据源，再通过一个向导挂接到数据源。这里介绍一个更快捷的方法来创建和挂接到数据源的GridView。

http://www.watch-life.net/visual-studio/quickly-create-a-gridview-that-is-hooked-up-to-a-sql-table.html

1、首先，如果没有数据源（datasource），你需要在服务器资源管理器（Server Explorer）添加一个。
2、完成上面一步，展开你想连接的表的节点，并找到想要挂接GridView的表。

3、最后，拖拽选中的表到webform，就这样，立刻会创建一个挂接你选中的表的GridView，就这简单的三步或更少，是不是很快速。

你可能也会喜欢以下文章：

转载请注明作者，出处，以及原始超链接。
评论数：0 | 评论这篇文章|关注作者最近动态,欢迎 follow me xjb@twitter.com|联络作者：iamxjb@gmail.com
© 2010 守望轩 www.watch-life.net

web developer tips (64): 在GridView中转换BoundField为TemplateField

xjb — Wed, 18 Nov 2009 02:37:29 +0000

原文地址：How to convert a GridView column from asp:BoundField to asp:TemplateField in Design View

假定你有个数据源SqlDataSource1 ，绑定了一个简单的查询语句，返回Customers表的详细信息。
http://www.watch-life.net/visual-studio/convert-a-gridview-column-from-boundfield-to-templatefield.html

ConnectionString="<%$ ConnectionStrings:MyConnectionString %>"
SelectCommand="SELECT [FirstName], [LastName], [Email] FROM [Customers] ORDER BY
[FirstName]">

在Visual Studio里，在web forms 页面的设计视图添加一个GridView,选择 SqlDataSource1作为数据源，通常GridView 列会生成 BoundField型数据

DataSourceID="SqlDataSource1">

SortExpression="FirstName" />
SortExpression="LastName" />

通常，你想自定义一列或多列从BoundField转换到TemplateField，这里我们把Email列转换成TemplateField。在GridView的智能标签面板里单击“Edit Columns”。然后在弹出的对话框选择“Email”字段，并单击“Convert this field into a TemplateField”

Email 字段的代码会进行更新，如下所示：

’>

’>

对于DetailsView控件，也可以参照类似的方法去做，在DetailsView的智能标签面板选择“Edit Fields”即可。

你可能也会喜欢以下文章：

web developer tips (53):在vs的设计视图编辑gridview的模板

xjb — Mon, 12 Oct 2009 02:29:59 +0000

原文地址：How to edit the templates for gridview in VS designer

通过模板的呈现，可以灵活地配置Gridview控件。下面的步骤将显示在Visual Studio 的设计视图如何编辑gridview的模板(template)。

http://www.watch-life.net/visual-studio/edit-the-templates-for-gridview-in-vs-designer.html

1、这里 GridView链接到了一个数据源Sqldatasource：Northwind.products，在配置sql 数据源时，选择“生成插入”、“更新”、“删除”语句。

2、单击gridview的智能任务(gridview 任务)标签，选中“启用编辑”项。

3、在字段列表选择一列名，单击“将此字段转换成TemplateField ”，单击“确定”

4、在“gridview 任务”标签选择“编辑模板”

5、从下拉框中选择“EditItemTemplate”

6、你将看到如下内容

7、现在你可以更新模板了，比如你可以拖拽一个requireFiledValidator控件放置其中。

8、如果有多个列转换成模板，你可以选择特定的模板列进行编辑。

9、切换到“源视图”，你会发现有关模板的改变Visual Studio已经产生了源代码。

10、单击“结束模板编辑”退出对模板的编辑。

你可能也会喜欢以下文章：

web developer tips (5):绑定ListView控件

xjb — Thu, 11 Jun 2009 16:35:12 +0000

原文地址：How to Databind a ListView control

ListView 是Visual Studio 2008中一个新的控件，使用此控件可以很轻松的进行数据的插入、编辑、删除和排序，也可以在使用这个控件时通过用户定义模板来灵活地显示各种格式的数据。

下面的如何将ListView 绑定到一个SQLDataSource（sql数据源）步骤：
http://www.watch-life.net/visual-studio/how-to-databind-a-listview-control.html

1、从工具箱的数据标签里添加一个Listview控件， Visual Studio将会生成如下图所示的代码

2、为这个控件绑定一个SQLDataSource，在这里，我们复制一个NorthWind.mdf 数据库到网站项目的 App_Data文件夹。

3、配置这个SQLDataSource使用“类别”表，将产生如下一段代码：

 ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
 

 ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT * FROM [Categories]">

4、打开LIstview控件的智能标记，选择“配置ListView”打开“配置ListView”对话框

5、在这个配置对话框里，你可以选择布局和预定义的样式，比如选择“grid”和“ Professional”，如果你想分页的话，你可以选中“启动分页”选项。

6、在源码视图会产生如下代码：

 
    
    
    
        
        
        
        CategoryID
        
        CategoryName
        
        Description
        
        Picture
        
        
        
        
    
    
    
    
         ID="DataPager1" runat="server">

6、运行这个页面，将会显示一个带分页的的（数据展示）页面。

这里只是介绍的一个非常简单的listview绑定的例子。

ListView 控件是net Framework3.5里的控件，如果在你的项目是基于net Framework2.0或3.0 ，在工具箱是无法看见这个控件。这个控件和Gridview控件是在Asp.net中最常用的数据控件。在显示不是很复杂的数据方面很有优势，甚至比Gridview更灵活适用，它不像Gridview那样不是行字段来显示数据，而是使用用户定义的模板。

个人觉得应该要很好的利用ListView，而现在Asp.net的开发对GridView有滥用的倾向。

你可能也会喜欢以下文章：

转载请注明作者，出处，以及原始超链接。
评论数：1 | 评论这篇文章|关注作者最近动态,欢迎 follow me xjb@twitter.com|联络作者：iamxjb@gmail.com
© 2010 守望轩 www.watch-life.net

让GridView中CheckBox列支持FireFox

xjb — Tue, 08 Jul 2008 09:48:39 +0000

在Asp.net中，可以通过模板列，在Gridview中实现CheckBox列的实现，相关的代码并不复杂，你可以参考这里，我抽取的部分代码如下：

<asp:GridView ID=”GridView1″ runat=”server” AllowPaging=”True"

AutoGenerateColumns=”False”
        DataKeyNames=”id” DataSourceID=”AccessDataSource1″

AllowSorting=”True” OnDataBinding=”GridView1_DataBinding”
OnRowDataBound=”GridView1_RowDataBound”>
           <Columns>
              <asp:TemplateField>
                   <ItemTemplate>
                       <asp:CheckBox ID=”CheckBox1″ runat=”server”
Checked=”True” Text=’<%#DataBinder.Eval(Container.DataItem,”id”) %>’ />
                   ItemTemplate>
                    <HeaderTemplate>
                         <input id=”CheckAll” type=”checkbox” onclick=”selectAll(this);” />全选    HeaderTemplate>
<asp:BoundField DataField=”id” HeaderText=”id” InsertVisible=”False” ReadOnly=”True”

SortExpression=”id” />
  <asp:BoundField DataField=”name” HeaderText=”name” SortExpression=”name” />
  <asp:BoundField DataField=”sex” HeaderText=”sex” SortExpression=”sex” />
  <asp:BoundField DataField=”deptid” HeaderText=”deptid” SortExpression=”deptid” />
            Columns>
        asp:GridView>

js代码中的selectAll(obj)方法在IE中可以正常使用。昨天，一朋友做测试，发现在FireFox中不支持，让我帮着找找原因，估计是js的代码有不兼容Firefox的，查有关资料，原来在firefox不支持parentElement，但支持parentNode，于是把原来的js代码修改了一下，通过obj.parentNode.parentNode.parentNode 来获取表格对象（GridView编译后形成的表格），不过要找到CheckBox对象要麻烦点，因为没法通过obj.parentElement.cellIndex 来定位找到ChecKbox所在位置了，只能通过循环某一行的单元格来查找了。具体的代码如下：

function select_all(obj)
{
    var theTable  = obj.parentNode.parentNode.parentNode;
    var j = obj.parentNode.cellIndex;

    for(var i=0; i<theTable.rows.length; i++)
    {
        var objCheckBox = GetCheckBoxObj(theTable.rows[i].cells[j]);
        if(objCheckBox.checked != null)
            objCheckBox.checked = obj.checked;
    }
}

如此修改后，这个checkbox就可以兼容IE和FireFox了。

看来要是在web开发来要想兼容IE和Firefox，这个工作还是蛮艰巨的。有关firefox与ie 的javascript区别的你看看这里，总结非常详细。不但是js，css也有很多不一样的地方。嘿嘿，由此我有点怀念IE一统天下的年代了,不过我觉得一般企业级的应用还是不专门考虑FireFox了，除非做门户网站。
本文地址：http://www.watch-life.net/aspnet/gridview-checkbox-firefox.html

你可能也会喜欢以下文章：

在gridview和datagrid里设置列宽

xjb — Wed, 16 Jan 2008 01:51:21 +0000

无论是gridview还是datagrid,在绑定数据后，列宽都不是固定的，在设计时是没法设定的，只能通过绑定是触发的事件来重新设定。参考http://msdn2.microsoft.com/zh-cn/library/ms178296(VS.80).aspx 的解释.

gridview的代码：

protected int widestData;
protected void GridView1_RowDataBound(object sender,
    GridViewRowEventArgs e)
{
    System.Data.DataRowView drv;
    drv = (System.Data.DataRowView)e.Row.DataItem;
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
      if (drv != null)
      {
        String catName = drv[1].ToString();
        Response.Write(catName + "/");
        int catNameLen = catName.Length;
        if (catNameLen > widestData)
        {
          widestData = catNameLen;
          GridView1.Columns[2].ItemStyle.Width =
            widestData * 30;
          GridView1.Columns[2].ItemStyle.Wrap = false;
        }
      }
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    widestData = 0;
}

datagrid 的代码：

protected void datagrid_ItemCreated(object sender, DataGridItemEventArgs e)
        {
            ListItemType itemType = e.Item.ItemType;
            if (itemType == ListItemType.Header)
            {
                for (int i = 0; i < e.Item.Cells.Count; i++)
                {
                    e.Item.Cells[i].Width = Unit.Pixel(80);
                    e.Item.Cells[i].Wrap = false;
                }
            }
        }

本文地址：http://www.watch-life.net/aspnet/gridview-datagrid-column-width.html

你可能也会喜欢以下文章：

转载请注明作者，出处，以及原始超链接。
评论数：2 | 评论这篇文章|关注作者最近动态,欢迎 follow me xjb@twitter.com|联络作者：iamxjb@gmail.com
© 2010 守望轩 www.watch-life.net

在GRIDVIEW中合并单元格

xjb — Tue, 18 Dec 2007 04:02:59 +0000

///

    ///   合并GridView列中相同的行
    ///

    ///   GridView对象
    ///   需要合并的列
    public static void GroupRows(GridView GridView1, int cellNum)
    {
        int i = 0, rowSpanNum = 1;
        while (i < GridView1.Rows.Count – 1)
        {
            GridViewRow gvr = GridView1.Rows[i];
            for (++i; i < GridView1.Rows.Count; i++)
            {
                GridViewRow gvrNext = GridView1.Rows[i];
                if (gvr.Cells[cellNum].Text == gvrNext.Cells[cellNum].Text)
                {
                    gvrNext.Cells[cellNum].Visible = false;
                    rowSpanNum++;
                }
                else
                {
                    gvr.Cells[cellNum].RowSpan = rowSpanNum;
                    rowSpanNum = 1;
                    break;
                }                if (i == GridView1.Rows.Count – 1)
                {
                    gvr.Cells[cellNum].RowSpan = rowSpanNum;
                }
            }
        }
    }

///

    ///   根据条件列合并GridView列中相同的行
    ///

    ///   GridView对象
    ///   需要合并的列
    ///   ///   条件列(根据某条件列还合并)
    public static void GroupRows(GridView GridView1, int cellNum, int cellNum2)
    {
        int i = 0, rowSpanNum = 1;
        while (i < GridView1.Rows.Count – 1)
        {
            GridViewRow gvr = GridView1.Rows[i];
            for (++i; i < GridView1.Rows.Count; i++)
            {
                GridViewRow gvrNext = GridView1.Rows[i];
                if (gvr.Cells[cellNum].Text + gvr.Cells[cellNum2].Text == gvrNext.Cells[cellNum].Text + gvrNext.Cells[cellNum2].Text)
                {
                    gvrNext.Cells[cellNum].Visible = false;
                    rowSpanNum++;
                }
                else
                {
                    gvr.Cells[cellNum].RowSpan = rowSpanNum;
                    rowSpanNum = 1;
                    break;
                }

                if (i == GridView1.Rows.Count – 1)
                {
                    gvr.Cells[cellNum].RowSpan = rowSpanNum;
                }
            }
        }
    }

第二个方法只是在第一个方法的修改了一点点, 在判断单元格的时候，加上了一个条件列：

if (gvr.Cells[cellNum].Text + gvr.Cells[cellNum2].Text == gvrNext.Cells[cellNum].Text + gvrNext.Cells[cellNum2].Text)。当然，第二个方法还可以扩展，根据多个列的条件来合并。
本文地址：http://www.watch-life.net/aspnet/gridview-merger-cell.html