boostrap table实现行拖拽调整排序
boostrap table实现行拖拽调整排序.
排序前
排序后
boostrap table拖拽实现行重新排序代码详解
1、引入相关的js文件
其中jquery.tablednd.js和boostrap-table-reorder-rows.js是实现拖拽的主要js
2、引入css文件
3、在html页面定义表格时，添加属性
data-use-row-attr-func="true" data-reorderable-rows="true"
此时，我们就可以对表格内的行进行拖拽了。如果还需要跟后台做交互，则需要在初始画表格时，加入下面的方法
4、加入boostrap table拖拽的方法
var dragbeforeidx;
var draglateridx;
function initTable() {
$("#itemTable").bootstrapTable({
url: "${webAppPath}/PosButton/getButtonItemList", //請求後臺的URL（*）
method: 'get', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啟用排序
sidePagination: "server", //分頁方式：client客護端分頁，server服務端分頁（*）
pageNumber: 1, //初始化加載第壹頁，默認第壹頁
pageSize: 150, //每頁的記錄行數（*）
queryParams: function queryParams(re) { //傳遞慘數（*）
var param = {
rows: re.limit,
page: re.offset,
buttonId: "${buttonId}",
keyword: $("#keyWords").val()
};
return param;
},
pageList: [150, 200, 250, 300], //可供選擇的每頁的行數（*）
search: false, //是否顯示表格搜索
strictSearch: false, //是否全匹配搜索否則為模糊搜索
showColumns: false, //是否顯示所有的列
showRefresh: false, //是否顯示刷新按鈕
singleSelect: true, // 單選checkbox
clickToSelect: true, //是否啟用點擊選中行
height: 750, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度
uniqueId: "id", //每壹行的唯壹標識，壹般為主鍵列
showToggle: false, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
columns: [{checkbox: true},
{field: 'id', title: '按鍵', align: 'center', valign: 'middle'},
{field: 'pcid', title: '按鍵', align: 'center', valign: 'middle'},
{field: 'deschk', title: '按鍵名稱', align: 'center', valign: 'middle'},
{field: 'itemCode', title: '食品編號', align: 'center', valign: 'middle'},
{field: 'itemName', title: '食品名稱', align: 'center', valign: 'middle'},
{
field: 'pcColor', title: '修改顏色', align: 'center', valign: 'middle',
formatter: function (value, row, index) {
// var modify = '';
var modify = '';
return modify;
}
}],
onLoadSuccess: function () {
$(".colorPickers").each(function () {
var color = $(this).val();
if (color == "") {
$(this).css("background-color", "#FFFFFF");
} else {
$(this).css("background-color", color);
}
});
$('.colorPickers').colorpicker({
format: true
});
},
//当选中行，拖拽时的哪行数据，并且可以获取这行数据的上一行数据和下一行数据
onReorderRowsDrag: function(table, row) {
//取索引号
dragbeforeidx = $(row).attr("data-index");
},
//拖拽完成后的这条数据，并且可以获取这行数据的上一行数据和下一行数据
onReorderRowsDrop: function (table, row) {
//取索引号
draglateridx = $(row).attr("data-index");
},
//当拖拽结束后，整个表格的数据
onReorderRow: function (newData) {
//这里的newData是整个表格数据，数组形式。如需转json字符串用JSON.stringify();
if (newData != null && dragbeforeidx != draglateridx) {
var pcids = "";
for(var i in newData){
pcids += newData[i].pcid+",";
}
$.ajax({
type: "post",
url: "${webAppPath}/PosButton/resortItem",
data: {
"pcids": pcids
},
dataType: "json",
success: function (data) {
var code = data.code;
if (code == 1) {
swal("操作提示", "順序調整成功!", "success");
$("#itemTable").bootstrapTable("refresh");
} else {
swal("操作提示", data.msg + "保存失敗!", "error");
}
},
error: function () {
swal("操作提示", "程序異常,保存操作失敗!", "error");
}
});
}
}
});
}5、后台处理顺序的接口
@RequestMapping(value = "resortItem")
@ResponseBody
public String resortItem(String pcids)
{
Integer code = -1;
String msg = "參數丟失,保存失敗";
Map resultMap = new HashedMap();
if(AppUtils.isNotBlank(pcids)){
if(service.resortItem(pcids)) {
code = 1;
msg = "順序調整成功";
}
}
resultMap.put("msg",msg);
resultMap.put("code",code+"");
return JSON.toJSONString(resultMap);
}