利用vue.js和jqueryUI 实现排序并只把顺序有变化的提交给后台进行更新
jqueryUI有插件 很容易实现排序 但是要先把有变化的挑选出来就需要 自己实现了。
思路不难,就是把传来的数据进行备份与改变的进行对比, 有变化挑出来。
这里有个坑,就是深拷贝的问题,就是如果不深拷贝,原数据变化拷贝的数据也跟着变化。我在网上查了很多深拷贝的方法,但对向[{},{}]这样数组元素是对象的并不适用。后来发现数组里的对象必须重新创建一个。上图上代码。
html
<tbody id="mapSortable">
<tr v-for="(li,index) in mapData">
<td style="text-align: right;" class="order" :data-id="index" :data-sort="li.sort">{{index+1}}</td>
<td style="text-align: center;"><input type="checkbox" v-model="li.display_status"/></td>
<td style="text-align: left;">{{li.maptraffic_id}}</td>
<td style="text-align: left;">{{li.manage_title}}</td>
</tr>
</tbody>
js
const sortData = {
mapData : [],
trafficData : [],
mapArr : [],
trafficArr : [],
};
var mapData;
$(function() {
// Vueの初期化
new Vue({
el : '#manageArea',
data : sortData,
methods : {
optMap : function(){ sortData.opt = 1; },
optTraffic : function(){ sortData.opt = 0; },
updateBtn : updateBtn,
},
});
initAjax();
// 排序
tableSort('#trafSortable');
tableSort('#mapSortable');
});
/**
* 点击更新按钮后进行的操作
*/
function updateBtn(){
var index;
var sort;
var display_statu;
var display_status;
for (var i = 0, rowTotal = sortData.mapData.length; i < rowTotal; i += 1) {
index = $($('#mapSortable .order')[i]).data("id");
sort = $($('#mapSortable .order')[i]).data("sort");
sorts = mapData[i].sort;
display_statu = mapData[i].display_status;
display_status = sortData.mapData[i].display_status;
// 将更改的数据放入数组中
if(sort != sorts||display_statu != display_status){
sortData.mapData[index].sort = sorts;
sortData.mapArr.push(sortData.mapData[i])
sortData.changecount = 1;
}
}
updateAjax();
}
//拷贝数组
function copyArr(arr) {
let res = []
for (let i = 0; i < arr.length; i++) {
let param = {'sort':null,'display_status':null };
param.sort=arr[i].sort
param.display_status=arr[i].display_status
res.push(param);
}
return res
}
// 排序方法
function tableSort(tableId){
$(tableId).sortable();
$(tableId).disableSelection();
$(tableId).on('sortstop', function (e, ui) {
var rows = $(tableId+' .order');
for (var i = 0, rowTotal = rows.length; i < rowTotal; i += 1) {
$($(tableId+' .order')[i]).text(i + 1);
}
})
}
我这里有两个变化的一个是顺序,一个是checkbox的值。