如何在DataGrid裡面使用動態圖形表示數字

來源:互聯網
上載者:User
datagrid|動態|圖形 本文將要簡單的介紹如何在DataGrid裡面用圖形表是一個數字,聽起來好象要用到GUI的編程,其實不然,如果你讀完全文你就會發現其實很簡單,只是一個“小把戲”而已,但是請不要失望,其實在實際的應用中這個“小把戲”就是你項目中的一個亮點。

首先為了實現這個功能我們需要一個DataGrid,並且為這個DataGrid邦定資料,具體的邦定代碼如下(由於我說明問題的重點不在如何邦定DataGrid所以我就是用了最原始的邦定方法,目的旨在說明主題)。

畫一個DataGrid在HTML裡面,代碼就像下面的一樣,我使用了一個測試的資料庫和一個測試的表名字都叫test,同時這個test表裡面有a,b,c3個欄位:

<asp:DataGrid id="DataGrid1" runat="server" Width="100%" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="a" HeaderText="名稱"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="數位圖形表示">
<ItemTemplate>
<asp:Label id="Label1" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="c" HeaderText="數字表示"></asp:BoundColumn>
</Columns>
</asp:DataGrid>

正如你看到的,我們使用了一個模版列來顯示資料,它只是一個Label而不是Image,其他兩個是邦定欄位,c就是我們要顯示的數字了。

OK,接下來我們看看,cs的部分,幫定代碼如下:

SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"]);
SqlDataAdapter da = new SqlDataAdapter("select a,c from test",conn);
DataSet ds = new DataSet();
da.Fill(ds);
this.DataGrid1.DataSource = ds.Tables[0];
this.DataGrid1.DataBind();

非常簡單。因為我不喜歡將資料邦定代碼寫在HTML裡面所以我使用了ItemDataBound事件來完成這件事情。具體的代碼如下:

private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) {
if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem){
Label lbl = (Label)e.Item.Cells[1].FindControl("Label1");
lbl.Text = "<HR align='left' color='blue' size='10' width='"+e.Item.Cells[2].Text+"'>";
}
}

看上去是不是很簡單?呵呵,希望你不會以為我在騙你,好了按照上面的步驟建立一個頁面試一試吧,效果不錯,我想通過他還可以實現其他很多有關資料的顯示,比如:比例。不過這種比例的計算你最好在邦定之前處理好放到DataTable裡面,這樣邦定的代碼將非常簡單。啟動並執行結果如下:



好了!此文已完,祝大家工作順利!

:P


相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。