項目總結—jQuery EasyUI- DataGrid使用

概要

        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>                                <thfield="firstname" width="50">定性指標層級</th>                                <thfield="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>//工具列按鈕                    <divid="toolbar">                        <ahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-add" plain="true"onclick="newUser()">添加</a>                        <ahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-edit" plain="true"onclick="editUser()">修改</a>                        <ahref="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-options="field:'DepartmentName',width:100">單位名稱</th>                        <thdata-options="field:'QuantyOriginalData',width:100">定量未經處理資料</th>                        <thdata-options="field:'QualityOriginalData',width:100">定性未經處理資料</th>                        <thdata-options="field:'Remarks', width:175,align:'right'">備忘</th>                        <thdata-options="field:'YearTime', width:85,align:'right'">年份</th>                    </tr>                </thead>            </table>            <div id="bar">                <ahref="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可以簡單的顯示一些資料，關於datagrid的進一步的知識我們在下篇部落格中將繼續進行介紹。