利用vue.js和jqueryUI 实现排序

利用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的值。