ExtJS的.NET控件----YuiGrid(数据绑定、同步/异步取值)-阿里云开发者社区

开发者社区> 余二五> 正文

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();
10     conn.Close();
11 }
     
     获取选择列的数据相比标准控件的Grid来说更加方便,直接使用SelectedIndexChanged事件就OK,提供了SelectedRowArgs事件来传递数据,通过它直接取相应的属性,如下图我们选择“李四”这一条数据则在右边显示出来。
           
1 protected void YuiGrid1_SelectedIndexChanged(object sender, ExtExtenders.SelectedRowArgs e)
2 {
3     tbName.Text = e.SelectedRow["Name"].ToString();
4     tbSex.Text = e.SelectedRow["Sex"].ToString();
5     tbAge.Text = e.SelectedRow["Age"].ToString();
6     tbMail.Text = e.SelectedRow["E-mail"].ToString();
7     tbPhone.Text = e.SelectedRow["Phone"].ToString();
8 }

     这里需要注意一点,如果要使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)
2 {
3     YuiGrid1.SelectedIndexChanged += YuiGrid1_SelectedIndexChanged;
4     ScriptManager1.RegisterAsyncPostBackControl(YuiGrid1);  //将YuiGrid注册为异步控件
5 
6     //
7 }
 
四、客户端获取选中行的数据
      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     }
10     var grid = extender.get_Grid();
11     var row_data = grid.selModel.getSelected();
12     if(row_data)
13     {
14         var row = row_data = row_data.data;
15         var userInfo = new Sys.StringBuilder();
16         userInfo.append(String.format("姓名:{0}",row.Name));
17         userInfo.append(String.format("性别:{0}",row.Sex));
18         userInfo.append(String.format("年龄:{0}",row.Age));
19         userInfo.append(String.format("电话:{0}",row.Phone));
20 
21         alert(userInfo);
22     }
23     else
24     {
25         alert("请选择行!");
26     }
27 }
28 </script>
 
     除此之外,YuiGrid还支持拖拽、分页、在线编辑、动态分组等等,详细大家可以参考:[url]http://www.extjs.com/[/url] 或[url]http://extendersamples.rodiniz.com/[/url],关于ExtJS的YuiGrid就介绍这些。
 
本文实例程序下载:点击这里下载 
下载包里有个ExtExtenders.dll的文件,封装了多个ExtJS控件,直接添加到vs的工具箱里就OK了。




本文转自 beniao 51CTO博客,原文链接:http://blog.51cto.com/beniao/102302,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
数据同步框架MS Sync Framework - IDE快速开发支持Local Database Cache
数据同步框架MS Sync Framework [术语、例子、参考资料、Tips] http://www.cnblogs.com/2018/archive/2011/02/22/1961654.html  数据同步框架MS Sync Framework-不同场景使用例子和简要分析 http://www.cnblogs.com/2018/archive/2011/02/23/1961657.html 以上两篇文章对框架的基础有了描述,通过IDE的提供Local Database Cache可以快速的实现一个常用的同步应用。
769 0
OpenGLES - glBindTexture 绑定纹理缓存到纹理单元
OpenGLES - glBindTexture 绑定纹理缓存到纹理单元 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
1162 0
把DataTable 转换成Json格式,适用于EasyUI 绑定DataGrid
本文转载:http://www.cnblogs.com/liang--liang/archive/2013/02/05/2893030.html public static string DataTable2Json(System.
829 0
Asp.Net Web API 2第十六课——Parameter Binding in ASP.NET Web API(参数绑定)
原文:Asp.Net Web API 2第十六课——Parameter Binding in ASP.NET Web API(参数绑定) 导航 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html。
877 0
jQuery EasyUI API 中文文档 - 数据表格(DataGrid)
DataGrid 数据表格 扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 1.
1082 0
UIDevice获取设备数据以及如何获取应用信息
<h1 id="codeintro" style="margin:15px 0px 0px; padding:0px; color:rgb(54,46,43); line-height:26px; border:0px; width:740px; font-size:13px; font-weight:normal; font-family:'Helvetica Neue','Luxi S
1378 0
内核同步机制
内核中用于临界区保护下的互斥机制,它包括自旋锁、原子操作和信号量,三者保证了对临界资源访问的互斥型。 1.1 内核中的互斥机制 1.1.1 自旋锁 自旋锁用在多个CPU系统中。当一个线程在一个CPU上正使用资源,而另一个线程在另一个CPU上正忙等待这个资源的时候,就会用到自旋锁来保护临界资源。
870 0
+关注
20382
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载