bootstrap-table分頁模板和獲取表中的ID
阿新 • • 發佈:2019-02-14
1.dao層
MyBatis對映
mapper.xml中
<select id="getTcdt" parameterType="com.ls.entity.Mydata" resultMap="BaseResultMap">
select * from TB_COMMUNICATION_DEVICE_TBL ORDER BY ${ordername} ${order}
</select>
mapper.java中
public List<Tb_communication_device_tbl> getTcdt(Mydata data);//分頁查詢
1.業務層service
/**
* 實現分頁顯示
*/
@Override
public JSONObject getTcdt(Mydata data) {
// TODO Auto-generated method stub
JSONObject result=null;
List<Tb_communication_device_tbl> md=tbdao.getTcdt(data);
List<Tb_communication_device_tbl> resultList = new ArrayList<Tb_communication_device_tbl>() ;
//判斷前臺頁面傳回的值是不是空不是進行條件模糊查詢
if(null!=data.getStationNr() && !data.getStationNr().trim().equals("")||data.getWellDbk()!=null&&data.getWellDbk().trim().equals("")){
for(Tb_communication_device_tbl user :md){
if(user.getStationNr().indexOf(data.getStationNr()) >= 0){
resultList.add(user);
}
}
}else{
resultList = md;
}
//獲取分頁資料
int pageNumber = null!=data.getDangqian() ? Integer.parseInt(data.getDangqian()) : 0;
int pageSize = null!=data.getFrist() ? Integer.parseInt(data.getFrist()) : 10;
int start = (pageNumber) * pageSize;//計算開始記錄數
int end = start+pageSize;//計算結束記錄數
md= new ArrayList<Tb_communication_device_tbl>() ;
for(int i=start;i<end && i<resultList.size();i++){
Tb_communication_device_tbl e=resultList.get(i);
md.add(e);
}
int total=0;
//儲存值map中
Map<String, Object> map=new HashMap<String, Object>();
SimpleDateFormat sf=new SimpleDateFormat("yyyy-MM-dd");
//實現資料型別轉換主要是日期型別轉換成字串
List<Mydate> list=new ArrayList<>();
for (int i = 0; i < md.size(); i++) {
Mydate my=new Mydate();
my.setAlarmVoltage(md.get(i).getAlarmVoltage());
my.setBatteryElectricQty(md.get(i).getBatteryElectricQty());
my.setInstallDate(sf.format(md.get(i).getInstallDate()));
//my(md.get(i)));
my.setDeviceClass((md.get(i).getDeviceClass()));
my.setLevelElevationAlarm((md.get(i).getLevelElevationAlarm()));
my.setNewWellDbk(md.get(i).getNewWellDbk());
my.setOperationDate(sf.format(md.get(i).getOperationDate()));
my.setReadoutFrequency(md.get(i).getReadoutFrequency());
my.setRemark(md.get(i).getRemark());
my.setReturenValueBln(md.get(i).getReturenValueBln());
/*my.setSendingcycle(md.get(i).getSendingcycle());
my.setSendingstarttime(md.get(i).getSendingstarttime());*/
my.setShowingBln(md.get(i).getShowingBln());
my.setSignalAlarm(md.get(i).getSignalAlarm());
my.setSimcardNr(md.get(i).getSimcardNr());
my.setStationNr(md.get(i).getStationNr());
my.setTransmittingFrequency(md.get(i).getTransmittingFrequency());
my.setUserId(md.get(i).getUserId());
my.setWaterTemperatureAlarm(md.get(i).getWaterTemperatureAlarm());
my.setWellDbk(md.get(i).getWellDbk());
my.setWorkingStatus(md.get(i).getWorkingStatus());
list.add(my);
}
map.put("total", resultList.size());
map.put("rows", list);
//存入返回值中
result=JSONObject.fromObject(map);
return result;
}
3.action層
public String execute(){
String pageNO=null;
String pageSize=null;
if(offset==null||limit==null){
pageNO ="0";
pageSize="10";
}else{
pageNO =offset;
pageSize=limit;
}
//給物件賦值
Mydata data=new Mydata();
data.setDangqian(pageNO);
data.setFrist(pageSize);
//System.out.println(wells);
data.setStationNr(departmentname);
data.setWellDbk(wells);
data.setOrder(order);
//點選列頭獲取屬性因為屬性和資料庫列名不一樣所以排序要進行修改列名
if(ordername==null){
data.setOrdername("STATION_NR");
}
if(ordername!=null){
if(ordername.equals("deviceClass")){
data.setOrdername("DEVICE_CLASS");
}
if(ordername.equals("stationNr")){
data.setOrdername("STATION_NR");
}
if(ordername.equals("batteryElectricQty")){
data.setOrdername("BATTERY_ELECTRIC_QTY");
}
if(ordername.equals("simcardNr")){
data.setOrdername("SIMCARD_NR");
}
if(ordername.equals("wellDbk")){
data.setOrdername("WELL_DBK");
}
if(ordername.equals("installDate")){
data.setOrdername("INSTALL_DATE");
}
}
result=tb_communication_device_tblservice.getTcdt(data);
list=tB_MONITOR_WELL_TBLservice.getTmwt();//獲取外來鍵的值
Map<String, Object> map=ActionContext.getContext().getSession();
map.put("list", list);//
map.put("offset2", offset);
map.put("limit1", limit);
return SUCCESS;
}
var TableInit = function () {
var oTableInit = new Object();
var stationNr=null;
var stationNr2=null;
var arr=new Array();
var arr1=new Array();
//定義查詢方法
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
//初始化Table
oTableInit.Init = function () {
$('#tb_departments').bootstrapTable({
url: 'tcdtaction', //請求後臺的URL(*)
method: 'get', //請求方式(*)
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: false, //是否顯示行間隔色
cache: false, //是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*)
pagination: true, //是否顯示分頁(*)
sortable: true, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams, //傳遞引數(*)
sidePagination: "server", //分頁方式:client客戶端分頁,server服務端分頁(*)
pageNumber: 1, //初始化載入第一頁,預設第一頁
pageSize: 10, //每頁的記錄行數(*)
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(*)
search: false, //是否顯示錶格搜尋,此搜尋是客戶端搜尋,不會進服務端,所以,個人感覺意義不大
strictSearch: false,//設定為 true啟用 全匹配搜尋,否則為模糊搜尋
// showExport表示是否顯示匯出的按鈕,exportDataType表示匯出的模式是當前頁、所有資料還是選中資料。
sortable:true,//設定為false 將禁止所有列的排序
searchOnEnterKey:true,//設定為 true時,按回車觸發搜尋方法,否則自動觸發搜尋方法
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示重新整理按鈕
showExport: true,//是否顯示匯出
showpaginationswitch:true,//是否顯示 資料條數選擇框
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啟用點選選中行
height: 532, //行高,如果沒有設定height屬性,表格自動根據記錄條數覺得表格高度
uniqueId: "id", //每一行的唯一標識,一般為主鍵列
showToggle: true, //是否顯示詳細檢視和列表檢視的切換按鈕
cardView: false, //是否顯示詳細檢視
detailView: true, //是否顯示父子表
exportTypes: ['csv','txt','xml'],
exportDataType: "basic",
columns: [{
align: "center",
checkbox: true
},
{
field: 'stationNr',
title: '站號',
align: "center",
sortable: true,
editable: true
}, {
field: 'deviceClass',
title: '通訊裝置型別',
align: "center",
sortable: true,
editable: true
}, {
field: 'batteryElectricQty',
title: '電池電量',
align: "center",
sortable: true,
editable: true
},
{
field: 'simcardNr',
title: 'SIM卡號',
align: "center",
sortable: true,
editable: true
},
{
field: 'wellDbk',
title: '統一編號',
sortable: true,
align: "center",
editable: true
},
{
field: 'installDate',
title: '安裝日期',
sortable: true,
align: "center",
editable: true
},
{
field: 'operate',
title: '操作',
sortable: true,
align: "center",
editable: true,
formatter:function(value,row,index){
var e = '<a onclick="edit(\''+ row.stationNr + '\')">檢視詳情</a> ';
return e;
}
},
],
onCheckAll:function(rows){//全選中
var arr2=new Array();
var arr3=new Array();
arr2=$("#tb_departments").bootstrapTable('getSelections');
for (var i = 0; i < arr2.length; i++) {
arr3=arr2[i]
for(var s in arr3)
arr.push(arr3.stationNr);//新增數值到陣列\
}
var n = []; //一個新的臨時陣列
for(var h = 0; h < arr.length; h++) //遍歷當前陣列
{
//如果當前陣列的第i已經儲存進了臨時陣列,那麼跳過,
//否則把當前項push到臨時數組裡面
if (n.indexOf(arr[h]) == -1){
n.push(arr[h]);
}
}
arr=n
document.getElementById("ddd").value=arr;
},
onUncheckAll:function(rows){//全選不中
arr=[];//清空陣列
document.getElementById("ddd").value=arr;
},
onUncheck:function(row){//不選中
stationNr2=row.stationNr; //取出id
arr.remove(stationNr2);
document.getElementById("ddd").value=arr;
},
onCheck:function(row){//選中
//alert("2")
stationNr2=row.stationNr; //取出id
arr.push(stationNr2);//新增數值到陣列\
//去除重複元素
var s = arr.join(",")+",";
for(var i=0;i<arr.length;i++) {
if(s.replace(arr[i]+",","").indexOf(arr[i]+",")>-1) {
arr.remove(arr[i]);
document.getElementById("ddd").value=arr;
break;
}
}
document.getElementById("ddd").value=arr;
},
onClickRow:function(row,$element){
$('.success').removeClass('success');
$($element).addClass('success');
stationNr2=row.stationNr;
arr.push(stationNr2);//新增數值到陣列
//定義查詢方法
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
//去除重複元素
var s = arr.join(",")+",";
for(var i=0;i<arr.length;i++) {
if(s.replace(arr[i]+",","").indexOf(arr[i]+",")>-1) {
arr.remove(arr[i]);
document.getElementById("ddd").value=arr;
break;
}
}
document.getElementById("ddd").value=arr;
}
});
};
//得到查詢的引數
oTableInit.queryParams = function (params) {
var temp = { //這裡的鍵的名字和控制器的變數名必須一直,這邊改動,action也需要改成一樣的
limit: params.limit, //頁面大小
offset: params.offset, //頁碼
order: params.order,
ordername: params.sort,//返回排序列名
//pageSize: params.pageSize, //頁面大小
//pageNumber: params.pageNumber, //頁碼
departmentname: $("#departmentname").val(),//返回查詢條件
wells: $("#wells").val(),
};
return temp;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
//初始化頁面上面的按鈕事件
};
return oInit;
};
MyBatis對映
mapper.xml中
<select id="getTcdt" parameterType="com.ls.entity.Mydata" resultMap="BaseResultMap">
select * from TB_COMMUNICATION_DEVICE_TBL ORDER BY ${ordername} ${order}
</select>
mapper.java中
public List<Tb_communication_device_tbl> getTcdt(Mydata data);//分頁查詢
1.業務層service
/**
* 實現分頁顯示
*/
@Override
public JSONObject getTcdt(Mydata data) {
// TODO Auto-generated method stub
JSONObject result=null;
List<Tb_communication_device_tbl> md=tbdao.getTcdt(data);
List<Tb_communication_device_tbl> resultList = new ArrayList<Tb_communication_device_tbl>() ;
//判斷前臺頁面傳回的值是不是空不是進行條件模糊查詢
if(null!=data.getStationNr() && !data.getStationNr().trim().equals("")||data.getWellDbk()!=null&&data.getWellDbk().trim().equals("")){
for(Tb_communication_device_tbl user :md){
if(user.getStationNr().indexOf(data.getStationNr()) >= 0){
resultList.add(user);
}
}
}else{
resultList = md;
}
//獲取分頁資料
int pageNumber = null!=data.getDangqian() ? Integer.parseInt(data.getDangqian()) : 0;
int pageSize = null!=data.getFrist() ? Integer.parseInt(data.getFrist()) : 10;
int start = (pageNumber) * pageSize;//計算開始記錄數
int end = start+pageSize;//計算結束記錄數
md= new ArrayList<Tb_communication_device_tbl>() ;
for(int i=start;i<end && i<resultList.size();i++){
Tb_communication_device_tbl e=resultList.get(i);
md.add(e);
}
int total=0;
//儲存值map中
Map<String, Object> map=new HashMap<String, Object>();
SimpleDateFormat sf=new SimpleDateFormat("yyyy-MM-dd");
//實現資料型別轉換主要是日期型別轉換成字串
List<Mydate> list=new ArrayList<>();
for (int i = 0; i < md.size(); i++) {
Mydate my=new Mydate();
my.setAlarmVoltage(md.get(i).getAlarmVoltage());
my.setBatteryElectricQty(md.get(i).getBatteryElectricQty());
my.setInstallDate(sf.format(md.get(i).getInstallDate()));
//my(md.get(i)));
my.setDeviceClass((md.get(i).getDeviceClass()));
my.setLevelElevationAlarm((md.get(i).getLevelElevationAlarm()));
my.setNewWellDbk(md.get(i).getNewWellDbk());
my.setOperationDate(sf.format(md.get(i).getOperationDate()));
my.setReadoutFrequency(md.get(i).getReadoutFrequency());
my.setRemark(md.get(i).getRemark());
my.setReturenValueBln(md.get(i).getReturenValueBln());
/*my.setSendingcycle(md.get(i).getSendingcycle());
my.setSendingstarttime(md.get(i).getSendingstarttime());*/
my.setShowingBln(md.get(i).getShowingBln());
my.setSignalAlarm(md.get(i).getSignalAlarm());
my.setSimcardNr(md.get(i).getSimcardNr());
my.setStationNr(md.get(i).getStationNr());
my.setTransmittingFrequency(md.get(i).getTransmittingFrequency());
my.setUserId(md.get(i).getUserId());
my.setWaterTemperatureAlarm(md.get(i).getWaterTemperatureAlarm());
my.setWellDbk(md.get(i).getWellDbk());
my.setWorkingStatus(md.get(i).getWorkingStatus());
list.add(my);
}
map.put("total", resultList.size());
map.put("rows", list);
//存入返回值中
result=JSONObject.fromObject(map);
return result;
}
3.action層
public String execute(){
String pageNO=null;
String pageSize=null;
if(offset==null||limit==null){
pageNO ="0";
pageSize="10";
}else{
pageNO =offset;
pageSize=limit;
}
//給物件賦值
Mydata data=new Mydata();
data.setDangqian(pageNO);
data.setFrist(pageSize);
//System.out.println(wells);
data.setStationNr(departmentname);
data.setWellDbk(wells);
data.setOrder(order);
//點選列頭獲取屬性因為屬性和資料庫列名不一樣所以排序要進行修改列名
if(ordername==null){
data.setOrdername("STATION_NR");
}
if(ordername!=null){
if(ordername.equals("deviceClass")){
data.setOrdername("DEVICE_CLASS");
}
if(ordername.equals("stationNr")){
data.setOrdername("STATION_NR");
}
if(ordername.equals("batteryElectricQty")){
data.setOrdername("BATTERY_ELECTRIC_QTY");
}
if(ordername.equals("simcardNr")){
data.setOrdername("SIMCARD_NR");
}
if(ordername.equals("wellDbk")){
data.setOrdername("WELL_DBK");
}
if(ordername.equals("installDate")){
data.setOrdername("INSTALL_DATE");
}
}
result=tb_communication_device_tblservice.getTcdt(data);
list=tB_MONITOR_WELL_TBLservice.getTmwt();//獲取外來鍵的值
Map<String, Object> map=ActionContext.getContext().getSession();
map.put("list", list);//
map.put("offset2", offset);
map.put("limit1", limit);
return SUCCESS;
}
js檔案
var oTableInit = new Object();
var stationNr=null;
var stationNr2=null;
var arr=new Array();
var arr1=new Array();
//定義查詢方法
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
//初始化Table
oTableInit.Init = function () {
$('#tb_departments').bootstrapTable({
url: 'tcdtaction', //請求後臺的URL(*)
method: 'get', //請求方式(*)
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: false, //是否顯示行間隔色
cache: false, //是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*)
pagination: true, //是否顯示分頁(*)
sortable: true, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams, //傳遞引數(*)
sidePagination: "server", //分頁方式:client客戶端分頁,server服務端分頁(*)
pageNumber: 1, //初始化載入第一頁,預設第一頁
pageSize: 10, //每頁的記錄行數(*)
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(*)
search: false, //是否顯示錶格搜尋,此搜尋是客戶端搜尋,不會進服務端,所以,個人感覺意義不大
strictSearch: false,//設定為 true啟用 全匹配搜尋,否則為模糊搜尋
// showExport表示是否顯示匯出的按鈕,exportDataType表示匯出的模式是當前頁、所有資料還是選中資料。
sortable:true,//設定為false 將禁止所有列的排序
searchOnEnterKey:true,//設定為 true時,按回車觸發搜尋方法,否則自動觸發搜尋方法
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示重新整理按鈕
showExport: true,//是否顯示匯出
showpaginationswitch:true,//是否顯示 資料條數選擇框
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啟用點選選中行
height: 532, //行高,如果沒有設定height屬性,表格自動根據記錄條數覺得表格高度
uniqueId: "id", //每一行的唯一標識,一般為主鍵列
showToggle: true, //是否顯示詳細檢視和列表檢視的切換按鈕
cardView: false, //是否顯示詳細檢視
detailView: true, //是否顯示父子表
exportTypes: ['csv','txt','xml'],
exportDataType: "basic",
columns: [{
align: "center",
checkbox: true
},
{
field: 'stationNr',
title: '站號',
align: "center",
sortable: true,
editable: true
}, {
field: 'deviceClass',
title: '通訊裝置型別',
align: "center",
sortable: true,
editable: true
}, {
field: 'batteryElectricQty',
title: '電池電量',
align: "center",
sortable: true,
editable: true
},
{
field: 'simcardNr',
title: 'SIM卡號',
align: "center",
sortable: true,
editable: true
},
{
field: 'wellDbk',
title: '統一編號',
sortable: true,
align: "center",
editable: true
},
{
field: 'installDate',
title: '安裝日期',
sortable: true,
align: "center",
editable: true
},
{
field: 'operate',
title: '操作',
sortable: true,
align: "center",
editable: true,
formatter:function(value,row,index){
var e = '<a onclick="edit(\''+ row.stationNr + '\')">檢視詳情</a> ';
return e;
}
},
],
onCheckAll:function(rows){//全選中
var arr2=new Array();
var arr3=new Array();
arr2=$("#tb_departments").bootstrapTable('getSelections');
for (var i = 0; i < arr2.length; i++) {
arr3=arr2[i]
for(var s in arr3)
arr.push(arr3.stationNr);//新增數值到陣列\
}
var n = []; //一個新的臨時陣列
for(var h = 0; h < arr.length; h++) //遍歷當前陣列
{
//如果當前陣列的第i已經儲存進了臨時陣列,那麼跳過,
//否則把當前項push到臨時數組裡面
if (n.indexOf(arr[h]) == -1){
n.push(arr[h]);
}
}
arr=n
document.getElementById("ddd").value=arr;
},
onUncheckAll:function(rows){//全選不中
arr=[];//清空陣列
document.getElementById("ddd").value=arr;
},
onUncheck:function(row){//不選中
stationNr2=row.stationNr; //取出id
arr.remove(stationNr2);
document.getElementById("ddd").value=arr;
},
onCheck:function(row){//選中
//alert("2")
stationNr2=row.stationNr; //取出id
arr.push(stationNr2);//新增數值到陣列\
//去除重複元素
var s = arr.join(",")+",";
for(var i=0;i<arr.length;i++) {
if(s.replace(arr[i]+",","").indexOf(arr[i]+",")>-1) {
arr.remove(arr[i]);
document.getElementById("ddd").value=arr;
break;
}
}
document.getElementById("ddd").value=arr;
},
onClickRow:function(row,$element){
$('.success').removeClass('success');
$($element).addClass('success');
stationNr2=row.stationNr;
arr.push(stationNr2);//新增數值到陣列
//定義查詢方法
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
//去除重複元素
var s = arr.join(",")+",";
for(var i=0;i<arr.length;i++) {
if(s.replace(arr[i]+",","").indexOf(arr[i]+",")>-1) {
arr.remove(arr[i]);
document.getElementById("ddd").value=arr;
break;
}
}
document.getElementById("ddd").value=arr;
}
});
};
//得到查詢的引數
oTableInit.queryParams = function (params) {
var temp = { //這裡的鍵的名字和控制器的變數名必須一直,這邊改動,action也需要改成一樣的
limit: params.limit, //頁面大小
offset: params.offset, //頁碼
order: params.order,
ordername: params.sort,//返回排序列名
//pageSize: params.pageSize, //頁面大小
//pageNumber: params.pageNumber, //頁碼
departmentname: $("#departmentname").val(),//返回查詢條件
wells: $("#wells").val(),
};
return temp;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
//初始化頁面上面的按鈕事件
};
return oInit;
};