JQuery與GridView控件結合示例

JQuery是一種非常強大的用戶端JS程式設計技術，這裡不想過多闡述它的相關背景知識，隻想簡單示範一下如何與asp.net的控件結合開發。

比如，我們要做一個下面如圖所示的功能，效果是狀态、編号、數字1、數字2、平均值所有的項都是通過背景綁定，如何點選checkbox按鈕，來實作自動計算目前行兩個數字的平均值呢？前提是用JQuery來實作？

我們直接在頁面的Page_Load事件中輸入如下代碼：

<code>protected</code> <code>void</code> <code>Page_Load(</code><code>object</code> <code>sender, EventArgs e)</code>

<code> </code><code>if</code> <code>(!Page.IsPostBack)</code>

<code> </code><code>DataTable dt = </code><code>new</code> <code>DataTable();</code>

<code> </code><code>dt.Columns.AddRange(</code><code>new</code> <code>DataColumn[] {</code>

<code> </code><code>new</code> <code>DataColumn(</code><code>"id"</code><code>,</code><code>typeof</code><code>(Int32)),</code>

<code> </code><code>new</code> <code>DataColumn(</code><code>"num1"</code><code>,</code><code>typeof</code><code>(Int32)),</code>

<code> </code><code>new</code> <code>DataColumn(</code><code>"num2"</code><code>,</code><code>typeof</code><code>(Int32))</code>

<code> </code><code>DataRow dr = </code><code>null</code><code>;</code>

<code> </code><code>dr = dt.NewRow();</code>

<code> </code><code>this</code><code>.GridView1.DataSource = dt.DefaultView;</code>

<code> </code><code>this</code><code>.GridView1.DataBind();</code>

前台頁面body部分：

<code> </code><code><</code><code>form</code> <code>id</code><code>=</code><code>"form1"</code> <code>runat</code><code>=</code><code>"server"</code><code>></code>

<code> </code><code><</code><code>asp:GridView</code> <code>ID</code><code>=</code><code>"GridView1"</code> <code>runat</code><code>=</code><code>"server"</code> <code>AutoGenerateColumns</code><code>=</code><code>"false"</code><code>></code>

<code> </code><code><</code><code>Columns</code><code>></code>

<code> </code><code><</code><code>asp:TemplateField</code> <code>HeaderText</code><code>=</code><code>"狀态"</code><code>></code>

<code> </code><code><</code><code>ItemTemplate</code><code>></code>

<code> </code><code><</code><code>asp:CheckBox</code> <code>ID</code><code>=</code><code>"checkstate"</code> <code>runat</code><code>=</code><code>"server"</code> <code>/></code>

<code> </code><code></</code><code>ItemTemplate</code><code>></code>

<code> </code><code></</code><code>asp:TemplateField</code><code>></code>

<code> </code><code><</code><code>asp:TemplateField</code> <code>HeaderText</code><code>=</code><code>"編号"</code><code>></code>

<code> </code><code><</code><code>asp:Label</code> <code>ID</code><code>=</code><code>"lblId"</code> <code>runat</code><code>=</code><code>"server"</code><code>> <%#Eval("id") %></</code><code>asp:Label</code><code>></code>

<code> </code><code><</code><code>asp:TemplateField</code> <code>HeaderText</code><code>=</code><code>"數字1"</code><code>></code>

<code> </code><code><</code><code>asp:Label</code> <code>ID</code><code>=</code><code>"lblNum1"</code> <code>runat</code><code>=</code><code>"server"</code><code>> <%#Eval("num1") %></</code><code>asp:Label</code><code>></code>

<code> </code><code><</code><code>asp:TemplateField</code> <code>HeaderText</code><code>=</code><code>"數字2"</code><code>></code>

<code> </code><code><</code><code>asp:Label</code> <code>ID</code><code>=</code><code>"lblNum2"</code> <code>runat</code><code>=</code><code>"server"</code><code>> <%#Eval("num2") %></</code><code>asp:Label</code><code>></code>

<code> </code><code><</code><code>asp:TemplateField</code> <code>HeaderText</code><code>=</code><code>"平均值"</code><code>></code>

<code> </code><code><</code><code>asp:TextBox</code> <code>ID</code><code>=</code><code>"avg_value"</code> <code>runat</code><code>=</code><code>"server"</code> <code>/></code>

<code> </code><code></</code><code>Columns</code><code>></code>

<code> </code><code></</code><code>asp:GridView</code><code>></code>

關鍵的在頁面的head部分，輸入如下代碼就可以實作如圖效果了。

<code><script src=</code><code>"js/jquery-1.4.2.js"</code><code>></script></code>

<code><script type=</code><code>"text/javascript"</code><code>></code>

<code> </code><code>$(</code><code>function</code> <code>() {</code>

<code> </code><code>$(</code><code>"#<%=GridView1.ClientID%>"</code><code>).find(</code><code>"tr td input[type=checkbox]"</code><code>).each(</code><code>function</code> <code>() {</code>

<code> </code><code>$(</code><code>this</code><code>).bind(</code><code>"click"</code><code>, </code><code>function</code> <code>() {</code>

<code> </code><code>if</code> <code>(</code><code>this</code><code>.checked) {</code>

<code> </code><code>var</code> <code>id = $(</code><code>this</code><code>).parent().parent().find(</code><code>"span[id*=lblId]"</code><code>).text();</code>

<code> </code><code>var</code> <code>num1 = $(</code><code>this</code><code>).parent().parent().find(</code><code>"span[id*=lblNum1]"</code><code>).text();</code>

<code> </code><code>var</code> <code>num2 = $(</code><code>this</code><code>).parent().parent().find(</code><code>"span[id*=lblNum2]"</code><code>).text();</code>

<code> </code><code>var</code> <code>result = (parseFloat(num1) + parseFloat(num2)) / 2;</code>

<code> </code><code>$(</code><code>this</code><code>).parent().parent().find(</code><code>"input[id*=avg_value]"</code><code>).val(result);</code>

<code> </code><code>$(</code><code>this</code><code>).parent().parent().find(</code><code>"input[id*=avg_value]"</code><code>).val(</code><code>""</code><code>);</code>

你會發現JQuery的代碼讀着很輕松，很容易了解。而且代碼也很優美，最關鍵的是相容性很好。

再附一個簡單點的例子，這是一個靜态html頁面，看JQuery是如何發揮威力的。效果是點選每一行的按鈕時，彈出目前行的text裡面的value。

<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"jquery-1.4.2.js"</code><code>></</code><code>script</code><code>></code>

<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>

<code> </code><code>$(function(){</code>

<code> </code><code>$("table tr td").each(function(){</code>

<code> </code><code>$(this).find("[type=button]").click(function(){</code>

<code> </code><code>alert($(this).parent().parent().find("[type=text]").val());</code>

<code> </code><code></</code><code>script</code><code>></code>

<code><</code><code>table</code><code>></code>

<code> </code><code><</code><code>td</code><code>><</code><code>input</code> <code>type</code><code>=</code><code>text</code> <code>value</code><code>=</code><code>"資料1"</code> <code>/></</code><code>td</code><code>></code>

<code> </code><code><</code><code>td</code><code>><</code><code>input</code> <code>type</code><code>=</code><code>button</code> <code>value</code><code>=</code><code>"擷取"</code> <code>/></</code><code>td</code><code>></code>

<code> </code><code><</code><code>td</code><code>><</code><code>input</code> <code>type</code><code>=</code><code>text</code> <code>value</code><code>=</code><code>"資料2"</code> <code>/></</code><code>td</code><code>></code>

<code></</code><code>table</code><code>></code>

試想，如果我們用js去做，将會很麻煩，而且還要考慮各種浏覽器的相容性。看到這裡不得不感歎一句，JQuery雖然短小，但是相當強大啊。

本文轉自 guwei4037 51CTO部落格，原文連結:http://blog.51cto.com/csharper/1345977

JQuery與GridView控件結合示例

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條