初学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，都差不多