初學EasyUI datagrid：如何用datagrid進行數據的查詢

也許在我們接觸EasyUi前看到類似於以下圖片的排版時，會覺得很高端。事實上，這利用到一個插件，即EasyUI，而數據這麼排列是用到了數據網格datagrid。（圖是轉的）

接下來將講講如何利用數據網格將數據這麼顯示出來。

首先，通常jsp中都會有這麼一些代碼：

<table id="tt" title="Formatting Columns" class="easyui-datagrid" style="width:550px;height:250px"    
        url="data/datagrid_data.json"    
        singleSelect="true" iconCls="icon-save">    
    <thead>    
        <tr>    
            <th field="itemid" width="80">Item ID</th>    
            <th field="productid" width="80">Product ID</th>    
            <th field="listprice" width="80" align="right" formatter="formatPrice">List Price</th>    
            <th field="unitcost" width="80" align="right">Unit Cost</th>    
            <th field="attr1" width="100">Attribute</th>    
            <th field="status" width="60" align="center">Stauts</th>    
        </tr>    
    </thead>    
</table>

這就是數據網格的模板，而Item ID、Product ID、List Price...就是我們所看到的那一行。

至於table中的屬性見詳細文檔。

那個數據網格是怎麼調轉到anction層 或是servlet的呢？這就離不開datagrid中的url="data/datagrid_data.json"，這就是要調轉的鏈接。也就說當我們打開這jsp時，會先執行這鏈接的內容，查詢數據庫之類的...，然後將數據顯示在jsp頁面上。

今天就先到這了..明白有對EasyUI更深入的瞭解再補充。

-------------------------------------------------------------------------------------------------------------------------------------------------

以上是我對datagrid 數據查詢的初步認識。今天真正實現了這個功能，請讓我爲大家貼上代碼

首先涉及到的文件：struts.xml、WorkAction.java、workList.jsp

struts.xml主要代碼如下：

  

 <package name="work" extends="json-default">
        <action name="workList" class="com.bossin.work.action.WorkAction" method="execute">
            <result name="success" type="json">
                 <param name="root">resultObj</param>
            </result>
            
        </action>        
    </package>

注意：這裏package繼承的不再是“struts-default”，而是"json-default"

WorkAction.java代碼如下：

public class WorkAction extends ActionSupport{
    private WorkService ws = new WorkServiceImpl();
    private JSONObject resultObj = null;

    public JSONObject getResultObj() {
        return resultObj;
    }

    public void setResultObj(JSONObject resultObj) {
        this.resultObj = resultObj;
    }

    public String execute(){ 
        List<Works> list = ws.getWorks(year, work_name, work_author);
        JSONObject data = new JSONObject();
        if(null!=list && !list.isEmpty()){
            JSONArray rows = JSONArray.fromObject(list); //將list轉成json字符串
            System.out.println(rows);
            data.put("total", list.size()); 
            data.put("rows", rows);
            setResultObj(data);
        }
            else{
                data.put("total", 0);
                data.put("rows", "[]");
                setResultObj(data);


        }
            
            return "success";
    }

}

一定要寫get、set方法，爲的是把resultObj返回到jsp，也就是數據網格下

重頭戲：workList.jsp代碼如下：

 

   <!-- 數據網格 -->
    <div region="center" border="false">
        <table id="dataGrid" title="作品列表" class="easyui-datagrid"
            url="<%=request.getContextPath()%>/workList.action"
            toolbar="#toolbar" pagination="true" rownumbers="true" pageSize="20"
            border="false" fit="true" fitColumns="true" singleSelect="false"
            idField="id" sortName="id" sortOrder="desc" >
            <thead>
                <tr>
                    <th field="id" checkbox="true" align="center"></th>
                    <th field="year" sortable="true",sortOrder="asc" align="center" width="50">年份</th>
                    <th field="workName" sortable="true",sortOrder="asc" align="center" width="150">作品名</th>
                    <th field="author" sortable="true",sortOrder="asc" align="center" width="50">作者</th>
                    <th field="meaning" sortable="true",sortOrder="asc" align="center" width="150">設計含義</th>
                    <th field="minImgUrl" sortable="true",sortOrder="asc" align="center" width="100">小圖鏈接</th>
                    <th field="img1" sortable="true",sortOrder="asc" align="center" width="100">作品鏈接1</th>
                    <th field="img2" sortable="true",sortOrder="asc" align="center" width="100">作品鏈接2</th>
                    <th field="img3" sortable="true",sortOrder="asc" align="center" width="100">作品鏈接3</th>

                </tr>
            </thead>
        </table>
    </div>

這裏的field="year"、 field="img3"這些一定要數據庫中表的字段對應。這裏我用的是class方式來渲染，喜歡用js的也可用js，都差不多