4月22 -- 关于EasyUI

最近，在项目中用到JQuery EasyUI DataGrid，它封装了表格的实现，为我们提供很多便利，让我们的开发速度有了一定的提高。（PS：我用的是spring MVC 框架 和velocity）.  

  注：这里简单的提下解释下velocity。velocity是基于java的一种页面模板引擎，支持#if #else #foreach等写法的前台文件。$link.contextPath是该引擎支持的一种默认写法，可以取得应用程序执行根路径。

Velocity是一个基于java的模板引擎（template engine）。它允许任何人仅仅简单的使用模板语言（template language）来引用由java代码定义的对象。 当Velocity应用于web开发时，界面设计人员可以和java程序开发人员同步开发一个遵循MVC架构的web站点，也就是说，页面设计人员可以只 关注页面的显示效果，而由java程序开发人员关注业务逻辑编码。Velocity将java代码从web页面中分离出来，这样为web站点的长期维护提 供了便利，同时也为我们在JSP和PHP之外又提供了一种可选的方案。 Velocity的能力远不止web站点开发这个领域，例如，它可以从模板（template）产生SQL和PostScript、XML，它也可以被当 作一个独立工具来产生源代码和报告，或者作为其他系统的集成组件使用。Velocity也可以为Turbine web开发架构提供模板服务（template service）。Velocity+Turbine提供一个模板服务的方式允许一个web应用以一个真正的MVC模型进行开发。

 

好的，Velocity不是今天的重点，下面开始easyUI

1、数据的提取和显示

 

    ##搜索栏

        <div id="searchAccountBar" style="padding:5px;height:auto">
            <form action="/dcs/yng/finance/all_account_balance/list.do" method="post" id="accountSearchForm">
                <table>
                    <tr>
                        <td class="align-right">经销商代码：</td>
                        <td>
                            <input class="text-input small-input" type="text" id="agentCode" name="agentCode"
                                   value="$!{bo.agentCode}"/>
                        </td>
                        <td class="align-right">经销商全称：</td>
                        <td>
                            <input class="text-input small-input" type="text" id="agentName" name="agentName"
                                   value="$!bo.agentName"/>
                        </td>
                    <tr>
                            <button type="button" id="search">查询</button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>

 上面是我们普通的搜索栏代码，下面这段代码，是table数据展示，easyui有许多封装好的属性，非常方便，我们可以根据自己的需要，来搭配属性。

 

 

<table id="accountSearchTable" class="easyui-datagrid" title="" style="height:500px"
               data-options="rownumbers:true,
               singleSelect:true,    ##单选
               url:'/dcs/yng/finance/all_account_balance/list_json.do',       ##链接
               toolbar:'#searchAccountBar'"  ##搜索及工具栏
               pagination="true"      ##翻页
               rownumbers="true"
               showFooter="true"
               fitColumns="false">
            <thead data-options="frozen:true">     ##表头

            <tr>
                <th data-options="field:'agentName',width:225,align:'center'">经销商全称</th>
            </tr>
            </thead>
            <thead>
            <tr>
                <th data-options="field:'agentCode',width:70,align:'center'">经销商代码</th>

                <th data-options="field:'agentName',width:72,align:'center'" formatter="formatPrice">经销商名称</th>
            </tr>
            </thead>
        </table>

 这里的url,就是请求链接,当我们点击之前上面的搜索栏里，查询按钮时，就会触发我下面这个js的点击事件，然后easyui，就会根据我们配的属性，将搜索栏的参数，一起通过url,发送到后台。

 

 

$("#search_account_btn_json").click(function () {
            $('#accountSearchTable').datagrid('load', {
                agentCode:$('#agentCode').val(),
                agentName:$('#agentName').val()
            });
        });

 easyui 里的DataGrid,就是通过url获取数据的，。它获取的数据返回的要是json字串。JSON字串必须按照DataGrid定义的数据格式进行拼装。特别强调的是，JSON字串中的total域的值是数据的条数，用于数据的分页。

@RequestMapping("/dcs/yng/finance/all_account_balance/list_json")  
  public @ResponseBody
    JSONObject listJson(AgentAccountBO bo,Integer page, Integer rows, Model model, HttpServletRequest request, HttpServletResponse response) {

        JSONObject json = new JSONObject();
        
        List<AgentAccountBO> list = agentAccountYNGService.query(bo);
        
        
        JsonBinder binder = JsonBinder.buildNonNullBinder();
        String beanString = binder.toJson(list);

        json.put("rows", (null != list && !list.isEmpty())?beanString:"");
        json.put("total", list.size());
      

        return json;
    }

 上面这段代码，就是将list数据，拼成DataGrid定义的数据格式，数据的分页分为前台分页和后台分页，前台分页，DataGrid已经封装好了。 DataGrid定义了两个参数: rows(每页的条数)，page(当前的页数)，这两个参数分别对应属性pageSize，pageNumber。用户可以在 pageSize，pageNumber属性中设置，也可以不设置，这样就取默认值。获取数据后，DataGrid就会刷新，将后台数据在table中展示出来