<返回上一级
jQuery EasyUI- DataGrid控件的使用
EasyUI

概要
 jQuery EasyUI是一个基于jquery的集成了各种用户界面的框架,使用easyui我们不需要写太多javascript代码,一般情况下我们只需要使用一些html标记来定义用户接口,easyui将我们需要的功能都已经封装好了,我们只要来调用easyui给我们提供的接口就可以了,今天我们来学习下easyui中的DataGrid
 
数据显示
我们可以在easyui-datagrid中显示数据,显示数据从大类上我们也分为两种,一种是datagrid显示的数据不是来自于数据库,另一种就是将数据库的内容进行显示.
 
第一种
这一种是直接将写好的内容放到前台界面上写,所以相对来说比较简单,我们来看下前台代码的书写.
 

01 <table id="dg"title="定性指标基础信息" class="easyui-datagrid"style="width:900px; height: 400px; padding-left: 200px;"url="get_users.php"toolbar="#toolbar" pagination="true" 
02                        rownumbers="true"fitcolumns="true"singleselect="true"
03     
04                         <thead
05 //设置列名 
06                             <tr
07                                 <thfieldthfield="firstname"width="50">定性指标级别</th
08                                 <thfieldthfield="lastname"width="50">分数</th
09                             </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                     <dividdivid="toolbar"
37                         <ahrefahref="javascript:void(0)"class="easyui-linkbutton"iconcls="icon-add" plain="true"onclick="newUser()">添加</a
38                         <ahrefahref="javascript:void(0)"class="easyui-linkbutton"iconcls="icon-edit" plain="true"onclick="editUser()">修改</a
39                         <ahrefahref="javascript:void(0)"class="easyui-linkbutton"iconcls="icon-remove"plain="true"onclick="destroyUser()">删除</a
40                     </div>

 
 
下面这是效果图
 
第二种
这种是将我们数据库中的内容显示到前台,我们经过一般处理程序从数据库中将数据提取出来,然后将数据显示到DataGrid中。
 
在这里需要注意的是,我们从数据库中取出来的内容是表格形式的dataset或datatable,而前台DataGrid接收的数据是固定格式的Json格式数据,所以我们需要将表格形式的数据转化为DataGrid需要的固定格式的Json格式数据。
 

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 ]}


 
 
下面我们来看下怎么样将数据库中的数据显示到前台的具体过程,
 
首先是前台页面的书写:
 

01 <div id="tt"class="easyui-tabs"style="width: 1100px; height: 530px;margin-top: 15px"
02         <divtitle="已录入单位"style="padding: 10px"
03             <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'," 
04                 toolbar="#bar"pagination="true" rownumbers="true"fitcolumns="true"striped="true"singleselect="true"
05     
06                 <thead
07                    <%--设置绑定表格的列名,列名与数据库相同--%> 
08                     <tr
09                         <thdata-optionsthdata-options="field:'DepartmentName',width:100">单位名称</th
10                         <thdata-optionsthdata-options="field:'QuantyOriginalData',width:100">定量原始数据</th
11                         <thdata-optionsthdata-options="field:'QualityOriginalData',width:100">定性原始数据</th
12                         <thdata-optionsthdata-options="field:'Remarks', width:175,align:'right'">备注</th
13                         <thdata-optionsthdata-options="field:'YearTime', width:85,align:'right'">年份</th
14                     </tr
15                 </thead
16             </table
17             <divid="bar"
18                 <ahrefahref="javascript:void(0)"class="easyui-linkbutton"iconcls="icon-edit"plain="true"onclick="editUser()">修改数据</a
19             </div
20     
21         </div>

 
 
表格属性里的的URL就是与一般处理程序交互用的。。
 
 
下面我们来看一般处理程序的书写,一般处理程序要首先接收由前台传过来的信息。

01 public voidProcessRequest(HttpContextcontext) 
02       
03           stringcommand =context.Request.QueryString["test"];//前台传的标示值 
04           if(command == "add"
05           {//调用添加方法 
06               Add(context); 
07           
08           else if(command =="modify"
09           {//调用修改方法 
10               Modify(context); 
11           
12           else 
13           {//调用查询方法 
14               Query(context); 
15           
16       }


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

01 public voidQuery(HttpContext context)