zoukankan      html  css  js  c++  java
  • vue.js加jQuery加bootstrap实现的增删改查的案例

    css样式跟HTML代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script type="text/javascript" src="js/vue.min.js"></script>
        <script type="text/javascript" src="js/jquery1.2.6.js"></script>
        <style>
            .margintop {
                margin-top: 100px;
            }
    
            .search {
                width: 60%;
                display: inline-block;
            }
    
            #table .center {
                text-align: center;
            }
    
            #table table tbody td input {
                width: 80px;
                border: none;
                outline: none;
            }
        </style>
        </head>
        <body>
               <div class="container margintop" id="table">
            <div class="col-md-3">
                <div class="form-group">
                    <label>id:</label>
                    <input type="text" class="form-control id" placeholder="请输入您的id号">
                </div>
                <div class="form-group">
                    <label>姓名:</label>
                    <input type="text" class="form-control name" placeholder="请输入您的姓名">
                </div>
                <div class="form-group">
                    <label>年龄:</label>
                    <input type="text" class="form-control age" placeholder="请输入您的年龄">
                </div>
                <div class="form-group">
                    <label>身高:</label>
                    <input type="text" class="form-control height" placeholder="请输入您的身高">
                </div>
                <div class="form-group">
                    <label>学校:</label>
                    <input type="text" class="form-control school" placeholder="请输入您的学校">
                </div>
                <div class="form-group">
                    <button class="btn btn-primary" @click="add()">添加人物</button>
                </div>
            </div>
            <div class="col-md-9">
                <div class="form-group">
                    <input type="text" class="form-control search" placeholder="请输入关键字" v-model="keyword">
                    <input type="button" class="btn btn-primary" value="立即搜索">
                </div>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>身高</th>
                            <th>学校</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(value, index) in newData" class="data-row">
                            <td><input type="text" v-model="newData[index].id" readonly="readonly"></td>
                            <td><input type="text" v-model="newData[index].name" readonly="readonly"></td>
                            <td><input type="text" v-model="newData[index].age" readonly="readonly"></td>
                            <td><input type="text" v-model="newData[index].height" readonly="readonly"></td>
                            <td><input type="text" v-model="newData[index].school" readonly="readonly"></td>
                            <td class="center">
                                <a href="void:javascript" class="btn btn-primary" @click="edit(index)">修改</a>
                                <a href="void:javascript" class="btn btn-success" @click="save(index)">保存</a>
                                <a href="void:javascript" class="btn btn btn-danger" @click="del(index)">删除</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        </body>
    
    </html>



    JavaScript代码:
    <script>
        var v = new Vue({
            el: "#table",
            data: {
                msg: [{
                    id: "1",
                    name: "张三",
                    age: "28",
                    height: "180cm",
                    school: "清华大学"
                }, {
                    id: "2",
                    name: "李四",
                    age: "24",
                    height: "183cm",
                    school: "北京大学"
                }, {
                    id: "3",
                    name: "王五",
                    age: "13",
                    height: "150cm",
                    school: "哈佛大学"
                }, {
                    id: "4",
                    name: "赵六",
                    age: "22",
                    height: "167cm",
                    school: "逗比大学"
                }, {
                    id: "5",
                    name: "哈哈",
                    age: "15",
                    height: "176cm",
                    school: "野鸡大学"
                }, {
                    id: "6",
                    name: "小小",
                    age: "14",
                    height: "126cm",
                    school: "百度大学"
                }, {
                    id: "7",
                    name: "大白",
                    age: "35",
                    height: "171cm",
                    school: "美国大学"
                }],
                editflag: false,
                keyword: ""
            },
            methods: {
                //添加信息
                add: function() {
                    var obj = {};
                    var id = document.querySelector(".id").value; //姓名
                    var name = document.querySelector(".name").value; //姓名
                    var age = document.querySelector(".age").value; //年龄
                    var height = document.querySelector(".height").value; //身高
                    var school = document.querySelector(".school").value; //学校
                    
                    obj.id = id ;
                    obj.name = name;
                    obj.age = age;
                    obj.height = height;
                    obj.school = school;
    
                    this.msg.push(obj);
                },
                //删除信息
                del: function(index) {
                    console.log(index);
                    this.msg.splice(index, 1);
                },
                //修改信息
                edit: function(index) {
                    if (!this.editflag) {
                        console.log($(".data-row").eq(index).find("input"));
                        $(".data-row").eq(index).find("input").each(function() {
                            //开启可编辑状态
                            $(this).removeAttr("readonly");
                        });
                        this.editflag = !this.editflag;
                    }
                },
                //保存信息
                save: function(index) {
                    var obj = {};
                    console.log(this.msg[index]);
                    obj.id = $(".data-row").eq(index).find("input").eq(0).val(); //id赋值
                    obj.name = $(".data-row").eq(index).find("input").eq(1).val(); //name赋值
                    obj.age = $(".data-row").eq(index).find("input").eq(2).val(); //age赋值
                    obj.height = $(".data-row").eq(index).find("input").eq(3).val(); //height赋值
                    obj.school = $(".data-row").eq(index).find("input").eq(4).val(); //school赋值
                    this.msg[index] = obj;
                    if (this.editflag) {
                        $(".data-row").eq(index).find("input").each(function() {
                            //关闭可编辑状态
                            $(this).attr("readonly", "readonly");
                        });
                        this.editflag = !this.editflag;
                    }
                    //console.log(this.msg[index]);
                    alert("保存成功!");
                },
                seach: function() {
                    //点击设置搜索的关键字
                    
                    this.keyword = $(".seach").val();
                }
            },
            computed: {
                //过滤掉关键字
                newData: function() {
                    var keyword = this.keyword;
                    return this.msg.filter(function(item) {
                        return item.id.indexOf(keyword) > -1 || item.name.indexOf(keyword) > -1 || item.age.indexOf(keyword) > -1 || item.height.indexOf(keyword) > -1 || item.school.indexOf(keyword) > -1;
                    });
                }
            }
        });
    </script>

    用于学习复习笔记。2018加油!!

  • 相关阅读:
    [洛谷P2783]有机化学之神偶尔会做作弊
    %你赛题解
    TCP协议中的三次握手和四次挥手(图解)
    堆,栈,内存
    java原生数据类型和引用类型
    XHTML 是以 XML 格式编写的 HTML
    TCP和UDP?
    HTTP和HTTPS的区别?
    <!DOCTYPE> 声明
    ASCII和万国码
  • 原文地址:https://www.cnblogs.com/aa1314/p/8168624.html
Copyright © 2011-2022 走看看