JQuery与GridView控件结合示例

阿尔萨斯

浏览: 4169147 次

最近访客更多访客>>

snower_tt

iams13

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2014-10 ( 581)
2014-09 ( 572)
2014-08 ( 545)
更多存档...

JQuery是一种非常强大的客户端JS编程技术，这里不想过多阐述它的相关背景知识，只想简单演示一下如何与asp.net的控件结合开发。

比如，我们要做一个下面如图所示的功能，效果是状态、编号、数字1、数字2、平均值所有的项都是通过后台绑定，如何点击checkbox按钮，来实现自动计算当前行两个数字的平均值呢？前提是用JQuery来实现？

我们直接在页面的Page_Load事件中输入如下代码：

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[] { 
                    new DataColumn("id",typeof(Int32)),
                    new DataColumn("num1",typeof(Int32)),
                    new DataColumn("num2",typeof(Int32))
                });
 
                DataRow dr = null;
                dr = dt.NewRow();
                dr["id"] = 1;
                dr["num1"] = 20;
                dr["num2"] = 40;
                dt.Rows.Add(dr);
 
                dr = dt.NewRow();
                dr["id"] = 2;
                dr["num1"] = 40;
                dr["num2"] = 30;
                dt.Rows.Add(dr);
 
                this.GridView1.DataSource = dt.DefaultView;
                this.GridView1.DataBind();
            }
        }

前台页面body部分：

<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField HeaderText="状态">
                        <ItemTemplate>
                            <asp:CheckBox ID="checkstate" runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="编号">
                        <ItemTemplate>
                            <asp:Label ID="lblId" runat="server"> <%#Eval("id") %></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="数字1">
                        <ItemTemplate>
                            <asp:Label ID="lblNum1" runat="server"> <%#Eval("num1") %></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="数字2">
                        <ItemTemplate>
                            <asp:Label ID="lblNum2" runat="server"> <%#Eval("num2") %></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="平均值">
                        <ItemTemplate>
                            <asp:TextBox ID="avg_value" runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>

关键的在页面的head部分，输入如下代码就可以实现如图效果了。

    <script src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#<%=GridView1.ClientID%>").find("tr td input[type=checkbox]").each(function () {
                $(this).bind("click", function () {
                    if (this.checked) {
                        var id = $(this).parent().parent().find("span[id*=lblId]").text();
                        var num1 = $(this).parent().parent().find("span[id*=lblNum1]").text();
                        var num2 = $(this).parent().parent().find("span[id*=lblNum2]").text();
 
                        var result = (parseFloat(num1) + parseFloat(num2)) / 2;
                        $(this).parent().parent().find("input[id*=avg_value]").val(result);
                    } else {
                        $(this).parent().parent().find("input[id*=avg_value]").val("");
                    }
                });
            });
        });
    </script>

你会发现JQuery的代码读着很轻松，很容易理解。而且代码也很优美，最关键的是兼容性很好。

再附一个简单点的例子，这是一个静态html页面，看JQuery是如何发挥威力的。效果是点击每一行的按钮时，弹出当前行的text里面的value。

<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript">
		$(function(){
			$("table tr td").each(function(){
				$(this).find("[type=button]").click(function(){
					alert($(this).parent().parent().find("[type=text]").val());
				});
			});
		});
  </script>
</head>
<body>
<table> 
  <tr> 
   <td>1</td>
   <td><input type=text  value="数据1" /></td>
   <td><input type=button  onclick="GetTest()" value="获取" /></td>
  </tr> 
  <tr>
   <td>2</td>
   <td><input type=text  value="数据2" /></td>
   <td><input type=button  onclick="GetTest()" value="获取" /></td>
  </tr> 
</table>
</body>
</html>

试想，如果我们用js去做，将会很麻烦，而且还要考虑各种浏览器的兼容性。看到这里不得不感叹一句，JQuery虽然短小，但是相当强大啊。

分享到：