angularJs完成分页-白红宇

angularJs完成分页

阅读量：5329 次

发布时间：2019-06-14

本文共 17921 字，大约阅读时间需要 59 分钟。

POJOPage.java

package cn.com.mcd.util;

import java.io.Serializable;

import java.util.List;

public class PagesPojo<T> implements Serializable {

private static final long serialVersionUID = -5583579662704307696L;

private int curPage = 1; // 当前页

private int pageSize = 10; // 每页多少行

private int totalRow; // 共多少行

private int start;// 当前页起始行

private int end;// 结束行

private int totalPage; // 共多少页

private String sortColumn;//排序字段

private boolean sortDirection;//排序方向（）

/**分页数据**/

private List<T> pages;

public List<T> getPages() {

return pages;

}

public void setPages(List<T> pages) {

this.pages = pages;

}

public int getCurPage() {

return curPage;

}

public void setCurPage(int curPage) {

if (curPage < 1) {

curPage = 1;

} else {

start = pageSize * (curPage - 1);

}

end = start + pageSize > totalRow ? totalRow : start + pageSize;

this.curPage = curPage;

}

public int getStart() {

// start=curPage*pageSize;

return start;

}

public int getEnd() {

return end;

}

public int getPageSize() {

return pageSize;

}

public void setPageSize(int pageSize) {

this.pageSize = pageSize;

}

public int getTotalRow() {

return totalRow;

}

public void setTotalRow(int totalRow) {

totalPage = (totalRow + pageSize - 1) / pageSize;

this.totalRow = totalRow;

if (totalPage < curPage) {

if (totalPage != 0) curPage = totalPage;

end = totalRow;

}

start = pageSize * (curPage - 1);

end = start + pageSize > totalRow ? totalRow : start + pageSize;

}

public int getTotalPage() {

return this.totalPage;

}

public String getSortColumn() {

return sortColumn;

}

public void setSortColumn(String sortColumn) {

this.sortColumn = sortColumn;

}

public boolean isSortDirection() {

return sortDirection;

}

public void setSortDirection(boolean sortDirection) {

this.sortDirection = sortDirection;

}

javaBean

package cn.com.mcd.model;

import java.util.Date;

public class ItEquipmentMaintenance {

private Long id;

private String equipmentNo;

private String faCode;

private String equipmentCode;

private String equipmentName;

private String areaType;

private String equipmentType;

private String auditStatus;

private String comments;

private String createdBy;

private Date createdStamp;

public Long getId() {

return id;

}

public void setId(Long id) {

this.id = id;

}

public String getEquipmentNo() {

return equipmentNo;

}

public void setEquipmentNo(String equipmentNo) {

this.equipmentNo = equipmentNo == null ? null : equipmentNo.trim();

}

public String getFaCode() {

return faCode;

}

public void setFaCode(String faCode) {

this.faCode = faCode == null ? null : faCode.trim();

}

public String getEquipmentCode() {

return equipmentCode;

}

public void setEquipmentCode(String equipmentCode) {

this.equipmentCode = equipmentCode == null ? null : equipmentCode.trim();

}

public String getEquipmentName() {

return equipmentName;

}

public void setEquipmentName(String equipmentName) {

this.equipmentName = equipmentName == null ? null : equipmentName.trim();

}

public String getAreaType() {

return areaType;

}

public void setAreaType(String areaType) {

this.areaType = areaType == null ? null : areaType.trim();

}

public String getEquipmentType() {

return equipmentType;

}

public void setEquipmentType(String equipmentType) {

this.equipmentType = equipmentType == null ? null : equipmentType.trim();

}

public String getAuditStatus() {

return auditStatus;

}

public void setAuditStatus(String auditStatus) {

this.auditStatus = auditStatus == null ? null : auditStatus.trim();

}

public String getComments() {

return comments;

}

public void setComments(String comments) {

this.comments = comments == null ? null : comments.trim();

}

public String getCreatedBy() {

return createdBy;

}

public void setCreatedBy(String createdBy) {

this.createdBy = createdBy == null ? null : createdBy.trim();

}

public Date getCreatedStamp() {

return createdStamp;

}

public void setCreatedStamp(Date createdStamp) {

this.createdStamp = createdStamp;

}

controller.java

/**

* 分页查询所有22. IT设备维护(eps_it_equipment_maintenance)

* @param vendorinfo

* @param page

* @return

* @throws Exception

@RequestMapping(value = "/selectItEquipmentMaintenance", method = RequestMethod.POST)

@ResponseBody

public ResultModel selectItEquipmentMaintenance(@ModelAttribute ItEquipmentMaintenance itEquipmentMaintenance,@ModelAttribute PagesPojo<ItEquipmentMaintenance> page) throws Exception {

log.info(this.getClass().getName()+".selectItEquipmentMaintenance.start==itEquipmentMaintenance="+itEquipmentMaintenance+"========page="+page);

ResultModel resultModel = new ResultModel();

int count = purchaseItListService.countItEquipmentMaintenanceAll();

log.info(this.getClass().getName()+".selectItEquipmentMaintenance.count"+JSON.toJSONString(count));

List<ItEquipmentMaintenance> list=new ArrayList<ItEquipmentMaintenance>();

page.setTotalRow(count);

if(count>0){

list = purchaseItListService.selectItEquipmentMaintenance(page,itEquipmentMaintenance);

}

log.info(this.getClass().getName()+".selectItEquipmentMaintenance.list"+JSON.toJSONString(list));

page.setPages(list);

resultModel.setResultCode(Constants.SERVICE_SUCCESS_CODE);

resultModel.setResultMsg(Constants.DATA_BASE_SEARCH_SUCCESS_MSG);

resultModel.setResultData(page);

log.info(this.getClass().getName()+".selectItEquipmentMaintenance.end.resultModel="+resultModel);

return resultModel;

}

service.java

/**

* 分页查询22. IT设备

@Override

public List<ItEquipmentMaintenance> selectItEquipmentMaintenance(PagesPojo<ItEquipmentMaintenance> page,ItEquipmentMaintenance itEquipmentMaintenance) {

List<ItEquipmentMaintenance> result =new ArrayList<ItEquipmentMaintenance>();

try{

result = itEquipmentMaintenanceMapper.selectItEquipmentMaintenance(page,itEquipmentMaintenance);

}catch(DataBaseAccessException e){

log.error("getAllITRepairCostRecords itEquipment repair cost maintenance table fail",e);

throw new DataBaseAccessException("getAllITRepairCostRecords itEquipment repair cost maintenance table fail");

}

return result;

}

sql.xml

param1:第1个参数

param2：第二个参数

SELECT top (#{param1.pageSize})

from eps_it_equipment_maintenance

where

id not in (

select top (#{param1.start}) id

from eps_it_equipment_maintenance

order by ${param1.sortColumn}

ASC

</if>

DESC

</if>

)

and equipment_name = #{param2.equipmentName}

</if>

and area_type= #{param2.areaType}

</if>

and equipment_type = #{param2.equipmentType}

</if>

order by ${param1.sortColumn}

ASC

</if>

DESC

</if>

</select>

controller.js

/**

* 挑选商品页面的list table

$scope.page = {

curPage : 1,

pageSize : 10,

sortColumn : 'id',

sortDirection : true

};

$scope.gridOptionsGoods = {

paginationPageSizes: [10, 20, 30, 40, 50],

paginationPageSize: 10,

enableColumnMenus: false,

rowEditWaitInterval: -1,

enableHorizontalScrollbar: 0,

enableVerticalScrollbar: 0,

useExternalPagination: true,

useExternalSorting: true,

expandableRowTemplate:'angularjsMVC/master-data/it-equipment-list-maintenance/template/it-equipment-list-maintenance-common.html',

expandableRowHeight : 150,

columnDefs : [

{name : 'id',displayName: '序号',enableCellEdit : false,cellTooltip:function(row) { return row.entity.purchaseNo ;}},

{name : 'equipmentNo',displayName: 'IT设备编号',enableCellEdit : false,cellTooltip:function(row) { return row.entity.purchaseName ;}},

{name : 'equipmentName',displayName: '设备名称',enableCellEdit : false,cellTooltip:function(row) { return row.entity.auditStatus ;}},

{name : 'areaType',displayName: '设备所用区域分类',enableCellEdit : false,cellTooltip:function(row) { return row.entity.auditStatus ;}},

{name : 'areaType',displayName: '设备分类',enableCellEdit : false,cellTooltip:function(row) { return row.entity.auditStatus ;}}

onRegisterApi : function(gridApi) {

$scope.gridApi = gridApi;

$scope.gridApi.core.on.sortChanged($scope,$scope.page,function(grid, sortColumns) {

if (sortColumns.length != 0) {

if (sortColumns[0].sort.direction == 'asc')

$scope.page.sortDirection = true;

if (sortColumns[0].sort.direction == 'desc')

$scope.page.sortDirection = false;

$scope.page.sortColumn = sortColumns[0].displayName;

ItEquipmentCommonService.queryGoodsByPage($scope,$scope.page);

}

});

gridApi.pagination.on.paginationChanged($scope,function(newPage, pageSize) {

$scope.page.curPage = newPage;

$scope.page.pageSize = pageSize;

ItEquipmentCommonService.queryGoodsByPage($scope,$scope.page);

});

gridApi.selection.on.rowSelectionChanged($scope, function(row) {

var msg = 'row selected '+ row.isSelected;

});

gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows) {

var msg = 'rows changed '+ rows.length;

});

}

service.js

/**查询被挑选的商品**/

this.queryGoodsByPage = function(scope) {

var purchasemaintainData = {

'equipmentName': scope.equipmentName,

'areaType': scope.areaType.id,

'equipmentType': scope.equipmenttype.id,

};

var pages = [];

pages.push(purchasemaintainData);

scope.page.pages = pages;

http({

method: 'POST',

url: 'purchasemaintain/queryAllbyNumberandNameandAuditstatus',

data: scope.page,

}).success(function(data){

scope.gridOptionsGoods.totalItems = data.resultData.totalRow;

scope.gridOptionsGoods.data = data.resultData.pages;

scope.page = data.resultData;

}).error(function(data){

alert("fail");

});

};

html页面

<div class="panel-heading">{

{titleText}}</div>

</div>

</div>

<label class="control-label">项目负责人</label>

</div>

<ui-select ng-model="pro.selected" theme="bootstrap" ng-change="change()" search-enabled="searchEnabled" ng-disabled="disabled" style="width: 150px;" title="Choose a proNo">

<ui-select-match placeholder="Please select">{

{$select.selected.purchaseNo}}</ui-select-match>

<ui-select-choices repeat="pro in proNoesList | propsFilter: {purchaseNo: $select.search, purchaseName: $select.search}">

<!-- {

{pro.purchaseNo +'-'+pro.purchaseName}} -->

</ui-select-choices>

</ui-select>

</div>

<label ng-model="name" ng-disabled="isDisable" type="text" class="form-control">{

{pro.selected.purchaseName}}</label>

</div>

<label ng-model="address" ng-disabled="isDisable" type="text" class="form-control">{

{pro.selected.projectLeader}}</label>

</div>

</div>

</div>

</div>

</div>

<label type="text" class="form-control">{

{pro.selected.startTime |date:'yyyy-MM-dd'}}</label>

</div>

<label type="text" class="form-control">{

{pro.selected.endTime |date:'yyyy-MM-dd'}}</label>

</div>

</div>

<textarea class="form-control" rows="4" placeholder="填写备注" name="checkInfo" value="pro.selected.remark">{

{pro.selected.remark}}</textarea>

</div>

<!-- 上传文件标签 <label for="file" class="btnSelf btn btn-info">上传文件</label>

<label class="control-label">已上传附件：</label>

<label ng-model="name" class="control-label">{

{file}}*****</label>

</div>

<label class="control-label">SI工程师人数：</label>

</div>

<label class="control-label" >差旅无住宿天数：</label>

</div>

<label class="control-label">差旅住宿天数：</label>

</div>

</div>

</div>

</div>

</div>

<label class="control-label" >大工程运输费：</label>

</div>

<label class="control-label">standby工时：</label>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<label class="control-label">设备所用区域：</label>

</div>

</div>

</div>

<ui-select ng-model="areaType.id" theme="bootstrap" ng-change="change()" search-enabled="searchEnabled" style="width: 150px;" title="Choose a areaType">

<ui-select-match placeholder="Please select">{

{$select.selected.area}}</ui-select-match>

<ui-select-choices repeat="areaType in areaTypes | propsFilter: {id: $select.search, area: $select.search}">

<!-- {

{areaType.area +'-'+areaType.id}} -->

</ui-select-choices>

</ui-select>

</div>

<ui-select ng-model="equipmenttype.id" theme="bootstrap" ng-change="change()" search-enabled="searchEnabled" style="width: 150px;" title="Choose a equipmenttype">

<ui-select-match placeholder="Please select">{

{$select.selected.type}}</ui-select-match>

<ui-select-choices repeat="equipmenttype in equipmenttypes | propsFilter: {id: $select.search, code :$select.search, type: $select.search}">

<!-- {

{areaType.area +'-'+areaType.id}} -->

</ui-select-choices>

</ui-select>

</div>

</div>

</form>