js操作數組移動
//先封裝js數組交換順序方法
/*參數說明
arr是要操作的數組
index1 是准備移動的元素
index2 是准備移動到的位置 往下移就是 index2=index+1
往上移動就是 index2=index+1；
這個也可以在頁面試試那個方法就指導了，但是置頂和置底還有點差別
*/
var swapItems = function(arr, index1, index2,direction) {
if(direction=='up'){//置頂
arr.unshift(arr[index1]);
arr.splice(index1+1,1);
return arr;
}
if(direction=='down'){//置底
arr.push(arr[index1]);
arr.splice(index1,1);
return arr;
}
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
return arr;
};
//然后js調用
function upIndex (index){//置頂
if(index==0){
return;
}
swapItems(myAppList, index,0,'up');
},
function up(index){//上移
if(index == 0) {
return;
}
swapItems(myAppList, index, index - 1);
},
function down(index){//下移
if(index == myAppList.length -1) {
return;
}
swapItems(myAppList, index, index + 1);
},
function downIndex(index){//置底
if(index == myAppList.length -1) {
return;
}
swapItems(myAppList, index,0,'down');
}
到此 js操作數組移動就完成了 下面用到vue項目里面
2. vue操作表格上下移動和置底置頂
項目需求：循環的列表都是dd標簽，dd標簽右邊有四個小按鈕從上到下功能依次是：
置頂，上移，下移，置底
html代碼
<template id="myAppList">
<dd class="clearfix app appList" v-bind:appid="item.appId" v-for="(index, item) of myAppList">
<div class="dd-left">
<img v-bind:src="item.iconUrl ? item.iconUrl:'../img/default.png'" v-bind:alt="item.appName" v-bind:title="item.appName"/>
</div>
<div class="dd-right">
<h5>
<template v-if="item.type==2">
<i v-if="item.permission==0" class="my-permission-label all" title="全部權限"></i>
<i v-if="item.permission==1" class="my-permission-label develop" title="開發權限"></i>
<i v-if="item.permission==2" class="my-permission-label operate" title="運營權限"></i>
</template>
<span class="app-name" v-if="item.type==2" v-text="item.appName+'*'"></span>
<span class="app-name" v-if="item.type!=2" v-text="item.appName"></span>
</h5>
<template v-if="item.type==2">
<template v-if="item.permission==1">
<span>{{t "console.add"}}N/A</span>
<span>{{t "console.active"}}N/A</span>
</template>
<template v-else>
<span v-if="item.newUsersCount">{{t "console.add"}}{{newUsersCount}}</span>
<span v-else>{{t "console.add"}}0</span>
<span v-if="item.activeUsersCount">{{t "console.active"}}{{activeUsersCount}}</span>
<span v-else>{{t "console.active"}}0</span>
</template>
</template>
<template v-else>
<span v-if="item.newUsersCount">{{t "console.add"}}{{newUsersCount}}</span>
<span v-else>{{t "console.add"}}0</span>
<span v-if="item.activeUsersCount">{{t "console.active"}}{{activeUsersCount}}</span>
<span v-else>{{t "console.active"}}0</span>
</template>
<div class="moveCon">
<ul>
<template v-if="index!=0">
<li class="upIndex" title="置頂" v-on:click.stop="upIndex(index)"></li>
<li class="up" title="上移" v-on:click.stop="up(index)"></li>
</template>
<template v-else>
<li class="upIndex upel" title="置頂" v-on:click.stop="upIndex(index)"></li>
<li class="up upel" title="上移" v-on:click.stop="up(index)"></li>
</template>
<template v-if="index!=myAppList.length-1">
<li class="down" title="下移" v-on:click.stop="down(index)"></li>
<li class="downIndex" title="置底" v-on:click.stop="downIndex(index)"></li>
</template>
<template v-else>
<li class="down downel" title="下移" v-on:click.stop="down(index)"></li>
<li class="downIndex downel" title="置底" v-on:click.stop="downIndex(index)"></li>
</template>
</ul>
</div>
</div>
</dd>
</template>
項目的需求用到了大量的vi-if去判斷來顯示不一樣的標簽，我剛剛接觸vue 感覺我這樣寫html不是最優的，這里我不知道怎么改進....
另外 4個li標簽v-if判斷 是因為 如果第一個表格在最上面 就失去一個鼠標移動上去出現上移按鈕的效果，這個簡單提一下
js代碼 記得加上上面封裝的js操作數組移動的方法
// vue 循環APP列表頁面
var myAppList=[];
//獲取myAppList列表
function getMyAppList(){
$.ajax({
url: '你自己的接口地址',
type: 'GET',
dataType: 'json'
})
.done(function(data){
if(data&&data.status){
myAppList=data.result;
var vue= new Vue({
el:'#myAppList',
data:{
myAppList:myAppList
},
methods:{
upIndex:function(index){
if(index==0){
return;
}
swapItems(myAppList, index,0,'up');
},
up:function(index){
if(index == 0) {
return;
}
swapItems(myAppList, index, index - 1);
},
down:function(index){
if(index == myAppList.length -1) {
return;
}
swapItems(myAppList, index, index + 1);
},
downIndex:function(index){
if(index == myAppList.length -1) {
return;
}
swapItems(myAppList, index,0,'down');
}
}
})
}
})
}
//代碼算是很簡單了 ajax請求返會的json 取一個數組放到vue代碼里面，作為vue在html頁面 v-for的數據源，剩下的的移動功能就是操作數據源這個大數組的排序了。
vue里面應該有類似的方法，但是我沒有找到，所以就用了最笨的辦法了。
參考資料：