Wijmo 更优美的jQuery UI部件集:运行时处理Wijmo GridView数据操作

简介:

C1GridView具有很多内置的功能,比如排序过滤分页以及分组

image

对于开发者来说,这些都是很有用的功能,因为它们可以节省大量通过代码实现这些能力的时间。 
无论如何,开发人员不一定非要将其在设计时绑定到一个数据源。实际上,在大多数情况下,数据是动态绑定的。

本文讨论了当C1GridView动态绑定数据时如何实现排序,过滤分页以及分组。

绑定C1GridView

C1GridView可以绑定到一个ADO.NET数据源,比如说DataSet,DataTable等等。对于本示例,我们将grid绑定到C1NWind.mdb数据库文件的“Customers”表上。

 

 
  1. public DataSet BindGrid() 
  2.  
  3.  
  4.     OleDbConnection con = new OleDbConnection("provider=Microsoft.Jet.Oledb.4.0; Data Source=" + Server.MapPath("~/App_Data/C1NWind.mdb")); 
  5.  
  6.     OleDbDataAdapter da; 
  7.  
  8.     DataSet ds = new DataSet(); 
  9.  
  10.     da = new OleDbDataAdapter("Select * from Customers", con); 
  11.  
  12.     da.Fill(ds); 
  13.  
  14.     return ds; 
  15.  
  16.  
  17. protected void Page_Load(object sender, EventArgs e) 
  18.  
  19.  
  20.     if (!IsPostBack) 
  21.  
  22.     { 
  23.  
  24.         C1GridView1.DataSource = BindGrid(); 
  25.  
  26.         C1GridView1.DataBind(); 
  27.  
  28.     } 
  29.  

 

处理C1GridView事件

排序 
为了实现排序,我们需要处理Sorting以及Sorted事件。Grid会在Sorted事件中被重新绑定。

 

 
  1. protected void C1GridView1_Sorting(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewSortEventArgs e) 
  2.  
  3.  
  4.  
  5. //处理 Sorting 
  6.  
  7. protected void C1GridView1_Sorted(object sender, EventArgs e) 
  8.  
  9.  
  10.     C1GridView1.DataSource = BindGrid(); 
  11.  
  12.     C1GridView1.DataBind(); 
  13.  

 

过滤 
处理过滤的代码和处理排序的逻辑完全相同。我们需要处理Filtering 以及Filtered事件。

 

 
  1. protected void C1GridView1_Filtering(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewFilterEventArgs e) 
  2.  
  3.  
  4.  
  5. //处理Filtering 
  6.  
  7. protected void C1GridView1_Filtered(object sender, EventArgs e) 
  8.  
  9.  
  10.     C1GridView1.DataSource = BindGrid(); 
  11.  
  12.     C1GridView1.DataBind(); 
  13.  

 

分页 
处理分页的逻辑和处理排序和过滤得逻辑有一点点不同。我们只需要处理Paging事件。首先将G1GridView的PageIndex设置为NewPageIndex,然后就像我们之前所作的那样,对grid进行重新绑定。

 

 
  1. protected void C1GridView1_PageIndexChanging(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewPageEventArgs e) 
  2.  
  3.  
  4.     C1GridView1.PageIndex = e.NewPageIndex; 
  5.  
  6.     C1GridView1.DataSource = BindGrid(); 
  7.  
  8.     C1GridView1.DataBind(); 
  9.  

 

分组 
为了对C1GridView进行分组,需要将AllowColMoving以及ShowGroupArea属性设置为true。我们还需要处理ColumnGrouped以及ColumnUngrouped事件,并且将ColumnUngrouped事件留空。然而,在ColumnGrouped事件中,我们必须重新绑定grid。不同的是,这次我们需要添加一个参数,这个参数就是正在被拖拽或者分组的列的HeaderText。这个参数首先被用来按照该列进行排序,之后应用分组,以确保不会创建重复分组。

 

 
  1. //处理 Column Grouping 
  2.  
  3. protected void C1GridView1_ColumnGrouped(object sender,   C1.Web.Wijmo.Controls.C1GridView.C1GridViewColumnGroupedEventArgs e) 
  4.  
  5.  
  6.     C1GridView1.DataSource = BindGrid(e.Drag.HeaderText); 
  7.  
  8.     C1GridView1.DataBind(); 
  9.  
  10.  
  11. //处理Column UnGrouping 
  12.  
  13. protected void C1GridView1_ColumnUngrouped(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewColumnUngroupedEventArgs e) 
  14.  
  15.  

 image



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

相关文章
|
1月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
20 0
|
13天前
【UI】 element ui 表格没有数据时用--填充
【UI】 element ui 表格没有数据时用--填充
20 2
|
5月前
|
JavaScript
element-ui表格数据样式及格式化案例
element-ui表格数据样式及格式化案例
|
4月前
|
JavaScript
Vue + Element UI 实现复制当前行数据功能(复制到新增页面组件值不能更新等问题解决)
# 1、需求 使用Vue + Element UI 实现在列表的操作栏新增一个复制按钮,复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面,本文实现为跳转到新增页面。 # 2、实现 ## 1)列表页 index.vue ```html <el-table> <!-- 其他列 --> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button icon="el-icon-copy-document" title="复制" @click="toCopyNew(scope
72 0
|
5月前
|
JSON 安全 JavaScript
vue2.0 + element-ui 实战项目-axios请求数据(三)
vue2.0 + element-ui 实战项目-axios请求数据(三)
19 0
|
5月前
|
JSON JavaScript 数据格式
Vue框架Element UI教程-axios请求数据(六)
Vue框架Element UI教程-axios请求数据(六)
44 0
|
5月前
|
JSON JavaScript 数据格式
Vue移动端框架Mint UI教程-数据渲染到页面(六)
Vue移动端框架Mint UI教程-数据渲染到页面(六)
39 0
|
5月前
|
JSON JavaScript API
Vue移动端框架Mint UI教程-调用模拟json数据(五)
Vue移动端框架Mint UI教程-调用模拟json数据(五)
42 0
|
5月前
element-ui表格数据样式及格式化
element-ui表格数据样式及格式化
|
6月前
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
28 0

相关课程

更多