摘要:前端菜鳥,下午沒什么活兒,寫了個(gè)不過腦子的,十分喜歡妖尾,就用妖尾做了模擬數(shù)據(jù),大伙兒輕噴。
前端菜鳥,下午沒什么活兒,寫了個(gè)不過腦子的demo,效果圖 html結(jié)構(gòu)
十分喜歡妖尾,就用妖尾做了模擬數(shù)據(jù),大伙兒輕噴。
設(shè)計(jì)感為0,頁面配色丑得我都不想看,在此膜拜我司UI工程師,
很多實(shí)現(xiàn)功能的地方?jīng)]有想到更好的辦法,希望各位大佬斧正!
css樣式
姓名 性別 公會(huì) 屬性 級別 操作 name1 sex1 party1 proper1 level1 編輯刪除性別:公會(huì):級別:取消確定
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 += "添加、編輯、單項(xiàng)刪除" + " " } $("tbody").html(str); localStorage.setItem("temp", JSON.stringify(listAll)); }" + " " + listAll[i].name + " " + "" + listAll[i].sex + " " + "" + listAll[i].party + " " + "" + listAll[i].proper + " " + "" + listAll[i].level + " " + "" + " " + "編輯" + "刪除" + "
添加功能和編輯功能用的是同一個(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
摘要:最近在做畢設(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),于是就自己去...
摘要:表示需要攔截的請求類型。表示數(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...
摘要:本使用創(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)擊按鈕...
閱讀 3771·2023-04-25 20:00
閱讀 3118·2021-09-22 15:09
閱讀 513·2021-08-25 09:40
閱讀 3424·2021-07-26 23:38
閱讀 2212·2019-08-30 15:53
閱讀 1101·2019-08-30 13:46
閱讀 2799·2019-08-29 16:44
閱讀 2052·2019-08-29 15:32