概要

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

数据显示

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

第一种

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

    <table id="dg"title="定性指标基础信息" class="easyui-datagrid" style="width:900px; height: 400px; padding-left: 200px;" url="get_users.php"toolbar="#toolbar" pagination="true"                               rownumbers="true" fitcolumns="true"singleselect="true">                                         <thead>        //设置列名                                    <tr>                                        <thfieldthfield="firstname" width="50">定性指标级别</th>                                        <thfieldthfield="lastname" width="50">分数</th>                                    </tr>                                </thead>        //数据填充                                <tbody>                                    <tr>                                       <td>优秀</td>                                       <td>100</td>                                    </tr>                                    <tr>                                       <td>良好</td>                                       <td>80</td>                                    </tr>                                             <tr>                                       <td>一般</td>                                       <td>60</td>                                                                          </tr>                                    <tr>                                       <td>较差</td>                                        <td>50</td>                                                                        </tr>                                         </tbody>                            </table>        //工具栏按钮                            <dividdivid="toolbar">                                <ahrefahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-add" plain="true"onclick="newUser()">添加</a>                                <ahrefahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-edit" plain="true"onclick="editUser()">修改</a>                                <ahrefahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-remove" plain="true"onclick="destroyUser()">删除</a>                            </div>  

下面这是效果图

第二种

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

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

    {"total":28,"rows":[        {"产品ID":"FI-SW-01","产品名称":"Koi","价格":10.00,"状态":"P"},        {"产品ID":"K9-DL-01","产品名称":"Dalmation","价格":12.00,"状态"":"P"},        {"产品ID":"RP-SN-01","产品名称":"Rattlesnake","价格":12.00,"状态"":"P"},        {"产品ID":"RP-SN-01","产品名称":"Rattlesnake","价格":12.00,"状态"":"P"},        {"产品ID":"RP-LI-02","产品名称":"Iguana","价格":12.00,"状态"":"P"},        {"产品ID":"FL-DSH-01","产品名称":"Manx","价格":12.00,"状态"":"P"},        ]}  

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

首先是前台页面的书写：

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

    public void ProcessRequest(HttpContextcontext)              {                  string command =context.Request.QueryString["test"];//前台传的标示值                  if (command == "add")                  {//调用添加方法                      Add(context);                  }                  else if (command =="modify")                  {//调用修改方法                      Modify(context);                  }                  else                  {//调用查询方法                      Query(context);                  }              }  

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

    public class ToJson            {                #region DataSet转换成Json格式                /// <summary>                /// DataSet转换成Json格式                 /// </summary>                 /// <paramname="ds">DataSet</param>                ///<returns></returns>                 public static stringDataset2Json(DataSet ds, int total = -1)                {                    StringBuilder json = newStringBuilder();                             foreach (DataTable dt in ds.Tables)                    {                       //{"total":5,"rows":[                       json.Append("{\"total\":");                        if (total == -1)                        {                            json.Append(dt.Rows.Count);                        }                        else                        {                            json.Append(total);                        }                       json.Append(",\"rows\":[");                       json.Append(DataTable2Json(dt));                        json.Append("]}");                    } return json.ToString();                }                #endregion                        #region dataTable转换成Json格式                /// <summary>                 /// dataTable转换成Json格式                 /// </summary>                 /// <paramname="dt"></param>                 ///<returns></returns>                 public static stringDataTable2Json(DataTable dt)                {                    StringBuilder jsonBuilder = newStringBuilder();                             for (int i = 0; i <dt.Rows.Count; i++)                    {                       jsonBuilder.Append("{");                        for (int j = 0; j <dt.Columns.Count; j++)                        {                           jsonBuilder.Append("\"");                           jsonBuilder.Append(dt.Columns[j].ColumnName);                           jsonBuilder.Append("\":\"");                           jsonBuilder.Append(dt.Rows[i][j].ToString());                           jsonBuilder.Append("\",");                        }                        if (dt.Columns.Count > 0)                        {                           jsonBuilder.Remove(jsonBuilder.Length - 1, 1);                        }                       jsonBuilder.Append("},");                    }                    if (dt.Rows.Count > 0)                    {                       jsonBuilder.Remove(jsonBuilder.Length - 1, 1);                    }                             return jsonBuilder.ToString();                }                #endregion dataTable转换成Json格式            }