欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

4月22 -- 关于EasyUI

程序员文章站 2022-05-19 08:17:54
...

最近,在项目中用到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中展示出来

 

相关标签: easyui