Wijmo 更优美的jQuery UI部件集:客户端更改C1GridView数据源
很多时候,我们在使用 GridView 展示数据时,希望最终用户可以编辑数据并且同步到数据源中。这是一项繁琐的工作。我们需要自定义模板列,并且在后台手动获取更新值,最后使用 SQL 语句同步到数据库中。
但是,现在我们有了 C1 Wijmo GridView ,这些繁琐的工作都成为历史。C1GridView 仅仅通过一个属性-AllowClientEditing 便允用户在客户端编辑单元格内容。
需要编辑时,我们可以通过双击单元格使其进入编辑状态即可。完成编辑后,选择其它单元格去保存编辑值。
这篇文章将叙述在不执行任何 PostBack 的情况下,如何轻而易举的更新数据库。
1.定义数据库连接字符串并且绑定到 C1GridView
C1GridView 可以绑定 Oledb 数据源或 SQL 数据源。本文中,我们将使用 Oledb 数据源。请根据下面的代码设置 DataKeyNames 和 C1GridView 相关列。同时,我们需要设定 CallbackSettings 值为 editing ,这样在我们保存时,不会发生 Postback。
参考代码:
- <wijmo:C1GridView ID="C1GridView1" runat="server"
- AutogenerateColumns="false" DataKeyNames="CustomerID" ClientSelectionMode="SingleRow"
- AllowClientEditing="true" ShowFilter="true"
- OnEndRowUpdated="C1GridView1_EndRowUpdated">
- <CallbackSettings Action="Editing, Filtering" />
- <Columns>
- <wijmo:C1BoundField DataField="CustomerID" HeaderText="CustomerID" SortExpression="CustomerID">
- </wijmo:C1BoundField>
- <wijmo:C1BoundField DataField="CompanyName" HeaderText="Company Name" SortExpression="CompanyName">
- </wijmo:C1BoundField>
- <wijmo:C1BoundField DataField="ContactName" HeaderText="Contact Name" SortExpression="ContactName">
- </wijmo:C1BoundField>
- <wijmo:C1BoundField DataField="City" HeaderText="City" SortExpression="City">
- </wijmo:C1BoundField>
- <wijmo:C1BoundField DataField="Country" HeaderText="Country" SortExpression="Country">
- </wijmo:C1BoundField>
- </Columns>
- </wijmo:C1GridView>
2.下面,我们定义 Oledb 数据库连接字符串。因为需要将更改同步到数据库中,所以我们需要写 SQL 语句去同步数据源。
参考代码:
- public DataTable GetDataTable()
- {
- DataTable dt = Page.Session["Customers"] as DataTable;
- OleDbConnection con = new OleDbConnection("provider=Microsoft.Jet.Oledb.4.0; Data Source=" + Server.MapPath("~/App_Data/C1NWind.mdb"));
- OleDbDataAdapter da = new OleDbDataAdapter();
- da.SelectCommand = new OleDbCommand("SELECT * FROM [Customers] Order By [CustomerID]", con);
- da.UpdateCommand = new OleDbCommand("Update [Customers] set [CompanyName]=?, [ContactName]=?, [City]=?, [Country]=? where CustomerID = ?", con);
- da.UpdateCommand.Parameters.Add("@CompanyName", OleDbType.VarChar, 50, "CompanyName");
- da.UpdateCommand.Parameters.Add("@ContactName", OleDbType.VarChar, 50, "ContactName");
- da.UpdateCommand.Parameters.Add("@City", OleDbType.VarChar, 50, "City");
- da.UpdateCommand.Parameters.Add("@Country", OleDbType.VarChar, 50, "Country");
- da.UpdateCommand.Parameters.Add("@CustomerID", OleDbType.VarChar, 50, "CustomerID");
- if (dt == null)
- {
- dt = new DataTable();
- da.Fill(dt);
- dt.PrimaryKey = new DataColumn[] { dt.Columns["CustomerID"] };
- Page.Session["Customers"] = dt;
- }
- da.Update(dt);
- return dt;
- }
3.我们仅需在 RowUpdating 和 EndRowUpdated 事件中更新被编辑的行。在客户端使用 C1 Wijmo GridView 修改数据源。
- protected void C1GridView1_RowUpdating(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewUpdateEventArgs e)
- {
- DataTable customers = GetDataTable();
- DataRow row = customers.Rows.Find(C1GridView1.DataKeys[e.RowIndex].Value);
- if (row != null)
- {
- foreach (DictionaryEntry entry in e.NewValues)
- {
- row[(string)entry.Key] = entry.Value;
- }
- }
- else
- {
- throw new RowNotInTableException();
- }
- Page.Session["Customers"] = customers;
- }
在 EndRowUpdated 事件中重新绑定 C1GridView 数据源。
- protected void C1GridView1_EndRowUpdated(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewEndRowUpdatedEventArgs e)
- {
- C1GridView1.DataSource = GetDataTable();
- C1GridView1.DataBind();
- }
不过,有时 C1GridView 中仅仅有一行数据(例如:执行了过滤操作)。用户编辑这一行,但是我们并没有其他行可以点击,从而无法保存更改。不要着急!
我们只需要添加 button 去调用 C1GridView 的前台方法 Update即可。
- <asp:Button ID="btn1" runat="server" Text="Update C1GridView"OnClientClick="btn_ClientClick(); return false;" />
使用下面代码调用 Update() 方法:
- function btn_ClientClick(sender, args)
- {
- var grid = $("#C1GridView1");
- grid.c1gridview("endEdit");
- grid.c1gridview("update");
- }
好了,现在我们可以运行程序查看效果了。
Demo 下载:Sample_C1GridView_ClientSideUpdate.zip
Wijmo下载,请进入Studio for ASP.NET Wijmo 2012 v1正式发布(2012.03.22更新)!
转载于:https://blog.51cto.com/powertoolsteam/860612
Wijmo 更优美的jQuery UI部件集:客户端更改C1GridView数据源相关推荐
- Wijmo 更优美的jQuery UI部件集:通过jsFiddle测试Wijmo Gauges
Wijmo 的巨大优势之一就是,它们是非常流行的jQuery UI部件.这将意味着它们的基础类库具有很多支持者.具有众多的支持者同时也意味着更多好用的工具.这些好用的工具之一就是很酷的jsFiddle ...
- Wijmo 更优美的jQuery UI部件集:爱上 ThemeRoller
Wijmo 是一个基于jQuery UI的UI部件的套件.Wijmo最方便使用的特点之一就是兼容ThemeRoller.ThemeRoller 是一个创建独特的jQuery UI web 部件主题皮肤 ...
- Wijmo 更优美的jQuery UI部件集:复合图表(CompositeChart)
Wijmo的CompositeChart控件允许您使用一个Chart来分析和展现复杂的数据.相同的数据可以使用不同的可视化效果,不同的图表类型展现在一个图表内,使得用户可以从不同的角度,了解分析这组数 ...
- Wijmo 更优美的jQuery UI部件集:活动日历控件(Event Calendar)
Wijmo Event Calendar活动日历控件,是一个功能齐全的活动日历控件,允许用户添加,编辑和管理他们的日程.默认情况下,控件将使用Html5的Local Storage特性,进行离线数据存 ...
- Wijmo 更优美的jQuery UI部件集:在安全站点使用Wijmo控件
通常我们总会遇到这样的问题,在安全站点(HTTPS)中使用C1Wijmo控件时,用户可能会收到脚本错误. 发生这种状况的是由于我们的CDN链接不是https链接. 解决HTTPS 的错误 为了解决上述 ...
- Wijmo 更优美的jQuery UI部件集:运行时处理Wijmo GridView数据操作
2019独角兽企业重金招聘Python工程师标准>>> C1GridView具有很多内置的功能,比如排序,过滤,分页以及分组. 对于开发者来说,这些都是很有用的功能,因为它们可以节省 ...
- jQuery 使用 jQuery UI 部件工厂编写带状态的插件(翻译)
首先,我们要创建一个progress bar,它只允许我们简单的设置进度值.正如我们接下来将要看到的,我们需要通过调用 jQuery.widget 及其两个参数来实现这一操作,这两个参数分别是:将要创 ...
- jQuery UI框架
1.jQuery的界面插件Ninja UI Ninja UI,是一款界面插件,使用它将能给你的项目增色不少.此插件包含有幻灯,智能提示等常见的效果. 目前的文档还不是很全,但是官方提供的例子已经很详细 ...
- 18款 jQuery UI框架
1.jQuery的界面插件 Ninja UI Query 是一个非常优秀的 JavaScript 框架,而且还有相当多的插件.其中的一些UI插件也相当的给力,比如 Ninja UI,是一款界面插件,使 ...
最新文章
- java面包屑实现_在Java中实现过滤器和面包店锁
- java存储过程示例_安全密码存储–请勿做的事和Java示例
- 面向对象方法的优势简化软件开发的过程_软件开发技巧的途径
- C# NameValueCollection
- 198. house robber 题解
- oracle 日期格式化 修改_java学习笔记:时间日期类
- 此声明没有存储类或类型说明符
- Python的二进制位运算
- 一只青蛙一次可以_“七夕青蛙”被玩坏了,哈哈哈哈哈哈哈哈哈哈太好玩了
- python编写agent_python 自动生成useragent/User-Agent方法全解析
- 游戏音乐制作/游戏音效制作/游戏配音首选
- cef 获取 html代码,CefGlue获取网页源代码
- APP上查个人信用报告靠谱吗?
- JavaScript-牛客网-剑指offer(1-10)题解
- React | React的JSX语法
- java编写的网页版 纯色背景图片去除底色工具,变成透明背景的图片工具发布...
- 郝健: Linux内存管理学习笔记-第1节课【转】
- 关于一个进程结束另外一个带有NotifyIcon托盘的进程残留图标问题解决方法
- csv和 文件流(二进制)excel文件转化为blob
- 在线 ocr 文字识别 和 图片色值选取