ExtJS的.NET控件----YuiGrid(数据绑定、同步/异步取值)

      YuiGrid是ExtJs的.NET控件， 其功能类似标准的GridView控件，又各有所长，本文将简单的介绍下ExtJS的.NET控件中的YuiGrid控件的一些常用功能和实现。   

一、数据准备

     建立数据（MSSQL 2005）,字段如下图所示：
           

 二、效果预览

     YuiGrid的界面呈现的效果如下图：

          

     我们还可以点击列进行排序以及动态指定需要显示的列，如下图示：

          

三、数据绑定和取选择行的数据(服务端)

     同标准的GridView一样，使用YuiGrid的DataSource属性和DataBind()方法进行数据绑定，YuiGrid也支持Linq。

 1 private void BindGrid()
 2 {
 3     SqlConnection conn = new SqlConnection(ctx.Connection.ConnectionString);
 4     SqlDataAdapter sda = new SqlDataAdapter("select * from userinfo", conn);
 5     conn.Open();
 6     DataSet ds = new DataSet();
 7     sda.Fill(ds);
 8     this.YuiGrid1.DataSource = ds;
 9     this.YuiGrid1.DataBind();
     conn.Close();
 }

     

     获取选择列的数据相比标准控件的Grid来说更加方便，直接使用SelectedIndexChanged事件就OK，提供了SelectedRowArgs事件来传递数据，通过它直接取相应的属性，如下图我们选择“李四”这一条数据则在右边显示出来。

           

1 protected void YuiGrid1_SelectedIndexChanged(object sender, ExtExtenders.SelectedRowArgs e)
 {
     tbName.Text = e.SelectedRow["Name"].ToString();
     tbSex.Text = e.SelectedRow["Sex"].ToString();
     tbAge.Text = e.SelectedRow["Age"].ToString();
     tbMail.Text = e.SelectedRow["E-mail"].ToString();
     tbPhone.Text = e.SelectedRow["Phone"].ToString();
 }

     这里需要注意一点，如果要使YuiGrid能够支持AJAX无刷新的取得选中行的数据 ，则必须为ASPX页面提供ASP.NET AJAX的ScriptManager，并在页面的Page_load里注册YuiGrid为异步方式，并将显示数据区域放置在UpdatePanel里：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    &nbsp;<div>
        <span>姓名：<asp:TextBox ID="tbName" runat="server"></asp:TextBox></span><br />
        <span>性别：<asp:TextBox ID="tbSex" runat="server"></asp:TextBox></span><br />
        <span>年龄：<asp:TextBox ID="tbAge" runat="server"></asp:TextBox></span><br />
        <span>电话：<asp:TextBox ID="tbPhone" runat="server"></asp:TextBox></span><br />
        <span>邮件：<asp:TextBox ID="tbMail" runat="server"></asp:TextBox></span><br />
    </div>
</ContentTemplate>
</asp:UpdatePanel>

 

     另外要实现上面的选择行取数据还得为YuiGrid委托一个方法（YuiGrid1_SelectedIndexChanged），代码如下：

1 protected void Page_Load(object sender, EventArgs e)
 {
     YuiGrid1.SelectedIndexChanged += YuiGrid1_SelectedIndexChanged;
     ScriptManager1.RegisterAsyncPostBackControl(YuiGrid1);  //将YuiGrid注册为异步控件
 
     //
 }

 

四、客户端获取选中行的数据

      YuiGrid对客户端的支持是非常强大的，要是整个ExtJS对客户端的支持都很强大，我们可以通过客户端方法取得相应的数据以及进行相应的逻辑操作，比如实现在线编辑等等。在客户端获取YuiGrid里的数据是很简单的，代码如下：

 1 <script type="text/javascript">
 2 function getSelected()
 3 {
 4     var extender=$find("YuiGrid1");
 5     if(extender==null)
 6     {
 7         setTimeout("getSelected()",50);
 8         return;
 9     }
     var grid = extender.get_Grid();
     var row_data = grid.selModel.getSelected();
     if(row_data)
     {
         var row = row_data = row_data.data;
         var userInfo = new Sys.StringBuilder();
         userInfo.append(String.format("姓名：{0}",row.Name));
         userInfo.append(String.format("性别：{0}",row.Sex));
         userInfo.append(String.format("年龄：{0}",row.Age));
         userInfo.append(String.format("电话：{0}",row.Phone));
 
         alert(userInfo);
     }
     else
     {
         alert("请选择行！");
     }
 }
 </script>

 

     除此之外，YuiGrid还支持拖拽、分页、在线编辑、动态分组等等，详细大家可以参考：http://www.extjs.com/ 或http://extendersamples.rodiniz.com/，关于ExtJS的YuiGrid就介绍这些。

 

本文实例程序下载：点击这里下载 

源代码下在连接:点击这里下载

下载包里有个ExtExtenders.dll的文件，封装了多个ExtJS控件，直接添加到vs的工具箱里就OK了。

注：原创文章欢迎转载，务必注名出处。 出处：http://beniao.cnblogs.com/  或 http://www.cnblogs.com/