jquery easyui datagrid data format

Bertha 。 2022-08-24 11:47 211阅读 0赞

# 概要 #

jQuery EasyUI是一个基于jquery的集成了各种用户界面的框架,使用easyui我们不需要写太多javascript代码，一般情况下我们只需要使用一些html标记来定义用户接口,easyui将我们需要的功能都已经封装好了,我们只要来调用easyui给我们提供的接口就可以了,今天我们来学习下easyui中的DataGrid

# 数据显示 #

我们可以在easyui-datagrid中显示数据,显示数据从大类上我们也分为两种,一种是datagrid显示的数据不是来自于数据库,另一种就是将数据库的内容进行显示.

## 第一种 ##

这一种是直接将写好的内容放到前台界面上写,所以相对来说比较简单,我们来看下前台代码的书写.

**\[html\]**   [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****table** id="dg"title="定性指标基础信息" class="easyui-datagrid" style="width:900px; height: 400px; padding-left: 200px;" url="get\_users.php"toolbar="\#toolbar" pagination="true"  
2.                         rownumbers="true" fitcolumns="true"singleselect="true"**>**  
3.     
4.                          **<****thead****>**  
5.  //设置列名  
6.                              **<****tr****>**  
7.                                  **<****thfield**thfield="firstname" width="50"**>**定性指标级别**</****th****>**  
8.                                  **<**thfield**thfield**="lastname" width="50"**>**分数**</****th****>**  
9.                              **</****tr****>**  
10.                         **</****thead****>**  
11. //数据填充  
12.                         **<****tbody****>**  
13.                             **<****tr****>**  
14.                                **<****td****>**优秀**</****td****>**  
15.                                **<****td****>**100**</****td****>**  
16.                             **</****tr****>**  
17.                             **<****tr****>**  
18.                                **<****td****>**良好**</****td****>**  
19.                                **<****td****>**80**</****td****>**  
20.                             **</****tr****>**  
21.    
22.                             **<****tr****>**  
23.                                **<****td****>**一般**</****td****>**  
24.                                **<****td****>**60**</****td****>**  
25.                                 
26.                             **</****tr****>**  
27.                             **<****tr****>**  
28.                                **<****td****>**较差**</****td****>**  
29.                                 **<****td****>**50**</****td****>**  
30.                               
31.                             **</****tr****>**  
32.    
33.                         **</****tbody****>**  
34.                     **</****table****>**  
35. //工具栏按钮  
36.                     **<****divid**divid="toolbar"**>**  
37.                         **<****ahref**ahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-add" plain="true"onclick="newUser()"**>**添加**</****a****>**  
38.                         **<****ahref**ahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-edit" plain="true"onclick="editUser()"**>**修改**</****a****>**  
39.                         **<**ahref**ahref**="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-remove" plain="true"onclick="destroyUser()"**>**删除**</****a****>**  
40.                     **</****div****>**

下面这是效果图

![Center][]

## 第二种 ##

这种是将我们数据库中的内容显示到前台,我们经过一般处理程序从数据库中将数据提取出来,然后将数据显示到DataGrid中。

在这里需要注意的是,我们从数据库中取出来的内容是表格形式的dataset或datatable,而前台DataGrid接收的数据是固定格式的Json格式数据,所以我们需要将表格形式的数据转化为DataGrid需要的固定格式的Json格式数据。

**\[html\]**   [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \{"total":28,"rows":\[  
2.  \{"产品ID":"FI-SW-01","产品名称":"Koi","价格":10.00,"状态":"P"\},  
3.  \{"产品ID":"K9-DL-01","产品名称":"Dalmation","价格":12.00,"状态"":"P"\},  
4.  \{"产品ID":"RP-SN-01","产品名称":"Rattlesnake","价格":12.00,"状态"":"P"\},  
5.  \{"产品ID":"RP-SN-01","产品名称":"Rattlesnake","价格":12.00,"状态"":"P"\},  
6.  \{"产品ID":"RP-LI-02","产品名称":"Iguana","价格":12.00,"状态"":"P"\},  
7.  \{"产品ID":"FL-DSH-01","产品名称":"Manx","价格":12.00,"状态"":"P"\},  
8.  \]\}

下面我们来看下怎么样将数据库中的数据显示到前台的具体过程，

首先是前台页面的书写：

**\[html\]**   [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****div** id="tt"class="easyui-tabs" style="width: 1100px; height: 530px;margin-top: 15px"**>**  
2.          **<****div** title="已录入单位"style="padding: 10px"**>**  
3.              **<****table** id="HaveInput"title="原始数据录入情况" class="easyui-datagrid" style="width:1050px; height: 480px; padding-left: 200px;"data\-options="rownumbers:true,url:'InputScoresDetailsDeveloped.ashx/ProcessRequest',pageSize:5,pageList:\[5,10,15,20\],method:'get',toolbar:'\#tb',"  
4.                  toolbar="\#bar"pagination="true" rownumbers="true"fitcolumns="true" striped="true"singleselect="true"**>**  
5.     
6.                  **<****thead****>**  
7.                     **<**%--设置绑定表格的列名，列名与数据库相同--%**>**  
8.                      **<****tr****>**  
9.                          **<****thdata-options**thdata-options="field:'DepartmentName',width:100"**>**单位名称**</****th****>**  
10.                         **<**thdata-options**thdata-options**="field:'QuantyOriginalData',width:100"**>**定量原始数据**</****th****>**  
11.                         **<****thdata-options**thdata-options="field:'QualityOriginalData',width:100"**>**定性原始数据**</****th****>**  
12.                         **<****thdata-options**thdata-options="field:'Remarks', width:175,align:'right'"**>**备注**</****th****>**  
13.                         **<**thdata-options**thdata-options**="field:'YearTime', width:85,align:'right'"**>**年份**</****th****>**  
14.                     **</****tr****>**  
15.                 **</****thead****>**  
16.             **</****table****>**  
17.             **<****div** id="bar"**>**  
18.                 **<****ahref**ahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-edit" plain="true"onclick="editUser()"**>**修改数据**</****a****>**  
19.             **</****div****>**  
20.    
21.         **</****div****>**

表格属性里的的URL就是与一般处理程序交互用的。。

下面我们来看一般处理程序的书写，一般处理程序要首先接收由前台传过来的信息。

**\[csharp\]**   [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **public** **void** ProcessRequest(HttpContextcontext)  
2.        \{  
3.            **string** command =context.Request.QueryString\["test"\];//前台传的标示值  
4.            **if** (command == "add")  
5.            \{ //调用添加方法  
6.                Add(context);  
7.            \}  
8.            **else** **if** (command =="modify")  
9.            \{ //调用修改方法  
10.               Modify(context);  
11.           \}  
12.           **else**  
13.           \{ //调用查询方法  
14.               Query(context);  
15.           \}  
16.       \}

然后的话才是我们从一般处理程序来向数据库获取要显示的数据库数据

**\[csharp\]**   [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.   **public** **void** Query(HttpContext context)  
2.          \{  
3.  //调用B层的方法从而获取数据库的Dataset  
4.              DataSet ds =developmentRecordBLL.GetInputDevelopmentInfo();  
5.    //将Dataset转化为Datable  
6.              DataTable dt = ds.Tables\[0\];  
7.              **int** count = dt.Rows.Count;  
8.              **string** strJson =ToJson.Dataset2Json(ds, count);//DataSet数据转化为Json数据  
9.             context.Response.Write(strJson);//返回给前台页面  
10.             context.Response.End();  
11.    
12.         \}

然后我们来看下DataSet数据转化为Json数据的方法

**\[csharp\]**   [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **public** **class** ToJson  
2.      \{  
3.          \#region DataSet转换成Json格式  
4.          /// <summary>  
5.          /// DataSet转换成Json格式   
6.          /// </summary>   
7.          /// <paramname="ds">DataSet</param>  
8.          ///<returns></returns>   
9.          **public** **static** stringDataset2Json(DataSet ds, **int** total = -1)  
10.         \{  
11.             StringBuilder json = newStringBuilder();  
12.    
13.             **foreach** (DataTable dt **in** ds.Tables)  
14.             \{  
15.                //\{"total":5,"rows":\[  
16.                json.Append("\{\\"total\\":");  
17.                 **if** (total == -1)  
18.                 \{  
19.                     json.Append(dt.Rows.Count);  
20.                 \}  
21.                 **else**  
22.                 \{  
23.                     json.Append(total);  
24.                 \}  
25.                json.Append(",\\"rows\\":\[");  
26.                json.Append(DataTable2Json(dt));  
27.                 json.Append("\]\}");  
28.             \} **return** json.ToString();  
29.         \}  
30.         \#endregion  
31.   
32.         \#region dataTable转换成Json格式  
33.         /// <summary>   
34.         /// dataTable转换成Json格式   
35.         /// </summary>   
36.         /// <paramname="dt"></param>   
37.         ///<returns></returns>   
38.         **public** **static** stringDataTable2Json(DataTable dt)  
39.         \{  
40.             StringBuilder jsonBuilder = newStringBuilder();  
41.    
42.             **for** (**int** i = 0; i <dt.Rows.Count; i++)  
43.             \{  
44.                jsonBuilder.Append("\{");  
45.                 **for** (**int** j = 0; j <dt.Columns.Count; j++)  
46.                 \{  
47.                    jsonBuilder.Append("\\"");  
48.                    jsonBuilder.Append(dt.Columns\[j\].ColumnName);  
49.                    jsonBuilder.Append("\\":\\"");  
50.                    jsonBuilder.Append(dt.Rows\[i\]\[j\].ToString());  
51.                    jsonBuilder.Append("\\",");  
52.                 \}  
53.                 **if** (dt.Columns.Count > 0)  
54.                 \{  
55.                    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
56.                 \}  
57.                jsonBuilder.Append("\},");  
58.             \}  
59.             **if** (dt.Rows.Count > 0)  
60.             \{  
61.                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
62.             \}  
63.    
64.             **return** jsonBuilder.ToString();  
65.         \}  
66.         \#endregion dataTable转换成Json格式  
67.     \}

到这里我们就可以成功的将数据库中的数据显示到前台的DataGrid了。

下面我们来看下效果

![Center 1][]

到这里我们就可以将数据库中的数据在前台显示了。

# 总结 #

在easyui中datagrid的使用还是很重要的，在这里我们先简要的介绍下，使datagrid可以简单的显示一些数据，关于datagrid的进一步的知识我们在下篇博客中将继续进行介绍。

[view plain]: http://blog.csdn.net/zwk626542417/article/details/18839349#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/173640
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/173640/fork
[Center]: /images/20220823/16c12e3824de4c41964d7bcccd3490fe.png
[Center 1]: /images/20220823/66bae272b2334025917bda37c6fe9f45.png