4月22 -- 关于EasyUI
##搜索栏 <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 type="text" id="agentCode" name="agentCode" value="$!{bo.agentCode}"/> </td> <td 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" 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中展示出来
?