成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

表格的增刪改demo

lastSeries / 538人閱讀

摘要:前端菜鳥,下午沒什么活兒,寫了個(gè)不過腦子的,十分喜歡妖尾,就用妖尾做了模擬數(shù)據(jù),大伙兒輕噴。

前端菜鳥,下午沒什么活兒,寫了個(gè)不過腦子的demo,
十分喜歡妖尾,就用妖尾做了模擬數(shù)據(jù),大伙兒輕噴。
設(shè)計(jì)感為0,頁面配色丑得我都不想看,在此膜拜我司UI工程師,
很多實(shí)現(xiàn)功能的地方?jīng)]有想到更好的辦法,希望各位大佬斧正!
效果圖

html結(jié)構(gòu)

    
姓名 性別 公會(huì) 屬性 級別 操作
name1 sex1 party1 proper1 level1
編輯
刪除
性別:
公會(huì):
級別:
取消
確定
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;
}
獲取數(shù)據(jù)

從存儲(chǔ)中取數(shù)據(jù),如果存儲(chǔ)中滅有數(shù)據(jù),從json文件中取模擬數(shù)據(jù)

ajax默認(rèn)是異步,防止出現(xiàn)listAll為空的情況,這里將ajax手動(dòng)設(shè)置為同步,async值設(shè)置為false

// 取數(shù)據(jù)
var temp = localStorage.getItem("temp");
// 獲取對象數(shù)據(jù)
var listAll = JSON.parse(temp);
// 若沒有緩存,從模擬json中獲取數(shù)據(jù)
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);
        }
    })
}

//執(zhí)行函數(shù)
redata();
modelope();
delall();
check();
渲染表格函數(shù)

渲染表格的時(shí)候,同時(shí)將此時(shí)的listAll存入本地

// 渲染表格函數(shù)
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)); }
添加、編輯、單項(xiàng)刪除

添加功能和編輯功能用的是同一個(gè)模塊,這里設(shè)置了一個(gè)flag,用來判斷是添加動(dòng)作還是編輯動(dòng)作

添加動(dòng)作時(shí),打開模板的時(shí)候,清空一下所有的內(nèi)容

點(diǎn)擊模態(tài)框確定按鈕時(shí),如果是添加動(dòng)作,就執(zhí)行push。如果是編輯動(dòng)作,就執(zhí)行重新賦值操作

添加、編輯、單項(xiàng)刪除動(dòng)作執(zhí)行完畢之后,都重新渲染一遍table表格

// 添加、編輯、單項(xiàng)刪除
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("");
    });
    // 模態(tài)框取消按鈕
    $(".model .false").on("click", function () {
        $(".mask").hide();
        $(".model").hide();
    });
    // 模態(tài)框確定按鈕
    $(".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);
    });
}
全選按鈕狀態(tài)改變

利用checkbox類型input的checked屬性判斷

獲取checkall元素的屬性值,并且遍歷所有的checksin元素,將這個(gè)屬性值賦給所有的checksin

checksin如果是選中的,累加,和全部長度比較

checksin存在一個(gè)未選中,則,全選按鈕未選中

// 全選按鈕狀態(tài)改變
function check() {
    $(".checkall").on("click", function () {
        // checked是DOM元素的一個(gè)屬性,需要通過[0]訪問
        var flag = $(this)[0].checked;
        $(".checksin").each(function () {
            $(this)[0].checked = flag;
        })
    });
    $(".checksin").on("click", function () {
        var i = 0;
        $(".checksin").each(function () {
            // 存在一個(gè)未選中,則,全選按鈕未選中
            if ($(this)[0].checked == false) {
                $(".checkall")[0].checked = false;
            } else {
                // 如果是選中的,累加,和全部長度比較
                i += 1;
                if (i == $(".checksin").length) {
                    $(".checkall")[0].checked = true;
                }
            }

        })
    });

}
批量刪除操作

遍歷所有的checksin元素,如果是被選中的,移除此項(xiàng)所在的tr

獲取頁面的表格內(nèi)容,將listAll清空之后,重新將表格內(nèi)容放到listAll中

這里不知道直接對listAll的方法,使用單項(xiàng)刪除的splice的方法行不通,因?yàn)閘istAll的長度在實(shí)時(shí)改變

這里求大佬指教有沒有好的辦法

// 批量刪除
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數(shù)據(jù)
[{
        "name": "納茲·多拉格尼爾",
        "sex": "男",
        "party": "妖精的尾巴",
        "proper": "火-滅龍魔導(dǎo)師",
        "level": "END"
    },
    {
        "name": "溫蒂",
        "sex": "女",
        "party": "妖精的尾巴",
        "proper": "空-滅龍魔導(dǎo)師",
        "level": "SS"
    },
    {
        "name": "羅格",
        "sex": "男",
        "party": "劍咬之虎",
        "proper": "影-滅龍魔導(dǎo)師",
        "level": "SS"
    },
    {
        "name": "斯汀",
        "sex": "男",
        "party": "劍咬之虎",
        "proper": "光-滅龍魔導(dǎo)師",
        "level": "SS"
    },
    {
        "name": "克布拉",
        "sex": "男",
        "party": "魔女之罪",
        "proper": "毒-滅龍魔導(dǎo)師",
        "level": "SS"
    },
    {
        "name": "拉庫薩斯",
        "sex": "男",
        "party": "妖精的尾巴",
        "proper": "雷-滅龍魔導(dǎo)師",
        "level": "百年"
    },
    {
        "name": "葛吉爾",
        "sex": "男",
        "party": "妖精的尾巴",
        "proper": "鐵-滅龍魔導(dǎo)師",
        "level": "SS"
    }
]

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/99111.html

相關(guān)文章

  • Jquery + dataTable + Bootstrap + 完整邏輯實(shí)現(xiàn)表格的增刪改

    摘要:最近在做畢設(shè),同學(xué)在做前端頁面的時(shí)候使用到和這些控件,然后自己又在刷題的時(shí)候遇到一個(gè)這個(gè)的實(shí)現(xiàn),于是就自己去官網(wǎng)文檔上學(xué)習(xí)了一下,嘗試實(shí)現(xiàn)這個(gè)官方文檔代碼代碼效果如下圖示頂部結(jié)構(gòu)頁面上的三個(gè),增刪改新增修改刪除這里的框的 最近在做畢設(shè),同學(xué)在做前端頁面的時(shí)候使用到JQuery、DataTable和Bootstrap這些控件,然后自己又在刷題的時(shí)候遇到一個(gè)這個(gè)demo的實(shí)現(xiàn),于是就自己去...

    oneasp 評論0 收藏0
  • Vue+Mock.js模擬登錄和表格的增刪改

    摘要:表示需要攔截的請求類型。表示數(shù)據(jù)模板,可以是對象或字符串。表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)。指向本次請求的選項(xiàng)集。生成規(guī)則是可選的。返回成功的數(shù)據(jù),就是登錄成功了,否則相反。模擬登錄接下來介紹模擬表格增刪改查。 前言 關(guān)于mockjs,官網(wǎng)描述的是 1.前后端分離 2.不需要修改既有代碼,就可以攔截 Ajax 請求,返回模擬的響應(yīng)數(shù)據(jù)。 3.數(shù)據(jù)類型豐富 4.通過隨機(jī)數(shù)據(jù),模擬各種場景。 5...

    coordinate35 評論0 收藏0
  • 邁出全棧第一步,vue+node+mysql獨(dú)立完成前后端分離的增刪改查流程

    摘要:本使用創(chuàng)建本地服務(wù)器,在就能完成全部流程,并不需要線上服務(wù)器。路徑要與后端接口一致。后端返回成功后,前端數(shù)據(jù)中對應(yīng)的元素也要?jiǎng)h掉,更新視圖??刂破骼锬靡粋€(gè)方法出來說一下吧,完整的代碼都在。讀取操作完成后調(diào)用釋放連接。 寫在前面 本文只是本人學(xué)習(xí)過程的一個(gè)記錄,并不是什么非常嚴(yán)謹(jǐn)?shù)慕坛?,希望和大家一起共同進(jìn)步。也希望大家能指出我的問題。適合有一定基礎(chǔ),志在全棧的前端初學(xué)者學(xué)習(xí),從點(diǎn)擊按鈕...

    fsmStudy 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<