|
最近難得公司業(yè)務(wù)稍微緩解一些，我們終于有時(shí)間靜下心總結(jié)下技術(shù)，對(duì)于之前的項(xiàng)目去其糟粕取其精華，我們的目的是：
這里我先總結(jié)下我這塊針對(duì)數(shù)據(jù)列表頁(yè)的做法，后續(xù)再補(bǔ)充其它模塊的做法，先看下列表頁(yè)的需求：
if(!StringUtils.isEmpty(employeeEnityRequest.getEmployeeName())){ criteria.andEmployeeNameEqualTo(employeeEnityRequest.getEmployeeName()); } if(!StringUtils.isEmpty(employeeEnityRequest.getEmployeeStatus())){ criteria.andEmployeeStatusEqualTo(Integer.valueOf(employeeEnityRequest.getEmployeeStatus())); }
上面這兩需求非常常規(guī)，有很多種實(shí)現(xiàn)方式，我分享下我的做法（我的環(huán)境是eclipse,tomcat,maven,spring mvc, mybatise,mysql）： 針對(duì)動(dòng)態(tài)查詢，我們通過(guò)約定規(guī)則來(lái)實(shí)現(xiàn)，比如View中我們可以這樣寫(xiě) <input type="text" name="WHERE.storeName.LIKE" class="form-control" style="width: 180px;" " />
它的意思是查詢email字段，操作符是=號(hào)。WHERE是固定的，后臺(tái)解析收集條件時(shí)做識(shí)別作用，中間的是字段名稱，后面是操作符，操作符比如有EQ,LIKE等常規(guī)的數(shù)據(jù)庫(kù)查詢操作符。這樣我們可以在前端任意增加修改條件，而后臺(tái)的邏輯是不需要有任務(wù)變更的，詳細(xì)的收集過(guò)程請(qǐng)看本文后面的介紹。 @RequestMapping(value = "/getStoreByPage", method = RequestMethod.POST) @ResponseBody public PageInfo<BcStore> getStoreByPage(HttpServletRequest request,int pageNum, int pageSize) { js  $.ajax({ type : "POST", url : url, dataType : 'json', data:$("#searchForm").serialize(), async : false, success : function(data) { $scopeLocal.pageResponse = data; $scopeLocal.content=data.list; } });
private static String DEFAULT_PRE_WHERE = "WHERE."; private String preWhere = DEFAULT_PRE_WHERE; List<String> searchFilterStrings = Lists.newArrayList(); Map<String, String[]> map = request.getParameterMap(); for (Map.Entry<String, String[]> entry : map.entrySet()) { String strKey = entry.getKey(); for (String value : entry.getValue()) { if (!Strings.isNullOrEmpty(value) && !"none".equals(value) && strKey.startsWith(preWhere)) { String filedAndOp = strKey.substring(preWhere.length()); searchFilterStrings.add(String.format("%s.%s", filedAndOp, value)); } } }
<table id="datatable1" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover"> <thead> <tr> <th>門(mén)店編號(hào)</th> <th>名稱</th> <th>類型</th> <th>店長(zhǎng)</th> <th>電話</th> <th>郵箱</th> <th>狀態(tài)</th> <th>創(chuàng)建時(shí)間</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="store in content"> <td>{{store.storeCode}}</td> <td>{{store.storeName}}</td> <td> <div ng-show="store.storeType=='1'"> <span class="label label-success">自營(yíng)店</span> </div> <div ng-show="store.storeType=='0'"> <span class="label label-danger">加盟店</span> </div> </td>
<pagination class="pagination-sm" ng-model="pageRequest.pageNum" total-items="pageResponse.total" max-size="4" ng-change="pageRequest.getResponse()" items-per-page="pageRequest.pageSize" rotate="false" previous-text="上一頁(yè)" next-text="下一頁(yè)" ></pagination>
var mainApp = angular.module('storeManageApp',['ui.bootstrap']); $.initListService(mainApp); mainApp.controller('storeManageCtrl', function ($scope, $http,$listService) { var listUrl="<c:url value="/store/getAllByPage"/>"; $listService.init($scope,listUrl); $listService.get(); }); angularjs的注入做的不錯(cuò)，我們封裝的js也參考了angularjs提供的service模式來(lái)完成：由于這個(gè)service是需要angular對(duì)象的，所以做了一個(gè)jquery的擴(kuò)展函數(shù)，便于調(diào)用，函數(shù)里面的代碼就比較簡(jiǎn)單的，常規(guī)的service寫(xiě)法，這里指出下，ajax提交后臺(tái)的參數(shù)我沒(méi)有采用data參數(shù)，而是直接拼接在url上，如果放在data上應(yīng)該加了那個(gè)contentType。  jQuery.extend({ initListService: function(mainApp) { mainApp.service('$listService', function(){ var $scopeLocal={}; this.init = function($scope,listUrl) { $scopeLocal=$scope; $scopeLocal.pageRequest = { "pageNum": 1, "pageSize": "5" }; $scopeLocal.pageRequest.getResponse = function () { var requestData = $("#searchForm").serialize(); var url = listUrl+"?"+requestData+"&pageNum="+$scopeLocal.pageRequest.pageNum; $.ajax({ type : "POST", url : url, dataType : 'json', async : false, success : function(data) { $scopeLocal.pageResponse = data; $scopeLocal.content=data.list; } }); } this.get = function() { $scopeLocal.pageRequest.getResponse(); }; } }); } });
最后上一個(gè)列表頁(yè)的效果圖： 功能看起來(lái)不錯(cuò)，但還有一些不完善的，比如應(yīng)該提供幾個(gè)數(shù)據(jù)加載事件便于在數(shù)據(jù)加載前后做些特殊的處理操作。但是一個(gè)好的開(kāi)始，后續(xù)團(tuán)隊(duì)成員只要參考這個(gè)模板來(lái)做效率上會(huì)提升一部分，當(dāng)然提升效率不光是這篇文章中介紹的，我們還有權(quán)限過(guò)濾的集成，各類控件的封裝等等功能。 |
|
|
來(lái)自： 昵稱10504424 > 《工作》
