DT Grid 表格控件
洪国兴
http://demo.mycodes.net/chajian/jquery.dtGrid/doc/i18n/zh-cn/index.html
https://github.com/dlshouwen/dtgrid
<!-- DtGrid中使用MapUtils处理查询参数 -->
<dependency>
<groupId>commons-collections</groupId>
<artifactId>commons-collections</artifactId>
<version>3.2.1</version>
</dependency>步骤1创建HTML
在html 按照顺序引入 下列
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- jQuery -->
<script type="text/javascript" src="js/baobiao/dependents/jquery/jquery.min.js"></script>
<!-- bootstrap -->
<script type="text/javascript" src="js/baobiao/dependents/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/baobiao/dependents/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="js/baobiao/dependents/fontAwesome/css/font-awesome.min.css" media="all" />
<!-- dtGrid -->
<script type="text/javascript" src="js/baobiao/jquery.dtGrid.js"></script>
<script type="text/javascript" src="js/baobiao/i18n/zh-cn.js"></script>
<link rel="stylesheet" type="text/css" href="js/baobiao/jquery.dtGrid.css" />
<!-- datePicker -->
<script type="text/javascript" src="js/baobiao/dependents/datePicker/WdatePicker.js" defer="defer"></script>
<link rel="stylesheet" type="text/css" href="js/baobiao/dependents/datePicker/skin/WdatePicker.css" />
<link rel="stylesheet" type="text/css" href="js/baobiao/dependents/datePicker/skin/default/datepicker.css" />
<script src="js/index.js"></script>
<!--<script src="js/index2.js"></script>-->
</head>
<body>
<div class="clearfix">
<div id="dtGridContainer" class="dt-grid-container"></div>
<div id="dtGridToolBarContainer" class="dt-grid-toolbar-container"></div>
</div>
</div>
</body>
</html>步骤2创建JS
创建 JS
# 想要使用快速搜索功能，需要在接口中添加搜索方法，通过 fastQueryParameters （快速查询参数列表）
# 进行条件取值
var dtGridColumns = [{
id: 'id',
title: '订单编号',
type: 'number',
headerClass: 'text-left width-10',
columnClass: 'text-left width-10',
fastQuery: true,
fastQueryType:"eq"
}, {
id: 'name',
title: '名字',
type: 'string',
headerClass: 'text-center width-50',
columnClass: 'text-center width-50',
fastQuery: true,
fastQueryType:"eq"
}, {
id: 'age1',
title: '岁数',
type: 'string',
headerClass: 'text-center width-50',
columnClass: 'text-center width-50',
resolution: function(value, record, column, grid, dataNo, columnNo) {
var content = "";
content += '<a href="javascript:;" class="btn btn-default btn-sm m-r-10" style="cursor: not-allowed;">' +
'<i class="fa fa-sm fa-jpy"></i> 收款 </a>';
content += '<a href="#editModal" data-toggle="modal" class="btn btn-sm btn-info" data-dataNo="' + dataNo + '"><i class="fa fa-eye"></i> 查看 </a>';
return content;
}
}];
var dtGridOption = {
lang: 'zh-cn',
ajaxLoad: true,
loadURL: '/demo',
exportFileName: '门店订单列表',
columns: dtGridColumns,
gridContainer: 'dtGridContainer',
toolbarContainer: 'dtGridToolBarContainer',
tools: 'refresh|faseQuery|export[excel]',
pageSize: 10,
pageSizeLimit: [10, 20, 50],
ncColumnsType:{long:["ordersSn","paySn"],int:["ordersState","ordersType"],Timestamp:["createTime","paymentTime","finishTime"]}
// exportURL : ncGlobal.adminRoot + 'chain/orders/export'
};
var grid = $.fn.DtGrid.init(dtGridOption);
//当模态框加载完成以后触发下列事件
$('#editModal').on('show.bs.modal', function (event) {
//获取接受事件的元素
var button = $(event.relatedTarget);
//获取data 参数
var datano = button.data('no');
var modal = $(this);
//绑定日历控件
modal.find('input[name="birthday"]').bind("click", function () {
WdatePicker({maxDate: '%y-%M-%d'})
});
});
$(function () {
//加载列表
grid.load();
});步骤3 创建后台实体类
/**
*
* 后台表格
*/
@JsonIgnoreProperties(ignoreUnknown = true)
public class DtGrid {
/**
* 是否导出
*/
private boolean isExport;
/**
* 是否出错
*/
private boolean isSuccess = true;
/**
* 每页显示条数
*/
private Integer pageSize;
/**
* 开始记录数
*/
private Integer startRecord;
/**
* 当前页数
*/
private Integer nowPage;
/**
* 记录总数
*/
private long recordCount;
/**
* 总页数
*/
private Integer pageCount;
/**
* 参数列表
*/
private Map<String, Object> parameters;
/**
* 快速查询参数列表
*/
private Map<String, Object> fastQueryParameters;
private List<String> advanceQueryConditions;
/**
* 带占位符的HQL
*/
@JsonIgnore
private String whereHql;
/**
* order语句
*/
@JsonIgnore
private String sortHql;
/**
* 经过整理的where条件
*/
@JsonIgnore
private List<Object> arguments;
/**
* 字段类型标识
*/
private HashMap<String, ArrayList> ncColumnsType;
/**
* 解析后的字段类型标识
*/
private HashMap<String, String> ncColumnsTypeList;
/**
* 显示数据集
*/
private List<Object> exhibitDatas;
public boolean getIsSuccess() {
return isSuccess;
}
public void setIsSuccess(boolean isSuccess) {
this.isSuccess = isSuccess;
}
public boolean getIsExport() {
return isExport;
}
public void setIsExport(boolean isExport) {
this.isExport = isExport;
}
public Integer getPageSize() {
return pageSize;
}
public void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
}
public Integer getStartRecord() {
return startRecord;
}
public void setStartRecord(Integer startRecord) {
this.startRecord = startRecord;
}
public Integer getNowPage() {
return nowPage;
}
public void setNowPage(Integer nowPage) {
this.nowPage = nowPage;
}
public long getRecordCount() {
return recordCount;
}
public void setRecordCount(long recordCount) {
this.recordCount = recordCount;
}
public Integer getPageCount() {
return pageCount;
}
public void setPageCount(Integer pageCount) {
this.pageCount = pageCount;
}
public Map<String, Object> getParameters() {
return parameters;
}
public void setParameters(Map<String, Object> parameters) {
this.parameters = parameters;
}
public Map<String, Object> getFastQueryParameters() {
return fastQueryParameters;
}
public void setFastQueryParameters(Map<String, Object> fastQueryParameters) {
this.fastQueryParameters = fastQueryParameters;
}
public List<String> getAdvanceQueryConditions() {
return advanceQueryConditions;
}
public void setAdvanceQueryConditions(List<String> advanceQueryConditions) {
this.advanceQueryConditions = advanceQueryConditions;
}
public List<Object> getExhibitDatas() {
return exhibitDatas;
}
public void setExhibitDatas(List<Object> exhibitDatas) {
this.exhibitDatas = exhibitDatas;
}
public String getWhereHql() {
return whereHql;
}
public void setWhereHql(String whereHql) {
this.whereHql = whereHql;
}
public String getSortHql() {
return sortHql;
}
public void setSortHql(String orderHql) {
this.sortHql = orderHql;
}
public List<Object> getArguments() {
return arguments;
}
public void setArguments(List<Object> arguments) {
this.arguments = arguments;
}
public HashMap<String, ArrayList> getNcColumnsType() {
return ncColumnsType;
}
public void setNcColumnsType(HashMap<String, ArrayList> ncColumnsType) {
this.ncColumnsType = ncColumnsType;
}
public HashMap<String, String> getNcColumnsTypeList() {
return ncColumnsTypeList;
}
public void setNcColumnsTypeList(HashMap<String, String> ncColumnsTypeList) {
this.ncColumnsTypeList = ncColumnsTypeList;
}
@Override
public String toString() {
return "DtGrid{" +
"isExport=" + isExport +
", pageSize=" + pageSize +
", startRecord=" + startRecord +
", nowPage=" + nowPage +
", recordCount=" + recordCount +
", pageCount=" + pageCount +
", parameters=" + parameters +
", fastQueryParameters=" + fastQueryParameters +
", advanceQueryConditions=" + advanceQueryConditions +
", exhibitDatas=" + exhibitDatas +
'}';
}
}
步骤4测试
@ResponseBody
@PostMapping("/demo")
public DtGrid test(String dtGridPager) throws IOException {
//后台通过 dtGridPager 来接收前端传过来的参数
ObjectMapper mapper = new ObjectMapper();
//将其转换为 实体对象
DtGrid dtGrid = mapper.readValue(dtGridPager, DtGrid.class);
QCeshi qCeshi = QCeshi.ceshi;
//进行分页查询
List list = jpaQueryFactory.selectFrom(qCeshi).offset(dtGrid.getNowPage()-1).limit(dtGrid.getPageSize()).fetch();
//进行记录总数查询
Integer count = Math.toIntExact(demoDao.count());
//进行总页数计算
int pageCount = (int) count / dtGrid.getPageSize() + (count % dtGrid.getPageSize() > 0 ? 1 : 0);
//将前前端要的参数传回去
dtGrid.setExhibitDatas(list);
dtGrid.setRecordCount(count);
dtGrid.setPageCount(pageCount);
return dtGrid;
}
类似资料：