表格的增删改demo

lastSeries 发布于2019-08-23 12:57 / 509人阅读

摘要：前端菜鸟，下午没什么活儿，写了个不过脑子的，十分喜欢妖尾，就用妖尾做了模拟数据，大伙儿轻喷。

前端菜鸟，下午没什么活儿，写了个不过脑子的demo，
十分喜欢妖尾，就用妖尾做了模拟数据，大伙儿轻喷。
设计感为0，页面配色丑得我都不想看，在此膜拜我司UI工程师，
很多实现功能的地方没有想到更好的办法，希望各位大佬斧正！

效果图

html结构

	姓名	性别	公会	属性	级别	操作
	name1	sex1	party1	proper1	level1	编辑删除

css样式

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.contain {
    width: 80%;
    margin: 0 auto;
    padding-top: 20px;
}
table {
    width: 800px;
    margin: 0 auto;
}

thead tr {
    background-color: #009BCD;
    color: #fff;
}

tr {
    color: #000;
    height: 30px;
    line-height: 30px;
    background-color: #eee;
    text-align: center;
}

td {
    display: inline-block;
}

td:nth-child(1) {
    width: 5%;
}
td:nth-child(2) {
    width: 20%;
}
td:nth-child(3) {
    width: 5%;
}
td:nth-child(4) {
    width: 19%;
}
td:nth-child(5) {
    width: 19%;
}
td:nth-child(6) {
    width: 10%;
}
td:nth-child(7) {
    width: 20%;
}


.ope {
    color: #fff;
    width: 30%;
    height: 20px;
    line-height: 20px;
    border-radius: 5px;
    margin: 10px;
    padding: 3px;
    cursor: pointer;
}

.edit {
    float: left;
    background-color: #00C4E1;
    border: 1px solid #54AAC4;
}

.del {
    float: right;
    background-color: #EA4D45;
    border: 1px solid #B84F4D;
}

.tractive {
    background-color: #ffffd;
}
.footer {
    height: 50px;
}
.add {
    width: 50px;
    background-color: #51A736;
    border: 1px solid #319517;
    text-align: center;
    float: left;
}
.delall {
    width: 50px;
    background-color: #EA4D45;
    border: 1px solid #B84F4D;
    text-align: center;
    float: left;
}
.mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}
.model {
    background-color: #eee;
    border: 5px dashed #009DCE;
    width: 300px;
    padding: 20px 30px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 2px 2px 10px #333;
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.model>div {
    height: 40px;
    line-height: 40px;
}
.model input {
    height: 25px;
    width: 170px;
}
.model select {
    height: 30px;
    width: 175px;
}
.true {
    width: 50px;
    background-color: #51A736;
    border: 1px solid #319517;
    text-align: center;
    float: right;
}
.false {
    width: 50px;
    background-color: #EA4D45;
    border: 1px solid #B84F4D;
    text-align: center;
    float: right;
}

获取数据

从存储中取数据，如果存储中灭有数据，从json文件中取模拟数据

ajax默认是异步，防止出现listAll为空的情况，这里将ajax手动设置为同步，async值设置为false

// 取数据
var temp = localStorage.getItem("temp");
// 获取对象数据
var listAll = JSON.parse(temp);
// 若没有缓存，从模拟json中获取数据
if (temp == null) {
    var alldata = [];
    $.ajax({
        url: "./tail.json",
        async: false,
        type: "post",
        dataType: "json",
        success: function (data) {
            for (var i = 0; i < data.length; i++) {
                alldata.push(data[i]);
            };
            localStorage.setItem("temp", JSON.stringify(alldata));
            temp = localStorage.getItem("temp");
            listAll = JSON.parse(temp);
        }
    })
}

//执行函数
redata();
modelope();
delall();
check();

渲染表格函数

渲染表格的时候，同时将此时的listAll存入本地

// 渲染表格函数
function redata() {
    var str = "";
    for (var i = 0; i < listAll.length; i++) {
        str +=
            "" +
            "" +
            "" + listAll[i].name + "" +
            "" + listAll[i].sex + "" +
            "" + listAll[i].party + "" +
            "" + listAll[i].proper + "" +
            "" + listAll[i].level + "" +
            "" +
            "    编辑" +
            "    删除" +
            "" +
            ""
    }
    $("tbody").html(str);
    localStorage.setItem("temp", JSON.stringify(listAll));
}

添加、编辑、单项删除

添加功能和编辑功能用的是同一个模块，这里设置了一个flag，用来判断是添加动作还是编辑动作

添加动作时，打开模板的时候，清空一下所有的内容

点击模态框确定按钮时，如果是添加动作，就执行push。如果是编辑动作，就执行重新赋值操作

添加、编辑、单项删除动作执行完毕之后，都重新渲染一遍table表格

// 添加、编辑、单项删除
function modelope() {
    var flag = "";
    var index;
    // 添加
    $(".footer .add").on("click", function () {
        flag = "add";
        $(".mask").show();
        $(".model").show();
        $(".model .name input").val("");
        $(".model .sex select").val("");
        $(".model .party select").val("");
        $(".model .proper input").val("");
        $(".model .level select").val("");
    });
    // 模态框取消按钮
    $(".model .false").on("click", function () {
        $(".mask").hide();
        $(".model").hide();
    });
    // 模态框确定按钮
    $(".model .true").on("click", function () {
        $(".mask").hide();
        $(".model").hide();

        if (flag == "add") {
            var name = $(".model .name input").val();
            var sex = $(".model .sex select").val();
            var party = $(".model .party select").val();
            var proper = $(".model .proper input").val();
            var level = $(".model .level select").val();
            listAll.push({
                "name": name,
                "sex": sex,
                "party": party,
                "proper": proper,
                "level": level
            });
        } else if (flag == "edit") {
            listAll[index].name = $(".model .name input").val();
            listAll[index].sex = $(".model .sex select").val();
            listAll[index].party = $(".model .party select").val();
            listAll[index].proper = $(".model .proper input").val();
            listAll[index].level = $(".model .level select").val();
        }

        redata();

    });

    // 删除
    $("tbody").on("click", ".del", function () {
        var index = $(this).parents("tr").index();
        listAll.splice(index, 1);
        redata();
    });

    // 编辑
    $("tbody").on("click", ".edit", function () {
        flag = "edit";
        index = $(this).parents("tr").index();
        $(".mask").show();
        $(".model").show();
        $(".model .name input").val(listAll[index].name);
        $(".model .sex select").val(listAll[index].sex);
        $(".model .party select").val(listAll[index].party);
        $(".model .proper input").val(listAll[index].proper);
        $(".model .level select").val(listAll[index].level);
    });
}

全选按钮状态改变

利用checkbox类型input的checked属性判断

获取checkall元素的属性值，并且遍历所有的checksin元素，将这个属性值赋给所有的checksin

checksin如果是选中的，累加，和全部长度比较

checksin存在一个未选中，则，全选按钮未选中

// 全选按钮状态改变
function check() {
    $(".checkall").on("click", function () {
        // checked是DOM元素的一个属性，需要通过[0]访问
        var flag = $(this)[0].checked;
        $(".checksin").each(function () {
            $(this)[0].checked = flag;
        })
    });
    $(".checksin").on("click", function () {
        var i = 0;
        $(".checksin").each(function () {
            // 存在一个未选中，则，全选按钮未选中
            if ($(this)[0].checked == false) {
                $(".checkall")[0].checked = false;
            } else {
                // 如果是选中的，累加，和全部长度比较
                i += 1;
                if (i == $(".checksin").length) {
                    $(".checkall")[0].checked = true;
                }
            }

        })
    });

}

批量删除操作

遍历所有的checksin元素，如果是被选中的，移除此项所在的tr

获取页面的表格内容，将listAll清空之后，重新将表格内容放到listAll中

这里不知道直接对listAll的方法，使用单项删除的splice的方法行不通，因为listAll的长度在实时改变

这里求大佬指教有没有好的办法

// 批量删除
function delall() {
    $(".footer .delall").on("click", function () {
        $("tbody .checksin").each(function () {
            if ($(this)[0].checked == true) {
                $(this).parents("tr").remove();
            }
        });
        listAll = [];
        $("tbody tr").each(function () {
            var name = $(this).children("td").eq(1).html();
            var sex = $(this).children("td").eq(2).html();
            var party = $(this).children("td").eq(3).html();
            var proper = $(this).children("td").eq(4).html();
            var level = $(this).children("td").eq(5).html();
            listAll.push({
                "name": name,
                "sex": sex,
                "party": party,
                "proper": proper,
                "level": level
            });
        })
        localStorage.setItem("temp", JSON.stringify(listAll));
    })
}

模拟的json数据

[{
        "name": "纳兹·多拉格尼尔",
        "sex": "男",
        "party": "妖精的尾巴",
        "proper": "火-灭龙魔导师",
        "level": "END"
    },
    {
        "name": "温蒂",
        "sex": "女",
        "party": "妖精的尾巴",
        "proper": "空-灭龙魔导师",
        "level": "SS"
    },
    {
        "name": "罗格",
        "sex": "男",
        "party": "剑咬之虎",
        "proper": "影-灭龙魔导师",
        "level": "SS"
    },
    {
        "name": "斯汀",
        "sex": "男",
        "party": "剑咬之虎",
        "proper": "光-灭龙魔导师",
        "level": "SS"
    },
    {
        "name": "克布拉",
        "sex": "男",
        "party": "魔女之罪",
        "proper": "毒-灭龙魔导师",
        "level": "SS"
    },
    {
        "name": "拉库萨斯",
        "sex": "男",
        "party": "妖精的尾巴",
        "proper": "雷-灭龙魔导师",
        "level": "百年"
    },
    {
        "name": "葛吉尔",
        "sex": "男",
        "party": "妖精的尾巴",
        "proper": "铁-灭龙魔导师",
        "level": "SS"
    }
]

GPU云服务器云服务器 linux的增删改查 php的增删改查实例 jsp的增删改查教程 c语言一组数据的增

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99111.html

Jquery + dataTable + Bootstrap + 完整逻辑实现表格的增删改查

摘要：最近在做毕设，同学在做前端页面的时候使用到和这些控件，然后自己又在刷题的时候遇到一个这个的实现，于是就自己去官网文档上学习了一下，尝试实现这个官方文档代码代码效果如下图示顶部结构页面上的三个，增删改新增修改删除这里的框的最近在做毕设，同学在做前端页面的时候使用到JQuery、DataTable和Bootstrap这些控件，然后自己又在刷题的时候遇到一个这个demo的实现，于是就自己去...

oneasp 2019-08-22 18:28 评论0 收藏0
Vue+Mock.js模拟登录和表格的增删改查

摘要：表示需要拦截的请求类型。表示数据模板，可以是对象或字符串。表示用于生成响应数据的函数。指向本次请求的选项集。生成规则是可选的。返回成功的数据，就是登录成功了，否则相反。模拟登录接下来介绍模拟表格增删改查。前言关于mockjs，官网描述的是 1.前后端分离 2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。 3.数据类型丰富 4.通过随机数据，模拟各种场景。 5...

coordinate35 2019-08-23 10:25 评论0 收藏0
迈出全栈第一步，vue+node+mysql独立完成前后端分离的增删改查流程

摘要：本使用创建本地服务器，在就能完成全部流程，并不需要线上服务器。路径要与后端接口一致。后端返回成功后，前端数据中对应的元素也要删掉，更新视图。控制器里拿一个方法出来说一下吧，完整的代码都在。读取操作完成后调用释放连接。写在前面本文只是本人学习过程的一个记录，并不是什么非常严谨的教程，希望和大家一起共同进步。也希望大家能指出我的问题。适合有一定基础，志在全栈的前端初学者学习，从点击按钮...

fsmStudy 2019-08-20 16:10 评论0 收藏0