ASP.NET中使用JqGrid完整实现

JqGrid的一些说明

外观时髦，功能齐全

JS控件，用来显示和操作表格数据

使用AJAX方式

可以被集成到任何服务器端技术，例如ASP, JavaServelets, JSP, PHP 等等.

由Trirand公司Tony Tomov开发.

和ASP.NET集成非常简单

JqGrid和ASP.NET整合详细步骤

下载JqGrid，添加所需的文件到ASP.NET应用程序 (主要是一些Scripts and CSS).

在需要使用的页面中初始化JqGrid.

其他一些操作，如增删改

1. 我提到的第一点，你可以在以下地址下载JqGrid和相关的文件

http://www.trirand.com/blog/?page_id=6

下载得到 jquery.jqGrid-4.5.2.zip .

将文件解压，里面是一些css和script文件夹，让我们去看看如何去使用这些文件。
为了更好的理解, 按照国际惯例我新建了一个demo程序：JQGridPOC，用来展示集成的步骤和所具有的功能。

我们需要引入的主要文件是jQuery, 因为jqGrid依赖于jQuery .

在解决方案中专门新建一个文件夹JQGridReq用来放JqGrid相关的文件。

第一步，添加jQuery文件（我添加了jQuery 1.9）。

第二步，如果我们要如何使用jQuery中任何UI相关的东西? 是的，CSS文件. 去jQuery的官网下载。

最后一步，添加 Jquery-ui-1.9.2.custom.css 到程序中。

请确保你同时添加了相关的图片文件夹，因为我们添加的CSS可能也会用到相关的图片。

这样jQuery的东西就准备好了。

下面再开始逐个添加我们JqGrid文件。

jquery.jqGrid-4.5.2\src\ jquery.jqGrid.js

jquery.jqGrid-4.5.2\js\i18n\ grid.locale-en.js

jquery.jqGrid-4.5.2\js\i18n\ grid.locale-cn.js

jquery.jqGrid-4.5.2\css\ ui.jqgrid.css

你看到上面添加的locale-en.js/local-en.js文件了吗? 他们非常重要，可以在里面更改一些预设的参数。

同样的，我们也添加了CSS文件.

现在我们先决条件都完成了。

如下图，你可以看到我们添加后的文件和文件夹结构.

让我们去.aspx 页面添加JqGrid吧。

这个简单的示例项目中我使用了简单的客户管理的案例，使用 Default.aspx 做为例子。

需要将所有需要的文件先引用到HTML页的head部分，如下图。

现在需要做的是先将HTML table标签放置到页面中，给这个table指定一个ID jQgridPOC (这个table就是我们即将要转变成的JqGrid)。

$( function () {

$( "#jQgridPOC" ).jqGrid({

url: 'http://localhost:58404/JQGridHandler.ashx' ,

datatype: "json" ,

colNames: [ 'Id' , '大名' , '尊姓' , "地址" , '城市' , '州' ],

colModel: [

{ name: 'id' , index: 'id' , width: 20, stype: 'text' },

{ name: 'FirstName' , index: 'FirstName' , width: 80, stype: 'text' , sortable: true , editable: true },

{ name: 'LastName' , index: 'LastName' , width: 80, align: "right" , editable: true },

{ name: 'Address1' , index: 'Address1' , width: 150, align: "right" , editable: true },

{ name: 'City' , index: 'City' , width: 80, align: "right" , editable: true },

{ name: 'State' , index: 'State' , width: 100, sortable: false , editable: true }

rowNum: 10,

loadonce: true ,

sortname: '_id' ,

viewrecords: true ,

sortorder: 'desc' ,

caption: "客户列表"

</ script >

运行程序，你将会得到下图所示表格（目前还没数据）。

我想根据表格显示内容，你应该能读懂我写的初始化脚本。

colNames代表表格头部.

colModel是JSON对象数据的属性，用来配置表格中的每一列。

可以说要在表格中显示的数据模型。colNames中的属性顺序应该和colModel中数组的顺序相匹配。

3. 绑定数据

你也许注意到url属性留着没有填。

那是供AJAX调用的，下面就完成这部分内容，填充这个grid.

我使用SQL Server的示例数据库PETSHOP作为后端.

URL如何完成填充数据？

我所做的是, 创建一个HTTP handler, handler里面的函数去取表 [MSPetShop4Profile] . [dbo] . [Account] 中的数据并且写到HTTP Response中去。

HTTP response将会是一个JSON字符串，按照之前提到的colModel的格式。

我们的JqGrid读取JSON返回字符串，在colModel的帮助下显示在JqGrid里。

你需要留意一下，目前我们使用JSON对象。

JqGrid可以使用XML，JSON，数组，我们使用的是JSON。

正如我所说的，我创建了一个.ashx handler，叫JQGridHandler.ashx

相应的url地址为： http://localhost:58404/JQGridHandler.ashx .

下面就向你展示数据如何从handler中读取。从grid中访问handler仅仅只需要调用URL

通常，如果我们需要传递数据到handler或从handler中读取数据，我们在哪找传递的参数？

是的，我们显然会首先去 context.Request 中找，不是吗？

此时我们也会去看看在 context request 中是否有表单参数数据传递进来。
让我们去调试看看。

通过查看调试器（如上图），你可以看到我在通过调用 forms.Get(“oper”) 找 oper 的值。

希望你已经注意到了 Form{} 属性是空的。

那么为什么我会取 oper 的值呢？

我想你已经猜到了，grid操作数据时会依赖 oper 参数。

继续往下看，我将会向你展示 oper 中的所有数据。

现在我们假设 oper==null 时代表grid是第一次加载。不要感到困惑。

下面我使用SQL Server数据库作为我的数据存储。

关于ADO.NET这块我不做讨论，主要用了一个类文件SQLHelper和两个函数
private DataTable GetAccountInfo()
public string GetJson( DataTable dt)

可自行在代码中查看。

另外需要说明的是我取回的数据源是DataTable，需要转换成JSON，用了 public string GetJson( DataTable dt) 进行转换。

你也可以使用其他数据源，用你熟悉的就好。

你可以看到取数据的代码在if语句中。

我希望到现在为止一切都说的很清楚。

现在好了，我们为JqGrid铺好了数据管道，让我们看看是否可以工作。

数据会被装载进来吗？

CTRL+F5

数据已经被装载进来了。

现在可以在这个基础上做一些变化了。

你也许会想这个表格有什么特别呢？和一个简单的gridview一样。。。

你点一下第二列的表头"大名"试试，直接就能排序了。

我们给排序写代码了吗？

没错，这就是jqGrid的优雅之处。不光是第一列，每一列的表头都可以进行排序。

除非你加了如下sortable : false属性，如下：

{ name: 'State' , index: 'State' , width: 80, sortable: false , editable: true }

（这里State这个字段是不能排序的）

继续向下，你能看到其他一些激动人心的功能：）

在JqGrid table ( jQGridPOC )下面再添加一个div. 如下

< table id =" jQGridPOC" > < / table > < div id =" jQGridPOCPager" > < / div >

是的，我在底部又添加了一个div jQGridPOCPager .

脚本做一些修改，如下

注意方框部分是我新增加的。

看看现在Grid是什么样了.

页码工具栏出现了。

这个底部工具栏的优雅之处在于，不用写一行代码就能完成搜索功能。

不光是搜索，排序功能也能同样不需要写代码就能实现，JqGrid原生就能实现这些功能。

下面对这个工具栏做一些设置相关配置如下（如图9，10）。

让我们试一下查找功能. （如图11）

说明一下，你可以在grid.locale-cn.js-->nav 片段中修改底部工具栏中的一些default设置（显示文字，跳出模态框的标题等），如图12.

当然，你可以在JqGrid初始化时修改这些默认设定，如图13。

另外你应该注意到了图11中的筛选条件例如等于，不等，开始于等等。

我不需要用这么多的筛选条件，怎样移除？

如果已经把grid.locale-cn.js都浏览一遍，你应该已经发现这些条件在grid.locale-cn.js-->search片段中。

是的，只要修改这些就可以了，你可以移除一些试试看。（如下图方框处）

这个文件中的其他片段的作用相信你能根据代码猜测出来，自己去探索一下吧：）

希望到此处你都能理解。

下一步打算给grid添加数据库交互功能，即增删改功能。

让我们一起来看看吧。

4.JqGrid Edit/Add/Delete

JqGrid所有的事件和属性都是可配置的，用起来很简单。

不过要注意，即使是一点小改动也可能让grid不能按你期望的工作.

为了完成我们的增删改功能，搭建下面代码的框架。注意按照我下面示例的顺序。

            $('#jQgridPOC').jqGrid('navGrid', '#jQGridPOCPager',
                     edit: true,
                     add: true,
                     del: true,
                     search: true,
                     searchtext: "查找",
                     addtext: "添加",
                     edittext: "编辑",
                     deltext: "删除",
                     refreshtext:"刷新"
                     //EDIT EVENTS AND PROPERTIES GOES HERE
                     //ADD EVENTS AND PROPERTIES GOES HERE
                 {   //DELETE EVENTS AND PROPERTIES GOES HERE           
                     //SEARCH EVENTS AND PROPERTIES GOES HERE
View Code 
你可以看到代码中的注释，我将会将事件和属性填充进去。
在第一个大括号里，我们已经添加了一些参数并设定为true， 添加了按钮后面的文字说明。这个部分我上面已经提到过了。
这代表在grid的底部导航栏中，所有的button将会显示，并且分别显示相对应的文字。（如下图15）
仅接着的几个大刮号是对应的JqGrid的初始化事件和参数。
让我们看一下grid，上面的改动都生效了。 
请注意上图的方框部分。我们点击 “添加” 来增加一笔资料。
将会跳出一个小窗（如下面的截图）
填写后点提交会提示 没有设置url 错误。因为我们还没完成这部分功能呢。
要想执行增删改操作，你需要在grid中添加一个URL属性即editurl.
这个url将会去调用.ashx handler去执行添加功能。
我在caption下面添加一行，你需要设置 editurl: 'http://localhost:58404/JQGridHandler.ashx'




    

保存修改，在handler入口处加个断点，调试。
重复上面添加提交步骤，看到 context.Request.Form 中的值了吗，完全和我们预期的一样。
我们要的数据已经都可以获得了，可以看到forms.Get("oper")已经可以得到值 "add" 了。
根据上面调试的截图你应该可以对我们之前提到的 oper 有更多的了解，前面是在加载数据到grid中提到的。
键值对中键对应grid中的字段，例如FirstName, LastName等。  
理解了吗？
示例代码中我将增加和编辑都放在了同一个分支中，根据相应的if分支就可以执行插入数据到DB的功能了。
string strFirstName = forms.Get("FirstName").ToString();
如上面的写法，同样方法你可以从HTTP request读取表单中其他值. 
插入成功后handler将会写一笔插入成功的字符串到HTTP response中. 
这个字符串将会显示在弹出框中，如下图“资料添加成功”。
这个返回的信息是从handler中发送的，从示例代码中应该很容易找到。
你也许会想客户端哪些事件会接收server端的response, 完整的脚本如下，我将编辑和删除也加上了。
 $(function () {
            $("#jQgridPOC").jqGrid({
                url: 'http://localhost:58404/JQGridHandler.ashx',
                datatype: "json",
                colNames: ['Id', '大名', '尊姓', "地址", '城市', '州','国家'],
                colModel: [
                            { name: 'id', index: 'id', width: 20, stype: 'text' },
                            { name: 'FirstName', index: 'FirstName', width: 80, stype: 'text', sortable: true, editable: true },
                            { name: 'LastName', index: 'LastName', width: 80, align: "right", editable: true },
                            { name: 'Address1', index: 'Address1', width: 150, align: "right", editable: true },
                            { name: 'City', index: 'City', width: 100, align: "right", editable: true },
                            { name: 'State', index: 'State', width: 80, sortable: false, editable: true },
                            { name: 'Country', index: 'Country', width: 80, sortable: false, editable: true }
                rowNum: 10,
                loadonce: true,
                rowList: [10, 20, 30],
                pager: '#jQGridPOCPager',
                sortname: 'LastName',
                viewrecords: true,
                sortorder: 'desc',
                caption: "客户列表",
                editurl: 'http://localhost:58404/JQGridHandler.ashx'
            $('#jQgridPOC').jqGrid('navGrid', '#jQGridPOCPager',
                     edit: true,
                     add: true,
                     del: true,
                     search: true,
                     searchtext: "查找",
                     addtext: "添加",
                     edittext: "编辑",
                     deltext: "删除",
                     refreshtext:"刷新"
                 {   //EDIT
                     //                       height: 300,
                     //                       width: 400,
                     //                       top: 50,
                     //                       left: 100,
                     //                       dataheight: 280,
                     closeOnEscape: true,//Closes the popup on pressing escape key
                     reloadAfterSubmit: true,
                     drag: true,
                     afterSubmit: function (response, postdata) {
                         if (response.responseText == "") {
                             $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');//Reloads the grid after edit
                             return [true, '']
                         else {
                             $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
                             return [false, response.responseText]//Captures and displays the response text on th Edit window
                     editData: {
                         EmpId: function () {
                             var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
                             var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
                             return value;
                     closeAfterAdd: true,//Closes the add window after add
                     afterSubmit: function (response, postdata) {
                         if (response.responseText == "") {
                             $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
                             return [true, '']
                         else {
                             $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
                             return [false, response.responseText]
                 {   //DELETE
                     closeOnEscape: true,
                     closeAfterDelete: true,
                     reloadAfterSubmit: true,
                     closeOnEscape: true,
                     drag: true,
                     afterSubmit: function (response, postdata) {
                         if (response.responseText == "") {
                             $("#jQGridDemo").trigger("reloadGrid", [{ current: true }]);
                             return [false, response.responseText]
                         else {
                             $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
                             return [true, response.responseText]
                     delData: {
                         EmpId: function () {
                             var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
                             var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
                             return value;
                 {//SEARCH
                     closeOnEscape: true
View Code 
编辑功能时我们会使用一个主键更新，这里的主键是 _id, 即我们数据库中的 UniqueID.




    

特别需要说明的是，编辑更新时，只有标记为editable才能传递到handler中去。
如果把字段editable标记为false或不标记，就不会在跳出的编辑框中显示。
你可以看一下编辑时_id没显示，因为这个字段没有标记为editable因此就不会传递到handler中去。
说明：原来用的示例数据库中Account表，不过发现有一些主外键约束及多余字段不方便演示，我又新建了个类似的表AccountTEST（删除了一些多余字段）。
为了把_id值从我们的grid中传递到server中，我使用了JqGrid中的editData 属性。
同样我们也可以利用delData属性传递 _id去删除数据。
注意：不光是_id,你可以传递任何数据到handler中去，使用JSON格式的editData,delData 
从上面的代码可以看出，另外一个常用技巧是获取选中行的数据。
通过下面两行代码：先获取选中行，再选取该行中所要的字段。
根据strOperation(forms.Get("oper")) null, add, edit, del执行不同的操作。最后handler的代码也做个总结
    public class JQGridHandler : IHttpHandler
        public void ProcessRequest(HttpContext context)
            NameValueCollection forms = context.Request.Form;
            string strOperation = forms.Get("oper");
            string strResponse = string.Empty;
            if (strOperation == null) //oper = null which means its first load.
                //1.get the sample data
                DataTable dt = GetAccountInfo();
                //2.convert to json
                string jsonRes = GetJson(dt);
                context.Response.Write(jsonRes);
            else if (strOperation == "del")
                string strEmpId = forms.Get("id").ToString();
                DeleteEmployee(strEmpId);
                strResponse = "删除成功";
                context.Response.Write(strResponse);
                string strOut = string.Empty;
                AddEdit(forms, out strOut);
                context.Response.Write(strOut);
        public bool IsReusable
                return false;
        private DataTable GetAccountInfo()
            DataTable dt = null;
            string cmdText = @"SELECT [UniqueID] id
                              ,[FirstName]
                              ,[LastName]
                              ,[Address1]
                              ,[City]
                              ,[State]
                              ,[Country]
                          FROM [MSPetShop4Profile].[dbo].[AccountTest]";
            SQLHelper sqlhelper = new SQLHelper();
            dt = sqlhelper.ExecuteQuery(cmdText, CommandType.Text);
            return dt;
        //convert a data table to JSON format 
        public string GetJson(DataTable dt)
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            List<Dictionary<string, object>> rows =
              new List<Dictionary<string, object>>();
            Dictionary<string, object> row = null;
            foreach (DataRow dr in dt.Rows)
                row = new Dictionary<string, object>();
                foreach (DataColumn col in dt.Columns)
                    row.Add(col.ColumnName.Trim(), dr[col]);
                rows.Add(row);
            return serializer.Serialize(rows);
        private void AddEdit(NameValueCollection forms, out string strResponse)
            string strOperation = forms.Get("oper");
            string strEmpId = string.Empty;
            string strFirstName = forms.Get("FirstName").ToString();
            string strLastName = forms.Get("LastName").ToString();
            string strAddress = forms.Get("Address1").ToString();
            string strCity = forms.Get("City").ToString();
            string strState = forms.Get("State").ToString();
            string strCountry = forms.Get("Country").ToString();
            Employee objEmp = new Employee();
            objEmp._id = strEmpId;
            objEmp.FirstName = strFirstName;
            objEmp.LastName = strLastName;
            objEmp.Address1 = strAddress;
            objEmp.City = strCity;
            objEmp.State = strState;
            objEmp.Country = strState;
            if (strOperation == "add")
                InsertEmployee(objEmp);
                strResponse = "资料添加成功";
                return;
            else if (strOperation == "edit")
                strEmpId = forms.Get("id").ToString();
                objEmp._id = strEmpId;
                UpdateEmployee(objEmp);
                strResponse = "资料更新成功";
            strResponse = "更新有问题，请联系管理员";
        //insert
        public bool InsertEmployee(Employee employee)
            bool flag = false;
            SQLHelper sqlhelper = new SQLHelper();
            string cmdText = @"INSERT INTO [MSPetShop4Profile].[dbo].[AccountTest]
                               ([FirstName]
                               ,[LastName]
                               ,[Address1]
                               ,[City]
                               ,[State]
                               ,[Country])
                         VALUES
                               (@FirstName
                               ,@LastName
                               ,@Address1
                               ,@City
                               ,@State
                               ,@Country)";
            SqlParameter[] paras = new SqlParameter[]{
                    new SqlParameter("@FirstName",employee.FirstName),
                    new SqlParameter("@LastName",employee.LastName),
                    new SqlParameter("@Address1",employee.Address1),
                    new SqlParameter("@City",employee.City),
                    new SqlParameter("@State",employee.State),
                    new SqlParameter("@Country",employee.Country)
                int res = sqlhelper.ExecuteNonQuery(cmdText, paras, CommandType.Text);
                if (res > 0)
                    flag = true;
            catch (Exception ex)
                throw ex;
            return flag;
        //update
        public bool UpdateEmployee(Employee employee)
            bool flag = false;
            SQLHelper sqlhelper = new SQLHelper();
            string sql = @"UPDATE [MSPetShop4Profile].[dbo].[AccountTEST]
                           SET [FirstName] = @FirstName
                              ,[LastName] = @LastName
                              ,[Address1] = @Address1
                              ,[City] = @City
                              ,[State] = @State
                              ,[Country] = @Country
                            WHERE UniqueID=@UniqueID";
            SqlParameter[] paras = new SqlParameter[]{
                    new SqlParameter("@UniqueID",employee._id),
                    new SqlParameter("@FirstName",employee.FirstName),
                    new SqlParameter("@LastName",employee.LastName),
                    new SqlParameter("@Address1",employee.Address1),
                    new SqlParameter("@City",employee.City),
                    new SqlParameter("@State",employee.State),
                    new SqlParameter("@Country",employee.Country)
            int res = sqlhelper.ExecuteNonQuery(sql, paras, CommandType.Text);
            if (res > 0)
                flag = true;
            return flag;
        //delete
        public bool DeleteEmployee(string id)
            bool flag = false;
            SQLHelper sqlhelper = new SQLHelper();
            string sql = @"DELETE FROM [MSPetShop4Profile].[dbo].[AccountTEST]
                           WHERE UniqueID=@UniqueID";
            SqlParameter[] paras = new SqlParameter[]{
                    new SqlParameter("@UniqueID",id)
            int res = sqlhelper.ExecuteNonQuery(sql, paras, CommandType.Text);
            if (res > 0)
                flag = true;
            return flag;
View Code 
OK, done.
JqGrid优雅，功能丰富易集成，对表格数据进行操作。
JqGrid还有很多功能，各位看官自行探索吧。
参考文章的作者使用了MONGO这个open-source document database，有兴趣的可以去研究下。
第一次写长文章，如果有帮助，请猛戳推荐 ：）
源码地址：http://yunpan.cn/QD96IGcIbZyNG