Vue table表格的增删改操作

(..•˘_˘•..) 版权声明:转载原创文章请以超链接形式请注明原文章出处,尊重作者,尊重原创! (..•˘_˘•..)某些网站的小编真的是眼瞎! 转载注明出处!求求你了!

关于分页:https://www.idaobin.com/archives/1962.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试页面</title>
    <link href="https://www.idaobin.com/css/bootstrap-3.3.7.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://www.idaobin.com/js/vue-2.2.2.min.js"></script>
    <script src="https://www.idaobin.com/js/jquery-3.2.1.js"></script>
    <script src="https://www.idaobin.com/js/bootstrap-3.3.7.min.js"></script>
    <style type="text/css">
        table tr td {
            text-align: center;
        }

        .btn-info {
            margin-left: 5px;
        }

        .add,
        .addBox {
            margin: 10px 0px 10px 10px;
        }

        .submit {
            margin-left: 172px;
        }

        /*全删*/

        .delAll {
            margin-left: 10px;
        }

        /*新增*/

        fieldset {
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div id="app">

        <button class="btn btn-primary btn-sm addBox" data-toggle="modal" data-target="#addModal">添加</button>
        <button class="btn btn-sm btn-danger delAll" @click="ajaxDel">批量删除</button>
        <table class="table table-bordered" id="table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" @click="allSelect" v-model="data.checked">
                    </td>
                    <td>序号</td>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>操作</td>

                </tr>
            </thead>
            <tbody>
                <tr v-for="(person,index) in data.people">
                    <td>
                        <input type="checkbox" v-model="data.selected" v-bind:value="person.sid">
                    </td>
                    <td>{{(index+1)+(data.currentPage-1)*data.pageSize}}</td>
                    <td contenteditable="true">{{person.sid}}</td>
                    <td contenteditable="true">{{person.sname}}</td>
                    <td contenteditable="true">{{person.sage}}</td>
                    <td>
                        <button @click="del(index)" class="btn btn-danger btn-sm">删除</button>
                        <button @click="edit(person)" class="btn btn-info btn-sm" data-toggle="modal" data-target="#editModal">编辑</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 添加学生 -->
        <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addodalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            添加学生
                        </h4>
                    </div>
                    <div class="modal-body">
                        <p>
                            <label>学号:</label>
                            <input type="text" id="stuNo" v-model="data.addPeople.sid">
                        </p>
                        <p>
                            <label>姓名:</label>
                            <input type="text" id="stuName" v-model="data.addPeople.sname">
                        </p>
                        <p>
                            <label>年龄:</label>
                            <input type="number" id="stuAge" v-model="data.addPeople.sage">
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="add">
                            提交更改
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑学生 -->
        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="addodalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            编辑学生
                        </h4>
                    </div>
                    <div class="modal-body" v-if="data.editlist">
                        <p>
                            <label>学号:</label>
                            <input type="text" v-model="data.editPeople.sid" value="">
                        </p>
                        <p>
                            <label>姓名:</label>
                            <input type="text" v-model="data.editPeople.sname" value="">
                        </p>
                        <p>
                            <label>年龄:</label>
                            <input type="number" v-model="data.editPeople.sage" value="">
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="update">
                            提交更改
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    //jq分页取总页数方法
    function pagination(pageCount) {
        console.log(pageCount);
    }
    var vue = new Vue({
        el: "#app",
        data: { data: [], },
        created: function () {
            this.loadData();  //页面加载
        },
        methods: {
            loadData: function () {
                var _this = this;
                //基础数据json
                var jsonData = {
                    people: [
                        { 'sid': '1043', 'sname': '张三', 'sage': '18' },
                        { 'sid': '2434', 'sname': '赵六', 'sage': '43' },
                        { 'sid': '3424', 'sname': '李四', 'sage': '42' },
                        { 'sid': '1231', 'sname': '王五', 'sage': '35' }
                    ]
                };
                //操作数据json
                var opJson = {
                    addPeople: {},
                    editPeople: {},
                    editlist: false,
                    checked: false,
                    selected: [],
                    editSid: ""
                };
                //分页数据json
                var paging = {
                    currentPage: 1, //当前页
                    pageSize: 20, //每页展示
                    pageCount: 50 //总页数
                };
                var newJson = $.extend(true, jsonData, opJson, paging);
                _this.data = newJson;
                console.log(JSON.stringify(newJson));
                pagination(JSON.stringify(_this.data.pageCount)); //初始化分页
                //ajax后台请求json数据
                // $.ajax({
                //     type: 'Post',
                //     url: 'https://www.idaobin.com/',
                //     data: {
                //         action: "loadData"
                //     },
                //     dataType: 'json',
                //     success: function (data) {
                //         alert(data);
                //     }
                // })
            },
            //删除
            del: function (index) {
                var _this = this;
                console.log(JSON.stringify(this.data.people[index]));
                this.data.people.splice(index, 1);
            },
            //提交
            add: function () {
                var isExist = false;
                var newId = JSON.stringify(this.data.addPeople.sid);
                for (var i = 0; i < this.data.people.length; i++) {
                    var stuId = this.data.people[i].sid;
                    if (JSON.stringify(stuId) === newId) {
                        isExist = false;
                        console.log("数据已存在");
                        break;
                    }
                    else {
                        isExist = true;
                    }
                }
                if (isExist === true) {
                    //在末行添加数据
                    this.data.people.push({
                        sid: this.data.addPeople.sid,
                        sname: this.data.addPeople.sname,
                        sage: this.data.addPeople.sage,
                    });
                    //在首行添加数据
                    // this.data.people.splice(0,0, {
                    //     sid: this.data.addPeople.sid,
                    //     sname: this.data.addPeople.sname,
                    //     sage: this.data.addPeople.sage,
                    // })
                    console.log(JSON.stringify(this.data.addPeople));
                }
            },
            //全选
            allSelect: function () {
                if (this.data.selected.length != this.data.people.length) {
                    this.data.selected = [];
                    for (var i = 0; i < this.data.people.length; i++) {
                        this.data.selected.push(this.data.people[i].sid);
                        //console.log(this.data.people[i].sid);
                    }

                } else {
                    this.data.selected = [];
                }
            },
            //前端页面的批量删除
            checkedDel: function (_this) {
                for (var m = 0; m < _this.data.selected.length; m++) {
                    for (var n = 0; n < _this.data.people.length; n++) {
                        if (_this.data.selected[m] == _this.data.people[n].sid) {
                            //console.log(JSON.stringify(_this.people[n]))
                            _this.data.people.splice(n, 1);
                        }
                    }
                }
            },
            //ajax传给后台批量删除
            ajaxDel: function () {
                var _this = this;
                var row = $("#table").find("tr").length; //table行数
                var count = this.data.selected.length;
                var stuId = "";
                if (row == 1 || count == 0) {
                    console.log("没有数据");
                }
                else {
                    for (var j = 0; j < this.data.selected.length; j++) {
                        for (var i = 0; i < this.data.people.length; i++) {
                            if (this.data.selected[j] == this.data.people[i].sid) {
                                stuId += (this.data.people[i].sid + ",");
                            }
                        }
                    }
                    stuId = stuId.substr(0, stuId.length - 1); //删除最后一个,
                    console.log(stuId);
                    this.$options.methods.checkedDel(_this); //ajax返回成功后执行批量删除方法
                }
            },
            //编辑
            edit: function (item) {
                this.data.editPeople = {
                    sid: item.sid,
                    sname: item.sname,
                    sage: item.sage
                };
                this.data.editlist = true;
                editSid = item.sid;
            },
            //更新
            update: function () {
                var _this = this;
                for (var i = 0; i < this.data.people.length; i++) {
                    if (this.data.people[i].sid == editSid) {
                        this.data.people[i] = {
                            sid: this.data.editPeople.sid,
                            sname: this.data.editPeople.sname,
                            sage: this.data.editPeople.sage
                        };
                        this.data.editlist = false;
                    }
                }
                console.log(JSON.stringify(this.data.editPeople));
            }
        }
    });       
</script>

</html>

原文链接:https://www.idaobin.com/archives/1982.html

既然都复制粘贴转载了,就不能打赏一点…ヘ( ̄ω ̄ヘ)

支付宝 ——————- 微信
图片加载中图片加载中

发表评论

电子邮件地址不会被公开。 必填项已用*标注

− 1 = 4