您好,登錄后才能下訂單哦!
這篇“l(fā)ayui加JQuery怎么實(shí)現(xiàn)上下移動(dòng)效果”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來(lái)看看這篇“l(fā)ayui加JQuery怎么實(shí)現(xiàn)上下移動(dòng)效果”文章吧。
思路:是將查出來(lái)的數(shù)據(jù)重新排序(主要是唯一ID及其數(shù)據(jù)位置調(diào)整)后臺(tái)設(shè)置序號(hào)。只支持單選代碼如何:
**// 第一步**
var data_tr;
//觸發(fā)單選框選擇
table.on('radio()', function(obj){ //test 是 table 標(biāo)簽對(duì)應(yīng)的 lay-filter 屬性
data_tr = $(this);
});
**// 上移**
function uptr() {
// 拿到列表集合
var datas = layui.table.cache["list"];
// 拿到選中的數(shù)據(jù)
var checkStatus = table.checkStatus('list'), data = checkStatus.data;
if (typeof (data[0]) == "undefined") {
layer.msg("請(qǐng)選擇一條要移動(dòng)的數(shù)據(jù)");
} else {
var tr = $(data_tr).parent().parent().parent();
debugger
if ($(tr).prev().html() == null) {
layer.msg("已經(jīng)是最頂部了");
return;
}else{
// 未上移前,記錄本行和下一行的數(shù)據(jù)
var tem = datas[tr.index()];
var tem2 = datas[tr.prev().index()];
// 將本身插入到目標(biāo)tr之前
$(tr).insertBefore($(tr).prev());
// 上移之后,數(shù)據(jù)交換
datas[tr.index()] = tem;
datas[tr.next().index()] = tem2;
}
}
}
**// 上移最頂**
function upTop() {
var datas = layui.table.cache["list"];
var checkStatus = table.checkStatus('list'), data = checkStatus.data;
if (typeof (data[0]) == "undefined") {
layer.msg("請(qǐng)選擇一條要移動(dòng)的數(shù)據(jù)");
} else {
var tr = $(data_tr).parent().parent().parent();
if ($(tr).prev().html() == null) {
layer.msg("已經(jīng)是最頂部了");
return;
}else{
// 將數(shù)據(jù)渲染到最前一條
$(tr).insertBefore($(tr).siblings(":first"));
// 刪除選中這條的數(shù)據(jù) $(tr).attr("data-index")拿到選中這條數(shù)據(jù)的序號(hào)
datas.splice($(tr).attr("data-index"), 1);
// 數(shù)組中的前面插入
datas.unshift(data[0]);
}
}
}
**// 下移**
function downtr() {
var datas = layui.table.cache["list"];
var checkStatus = table.checkStatus('list'), data = checkStatus.data;
if (typeof (data[0]) == "undefined") {
layer.msg("請(qǐng)選擇一條要移動(dòng)的數(shù)據(jù)");
} else {
var tr = $(data_tr).parent().parent().parent();
debugger
if ($(tr).next().html() == null) {
layer.msg("已經(jīng)是最底部了");
return;
}else{
// 記錄本行和下一行的數(shù)據(jù)
var tem = datas[tr.index()];
var tem2 = datas[tr.next().index()];
// 將本身插入到目標(biāo)tr的后面
$(tr).insertAfter($(tr).next());
// 交換數(shù)據(jù)
datas[tr.index()] = tem;
datas[tr.prev().index()] = tem2;
}
}
}
**// 下移最底**
function downBottom() {
var datas = layui.table.cache["list"];
var checkStatus = table.checkStatus('list'), data = checkStatus.data;
debugger;
if (typeof (data[0]) == "undefined") {
layer.msg("請(qǐng)選擇一條要移動(dòng)的數(shù)據(jù)");
} else {
var tr = $(data_tr).parent().parent().parent();
debugger
if ($(tr).next().html() == null) {
layer.msg("已經(jīng)是最底部了");
return;
}else{
// 將數(shù)據(jù)渲染到最后一條
$(tr).insertAfter($(tr).siblings(":last"));
datas.splice($(tr).attr("data-index"), 1);
// 在數(shù)組末尾處按順序添加
datas.push(data[0]);
}
}
}
**// 最后調(diào)取修改接口**
function updateSortData() {
debugger
var instanceGUIDs = "";
var data = layui.table.cache["list"];
if(data.length > 1){
for (var i = 0; i < data.length; i++) {
instanceGUIDs += data[i].instanceGUID + ",";
}
}
$.post("/spring/office/todo/saveTodoSort", {
ids : instanceGUIDs,
userGUID : userGUID
}, function(data) {
if (data) {
$.newuiAlert('排序成功!');
// tableInit();
}else {
$.newuiAlert('排序失??!');
}
});
**// 實(shí)現(xiàn)**
@Autowired
private JdbcTemplate jdbcTemplate;
@RequestMapping("/saveTodoSort")
public @ResponseBody boolean saveTodoSort(HttpServletRequest request) {
String userGUID = request.getParameter("userGUID");
String ids = request.getParameter("ids");
boolean isSuccess = false;
try {
if (StringUtils.isNotBlank(userGUID) && StringUtils.isNotBlank(ids)) {
String[] instanceGUIDs = ids.split(",");
List<Object[]> batchParams = new ArrayList<Object[]>(instanceGUIDs.length);
String sql = "update OFFICE_WorkflowInstanceActors set STAR_LEVEL=? where WORKFLOWINSTANCE_GUID=? and PERSON_GUID=? and ACTORS_CLASSIFY=?";
for (int i = 0; i < instanceGUIDs.length; i++) {
batchParams.add(new Object[] { (instanceGUIDs.length - i), instanceGUIDs[i], userGUID, 1 });
}
jdbcTemplate.batchUpdate(sql, batchParams);
isSuccess = true;
}
} catch (Exception ex) {
ex.printStackTrace();
}
return isSuccess;
}
以上就是關(guān)于“l(fā)ayui加JQuery怎么實(shí)現(xiàn)上下移動(dòng)效果”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。