所属类别：开发技术

文章作者：beniao

特别推荐：免费发布信息 承包关键词~~抢爆了！^HOT!

版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://beniao.blog.51cto.com/389148/102302YuiGrid是ExtJs的.NET控件，其功能类似标准的GridView控件，又各有所长，本文将简单的介绍下ExtJS的.NET控件中的YuiGrid控件的一些常用功能和实现。 一、数据准备建立数据（MSSQL 2005）,字段如下图所示： 二、效果预览YuiGrid的界面呈现的效果如下图： 我们还可以点击列进行排序以及动态指定需要显示的列，如下图示：三、数据绑定和取选择行的数据(服务端)同标准的GridView一样，使用YuiGrid的DataSource属性和DataBind()方法进行数据绑定，YuiGrid也支持Linq。1privatevoidBindGrid()2{3SqlConnectionconn=newSqlConnection(ctx.Connection.ConnectionString);4SqlDataAdaptersda=newSqlDataAdapter("select*fromuserinfo",conn);5conn.Open();6DataSetds=newDataSet();7sda.Fill(ds);8this.YuiGrid1.DataSource=ds;9this.YuiGrid1.DataBind();10conn.Close();11}获取选择列的数据相比标准控件的Grid来说更加方便，直接使用SelectedIndexChanged事件就OK，提供了SelectedRowArgs事件来传递数据，通过它直接取相应的属性，如下图我们选择“李四”这一条数据则在右边显示出来。1protectedvoidYuiGrid1_SelectedIndexChanged(objectsender,ExtExtenders.SelectedRowArgse)2{3tbName.Text=e.SelectedRow["Name"].ToString();4tbSex.Text=e.SelectedRow["Sex"].ToString();5tbAge.Text=e.SelectedRow["Age"].ToString();6tbMail.Text=e.SelectedRow["E-mail"].ToString();7tbPhone.Text=e.SelectedRow["Phone"].ToString();8}这里需要注意一点，如果要使YuiGrid能够支持AJAX无刷新的取得选中行的数据 ，则必须为ASPX页面提供ASP.NET AJAX的ScriptManager，并在页面的Page_load里注册YuiGrid为异步方式，并将显示数据区域放置在UpdatePanel里： 姓名：性别：年龄：电话：邮件：另外要实现上面的选择行取数据还得为YuiGrid委托一个方法（YuiGrid1_SelectedIndexChanged），代码如下：1protectedvoidPage_Load(objectsender,EventArgse)2{3YuiGrid1.SelectedIndexChanged+=YuiGrid1_SelectedIndexChanged;4ScriptManager1.RegisterAsyncPostBackControl(YuiGrid1);//将YuiGrid注册为异步控件56//7}四、客户端获取选中行的数据 YuiGrid对客户端的支持是非常强大的，要是整个ExtJS对客户端的支持都很强大，我们可以通过客户端方法取得相应的数据以及进行相应的逻辑操作，比如实现在线编辑等等。在客户端获取YuiGrid里的数据是很简单的，代码如下：12functiongetSelected()3{4varextender=$find("YuiGrid1");5if(extender==null)6{7setTimeout("getSelected()",50);8return;9}10vargrid=extender.get_Grid();11varrow_data=grid.selModel.getSelected();12if(row_data)13{14varrow=row_data=row_data.data;15varuserInfo=newSys.StringBuilder();16userInfo.append(String.format("姓名：{0}",row.Name));17userInfo.append(String.format("性别：{0}",row.Sex));18userInfo.append(String.format("年龄：{0}",row.Age));19userInfo.append(String.format("电话：{0}",row.Phone));2021alert(userInfo);22}23else24{25alert("请选择行！");26}27}28除此之外，YuiGrid还支持拖拽、分页、在线编辑、动态分组等等，详细大家可以参考：http://www.extjs.com/或http://extendersamples.rodiniz.com/，关于ExtJS的YuiGrid就介绍这些。本文实例程序下载：点击这里下载下载包里有个ExtExtenders.dll的文件，封装了多个ExtJS控件，直接添加到vs的工具箱里就OK了。注：原创文章欢迎转载，务必注名出处。本文出自 “beniao” 博客，请务必保留此出处http://beniao.blog.51cto.com/389148/102302本文出自 51CTO.COM技术博客

....