Vue基礎增刪改查批量操作

Vue跟ajax相似，但也有不同，Vue比較簡單

@*v-..指令*@
@*只渲染一次*@


link:'<a href="http://www.baidu.com">百度</a>'


@*v-..指令*@
@*只渲染一次*@
<h2 v-once>當前名稱是:{{name}}</h2>
<h2>{{counter*2}}</h2>
@*路徑*@
<h2 v-html="link"></h2>
//let 局部變量
//var 全局變量
let app = new Vue({
     el: "#app",
　　　　data: {
　　　　//隨意屬性
　　　　name: "Vuejs",
　　　　firstName: 'coder',
　　　　lastName: 'why',
　　　　counter: 100,
link:'<a href="http://www.baidu.com">百度</a>'
}
})

 

1.Vue添加功能

跟之前有所不同的就是ID屬性換成指令，要應用Vue插件

V-model     雙向綁定

V-on:click    點擊事件

 

 

Vue的編輯語法

1 掛載

2data定義對象

3  methods   編輯方法

4  created   相當於文檔就緒函數

 

 

 

 

添加定義對象，里面寫對應的屬性

 

 

 編輯添加的流程寫地址存入數據庫

 

 

 綁定下拉框

需要用到循環指令   V-for(item,index) in 對象

 

Vue的顯示

首先做出來排版

 

 顯示的部分是運用循環指令進行的

<tr v-for="(item,index) in list">
            <td><input type="checkbox" name="name" :value="item.SId" v-model="chks" /></td>
            <td>{{item.SName}}</td>
            <td>{{item.NName}}</td>
            <td>{{item.Sex?"男":"女"}}</td>
            <td>{{item.Age}}</td>
            <td>{{item.Hobby}}</td>
            <td><a href="#" v-on:click="edit(item.SId)">編輯</a> | <a href="#">刪除</a></td>
        </tr>

顯示的方法

  loadData() {  //加載數據
                axios.get('/Student/PageShow', {
                    params: {
                        //? sname = ' + this.sname + ' & nid=' + this.nid + '& pageindex=' + this.pageindex + '& pagesize='+this.pagesize+'
                        sname: this.sname,
                        nid: this.nid,
                        pageindex: this.pageindex,
                        pagesize: this.pagesize
                    }
                }).then(res => {
                    this.list = res.data.Data  //加載list
                    this.totalcount = res.data.TotalCount;  //總條數
                    this.totalpage = res.data.TotalPage     //總頁數
                })

要在鈎子函數里調用

 

 批量刪除操作首先要進行一個全選的功能標題上定義多選框，綁定指令給個值

 

 接下來循環獲取多選框的值

 

 setChecked() {  //全選 非全選
                if (!this.chk) {   //將所有的復選框變成選中狀態
                    //循環將 list 當中的  SId 添加到 chks 當中  那你的復選框變成選中狀態
                    for (var i = 0; i < this.list.length; i++) {
                        this.chks.push(this.list[i].SId)
                    }
                } else {  //將所有的復選框變成未選中狀態
                    this.chks = [];
                }
            },

給批量操作的按鈕給個點擊事件用指令  V-on:click

編輯方法   刪除的方法同理

  batchEdit() {  //批量修改
                if (this.chks.length==0) {
                    alert('請選擇要修改的數據');
                    return;
                }
                if (confirm("確認要修改嗎？")) {
                    axios.get('/Student/BatchEdit', {
                        params: {
                            ids: this.chks.toString(),
                            sex:false
                        }
                    }).then(res => {
                        if (res.data > 0) {
                            alert('修改成功');
                            this.loadData();
                        } else {
                            alert('修改失敗')
                        }
                    })
                }
            },

顯示分頁的按鈕  給A標簽給上點擠事件然后進行方法編輯，點擊事件給參數

 

<div>
        <a href="#" v-on:click="pageData('f')">首頁</a>
        <a href="#" v-on:click="pageData('p')">上一頁</a>
        <a href="#" v-on:click="pageData('n')">下一頁</a>
        <a href="#" v-on:click="pageData('l')">尾頁</a>
        <span>當前 {{pageindex}} / {{totalpage}} 共{{totalcount}}條 </span>
        跳轉<input type="text" name="name" value="" style="width:40px" /> <input type="button" name="name" value="Go" />
    </div>

pageData(op) {  //分頁
                switch (op) {
                    case "f":
                        this.pageindex = 1;
                        break;
                    case "p":
                        this.pageindex = this.pageindex <= 1 ? 1 : this.pageindex - 1;
                        break;
                    case "n":
                        this.pageindex = this.pageindex >= this.totalpage ? this.totalpage : this.pageindex + 1;
                        break;
                    case "l":
                        this.pageindex = this.totalpage;
                        break;
                    default:
                }
                this.loadData();
            },
//切記要重新調用一下顯示的刷新頁面修

修改之前是編輯編輯要傳送Id

edit(id) {// 編輯
location.href = '/Student/EditStudent?id=' + id;
}

 

 

//所有的代碼

@{
ViewBag.Title = "ShowStudent";
}
<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/axios.js"></script>
<h2>當前用戶:@((Session["UserInfo"] as Model.UserInfo).UserName)</h2>
<div id="app">
<div style="margin-bottom: 5px; background-color: #e1efff; border:1px solid #ccc; padding:5px">
學生姓名<input type="text" name="name" value="" v-model="sname" />
學生班級<select v-model="nid">
<option v-for="(item,index) in selectItems" :value="item.NId">{{item.NName}}</option>
</select>
<input type="button" name="name" value="查詢" class="btn btn-success" v-on:click="loadData" />
<input type="button" name="name" value="批量刪除" class="btn btn-danger" v-on:click="delAll" />
<input type="button" name="name" value="批量修改狀態" class="btn btn-warning" v-on:click="batchEdit" />
<input type="button" name="name" value="添加" class="btn btn-default" onclick="location.href='/Student/AddStudent'" />
</div>
<table class="table table-bordered">
<tr style="background-color:cornflowerblue;color:white; font-weight:400">
<td>
<input type="checkbox" name="name" value="" v-model="chk" v-on:click="setChecked" />
</td>
<td>學生姓名</td>
<td>學生班級</td>
<td>學生性別</td>
<td>學生年齡</td>
<td>學生愛好</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) in list">
<td><input type="checkbox" name="name" :value="item.SId" v-model="chks" /></td>
<td>{{item.SName}}</td>
<td>{{item.NName}}</td>
<td>{{item.Sex?"男":"女"}}</td>
<td>{{item.Age}}</td>
<td>{{item.Hobby}}</td>
<td><a href="#" v-on:click="edit(item.SId)">編輯</a> | <a href="#">刪除</a></td>
</tr>
</table>
<div>
<a href="#" v-on:click="pageData('f')">首頁</a>
<a href="#" v-on:click="pageData('p')">上一頁</a>
<a href="#" v-on:click="pageData('n')">下一頁</a>
<a href="#" v-on:click="pageData('l')">尾頁</a>
<span>當前 {{pageindex}} / {{totalpage}} 共{{totalcount}}條 </span>
跳轉<input type="text" name="name" value="" style="width:40px" /> <input type="button" name="name" value="Go" />
</div>
</div>
<script>
let app = new Vue({
el: "#app",
data() { //屬性
return {
list: [], //接收要顯示的數據集合
totalcount: 0, //接收總條數用的
totalpage: 0, //接收總頁數
selectItems: [], //接收下拉
sname: "",
nid: 0,
pageindex: 1,
pagesize: 3,
chk: false, //主 復選框的屬性
chks:[] //副 復選框的屬性
}
},
methods: { //方法
loadData() { //加載數據
axios.get('/Student/PageShow', {
params: {
//? sname = ' + this.sname + ' & nid=' + this.nid + '& pageindex=' + this.pageindex + '& pagesize='+this.pagesize+'
sname: this.sname,
nid: this.nid,
pageindex: this.pageindex,
pagesize: this.pagesize
}
}).then(res => {
this.list = res.data.Data //加載list
this.totalcount = res.data.TotalCount; //總條數
this.totalpage = res.data.TotalPage //總頁數
})
},
loadSelect() { //加載下拉
axios.get('/Student/GetClassList').then(res => {
this.selectItems = res.data;
//unshift 數組的第一個位置 插入 一條數據
this.selectItems.unshift({"NId":"0","NName":"請選擇"});
})
},
pageData(op) { //分頁
switch (op) {
case "f":
this.pageindex = 1;
break;
case "p":
this.pageindex = this.pageindex <= 1 ? 1 : this.pageindex - 1;
break;
case "n":
this.pageindex = this.pageindex >= this.totalpage ? this.totalpage : this.pageindex + 1;
break;
case "l":
this.pageindex = this.totalpage;
break;
default:
}
this.loadData();
},
setChecked() { //全選 非全選
if (!this.chk) { //將所有的復選框變成選中狀態
//循環將 list 當中的 SId 添加到 chks 當中 那你的復選框變成選中狀態
for (var i = 0; i < this.list.length; i++) {
this.chks.push(this.list[i].SId)
}
} else { //將所有的復選框變成未選中狀態
this.chks = [];
}
},
delAll() { //批量刪除
if (this.chks.length==0) {
alert('請選擇要刪除的數據')
return;
}
if (confirm("確認是否要刪除？")) {
axios.get('/Student/DelAll?ids=' + this.chks.toString()).then(res => {
if (res.data > 0) {
alert('刪除成功')
this.loadData();
} else {
alert('刪除失敗')
}
});
}
},
batchEdit() { //批量修改
if (this.chks.length==0) {
alert('請選擇要修改的數據');
return;
}
if (confirm("確認要修改嗎？")) {
axios.get('/Student/BatchEdit', {
params: {
ids: this.chks.toString(),
sex:false
}
}).then(res => {
if (res.data > 0) {
alert('修改成功');
this.loadData();
} else {
alert('修改失敗')
}
})
}
},
edit(id) {// 編輯
location.href = '/Student/EditStudent?id=' + id;
}
},
created: function () { //鈎子函數 相當於 文檔就緒函數 （初始化數據）
this.loadData(); //調用方法
this.loadSelect();
}
})
</script>