建立完全可編輯的 DataGrid

來源:互聯網
上載者:User
datagrid|建立 在論壇中我看到過許多相同或相似的問題:我怎樣在我的DataGrid的每一行中放置檢查框、文字框等等?怎樣更新它們的值?答案相當簡單,在這篇文章中,我將向你展示如何完成它。

我們都知道,DataGrid是一個功能非常強大的工具。根據我的經驗,在90%以上的時間中, DataGrid 都被用來顯示資料,並可能一次編輯一行資料。 而某些時候,可能需要一次編輯多行,甚至是所有資料。一個實際的例子就是在網上銷售物品的應用程式中, 顧客可能一次要變更他們籃子中的一種或多種物品,單擊檢查框移去他們不想要的商品。

構想

在這個例子中,我寫了一個簡單的WebForm來管理儲存在XML中的連絡人清單。 這個需求是非常簡單的:具有添加新連絡人,編輯/刪除現有連絡人的能力。使用者可以一次修改或刪除多個連絡人,我也允許使用者按他們選定的列來對資料格進行排序。

我的例子是用 C# 編寫的。 如果你更喜歡這些代碼的VB版本,在下載檔案中有這兩種格式的代碼。

Contacts.xml

這個例子中的 XML 資料檔案非常簡單直觀。由於它非常簡單,所以我沒有建立規劃。

<?xml version="1.0" standalone="yes"?>
<Contacts>
<Contact>
<Email>myaddress@mycompany.com</Email>
<FirstName>John</FirstName>
<LastName>Doe</LastName>
</Contact>
<Contact>
<Email>youraddress@yourcompany.com</Email>
<FirstName>Jane</FirstName>
<LastName>Doe</LastName>
</Contact>
</Contacts>

ContactList.aspx

設定 WebForm 非常簡單。我放置了一個新的 DataGrid 到我的表單中,並且設定它為4列,第一列都包含了用來刪除連絡人的檢查框。你會注意到我在這裡做的主要工作就是以模板列( TemplateColumn)的形式建立了每一列。 這允許我放置文字框和檢查框對象到資料範本(ItemTemplate)中 . 這是一個在網格每一行中顯示文本以外的其它東西的技巧。 除此以外,你還會注意到我使用 FooterTemplate 來使建立連絡人變得簡單而直觀。

我也包含了一個連結按鈕(LinkButton),用來儲存使用者所做的修改及刪除操作。但它並不用來添加新連絡人。添加新連絡人的操作由最後一列的頁尾模板中連結按鈕(LinkButton)來完成。

<asp:datagrid id="dgContacts" runat="server" ShowFooter="True" AllowSorting="True" Forefont color="Black" GridLines="None" CellPadding="2" Backfont color="LightGoldenrodYellow" BorderWidth="1px" Borderfont color="Tan" Width="499px" AutoGenerateColumns="False" DataKeyField="Email">
<SelectedItemStyle Forefont color="GhostWhite" Backfont color="DarkSlateBlue"></SelectedItemStyle>
<AlternatingItemStyle Backfont color="PaleGoldenrod"></AlternatingItemStyle>
<HeaderStyle Font-Bold="True" Backfont color="Tan"></HeaderStyle>
<FooterStyle Backfont color="Tan"></FooterStyle>
<Columns>
<asp:TemplateColumn SortExpression="FirstName" HeaderText="First Name">
<ItemTemplate>
<asp:TextBox id=First runat="server" Width="109px" Text='<%# DataBinder.Eval(Container, "DataItem.FirstName") %>'>
</asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox id="NewFirst" runat="server" Width="109px"></asp:TextBox>
</FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="LastName" HeaderText="Last Name">
<ItemTemplate>
<asp:TextBox id=Last runat="server" Width="109px" Text='<%# DataBinder.Eval(Container, "DataItem.LastName") %>'>
</asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox id="NewLast" runat="server" Width="109px"></asp:TextBox>
</FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="Email" HeaderText="Email">
<ItemTemplate>
<asp:TextBox id=Email runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Email") %>'>
</asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox id="NewEmail" runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Delete Contact">
<ItemStyle HorizontalAlign="Center"></ItemStyle>
<ItemTemplate>
<asp:CheckBox Runat="server" ID="chkDelete"></asp:CheckBox>
</ItemTemplate>
<FooterStyle HorizontalAlign="Center"></FooterStyle>
<FooterTemplate>
<asp:LinkButton Runat="server" Text="Add" CommandName="Add" ID="Linkbutton1" NAME="Linkbutton1"></asp:LinkButton>
</FooterTemplate>
</asp:TemplateColumn>
</Columns>
</



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。