概要

        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>  

表格屬性里的的URL就是與一般處理程序交互用的。。

下面我們來看一般處理程序的書寫，一般處理程序要首先接收由前臺傳過來的信息。

    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();  

        }  

然后我們來看下DataSet數據轉化為Json數據的方法

    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格式  
        }  

到這里我們就可以成功的將數據庫中的數據顯示到前臺的DataGrid了。

下面我們來看下效果

到這里我們就可以將數據庫中的數據在前臺顯示了。

總結

       在easyui中datagrid的使用還是很重要的，在這里我們先簡要的介紹下，使datagrid可以簡單的顯示一些數據。

來自：http://blog.csdn.net/zwk626542417/article/details/18839349