极客观点
项目管理
HarmonyOS
` 每次点击按钮会输出全部的数据，我想取对应的值删除
// html部分
<template id="tpl">
<li class="mui-coll-li">
<button type="button" class="mui-coll-btn mui-btn mui-btn-outlined">刪除</button>
<div class="mui-table-view-cell mui-collapse">
</div>
</li>
</template>// js部分
mui(document.body).on('tap', '.mui-coll-btn', function (e) {
// $(this).parents('li.mui-coll-li').remove()
// myStorage.removeItem('li.mui-coll-li');
// console.log(inventoryList)
// inventoryList：现有存储的三条数据
for (var i = 0; i < inventoryList.length; i++) { console.log(inventoryList)
}
})<--! 其中一条点击按钮打印出的数据格式
batchno: "152552555"
count: "5"
name: "--"
num: "703317"
unit: "KG"
-->
`
这个页面全部的代码，别人的项目，我就要做个删除数据。但是不知道怎么处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>物料盘点</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../libs/mui/css/mui.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../static/css/app.css" />
<link rel="stylesheet" type="text/css" href="../static/css/iconfont.css" />
<script src="../libs/mui/js/mui.js"></script>
<script src="../libs/jquery/jquery-1.11.1.js"></script>
<script src="../libs/layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="../libs/layer/laytpl.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/js/app.js" type="text/javascript" charset="utf-8"></script>
<style>
.console {
margin-top: 0.625rem;
width: 100%;
position: relative;
height: 4.6875rem;
}
.console-item {
text-align: center;
display: inline-block;
height: 3.4375rem;
margin-top: 0.625rem;
width: 32%;
}
.console-item span {
display: block;
font-size: 0.75rem;
}
.console-item img {
height: 1.875rem;
width: 1.875rem;
}
.info {
margin-top: 0.625rem;
}
.pd-count {
margin-top: 0.625rem;
height: 2.5rem;
background-color: #00aaff;
line-height: 2.5rem;
padding: 0 0.625rem;
font-style: italic;
color: white;
opacity: 0.6;
}
.winfo {
position: relative;
height: 21.25rem;
}
.pd-subtitle {
font-size: 0.8125rem;
color: #666666;
}
.pddsc textarea {
font-size: 0.9375rem;
color: #555555;
}
.pddsc textarea::-webkit-input-placeholder {
font-style: italic;
color: #777777;
font-size: 0.75rem;
}
.scroll-footer {
height: 8.75rem;
text-align: center;
line-height: 8.75rem;
color: #eee;
font-style: italic;
font-size: 0.75rem;
}
.test-btn {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
z-index: 200;
background-color: white;
}
.pdwindow {
border-radius: 0.625rem;
padding: 0.3125rem;
}
.pdw-num {
font-size: 1.25rem;
margin: 0.625rem auto;
border-bottom: 0.0625rem solid #999999;
width: 80%;
padding-bottom: 0.3125rem;
}
.pdw-ptname {
color: #AAAAAA;
}
.pdw-btn button:first-child {
width: 9.375rem;
}
.mui-navigate-right input {
border: solid 0.0625rem #AAAAAA;
color: red;
float: right;
margin-right: 2rem;
}
.mui-table-view-cell {
position: relative;
top: 0%;
}
.mui-coll-li {
position: relative;
}
.mui-coll-btn {
position: absolute;
z-index: 999;
left: 70%;
top: 1rem;
}
</style></head>
<body>
<div class="mui-content">
<div class="mui-wall-default console">
<div class="console-item " id="start">
<img src="../static/images/start.png">
<span class="mui-tab-label" id="startPD" data-trans="html:inventory_start">开始盘点</span>
</div>
<div class="console-item ">
<img src="../static/images/pd_runing.png" id="pdrotate" style="width:2.75rem;height: 2.5625rem;">
</div>
<div class="console-item" id="end">
<img src="../static/images/complete.png">
<span class="mui-tab-label" id="endPD" data-trans="html:inventory_end">结束盘点</span>
</div>
</div>
<div class="mui-wall-default info">
<div class="mui-list">
<div class="mui-list-item">
<span class="mui-tab-label" data-trans="html:inventory_user">盘点人</span>
<span class="mui-pull-right" id='userName'>---</span>
</div>
<div class="mui-list-item">
<span class="mui-tab-label" data-trans="html:inventory_date">盘点日期</span>
<span class="mui-pull-right" id='pdate'>----/--/--</span>
</div>
</div>
</div>
<div class="pd-count mui-row" id="pd-count">
<div class="mui-col-sm-6 mui-col-xs-6">
<span data-trans="html:class">类别</span> :<span id="typeCount">0</span> </div>
<div class="mui-col-sm-6 mui-col-xs-6 mui-text-right">
<span data-trans="html:total">总数量</span>:<span id="totalCount">0</span></div>
</div>
<div class="mui-wall-default winfo">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view" id="pdList">
<!-- 盘点的物料列表 -->
</ul>
<div class="scroll-footer" style="height: 8.75rem;font-style: italic;">
<span>----<span data-trans="html:theend">已经到底了</span>----</span>
</div>
</div>
</div>
</div>
</div>
<div class="test-btn">
<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">测试盘点</button>
</div>
<template id="tpl">
<li class="mui-coll-li">
<button type="button" class="mui-coll-btn mui-btn mui-btn-outlined">刪除</button>
<div class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="javascript:;">
<div>
<span data-trans="html:material_no">物料号</span>:{{d.num}}/
<span data-trans="html:count">数量</span>:{{d.count}}/{{d.unit}}
</div>
<div style="font-size: 0.9375rem; color: #CCCCCC;"><span
data-trans="html:batchno">批次号</span>:{{d.batchno}}</div>
</a>
<div class="mui-collapse-content">
<div class="pd-title">
<span class="mui-label" style="font-size: 19px;"><span
data-trans="html:material_no">物料号</span>:{{d.num}}</span>
</div>
<div class="pd-subtitle">
<span class="mui-tab-label"><span data-trans="html:material_name">品名</span>:{{d.name}}</span>
<span class="mui-tab-label mui-pull-right"><span
data-trans="html:count">数量</span>:{{d.count}}/{{d.unit}}</span>
</div>
<div class="pddsc">
<textarea class="form" rows="1" disabled="disabled" placeholder="备注信息..."
data-trans="placeholder:mark_dowm">{{d.dsc}}</textarea>
</div>
</div>
</div>
</li>
</template>
<!-- 盘点输入模版 -->
<template id="pdtpl">
<div class="pdw-content">
<div class="pdw-num mui-text-center">
<input id="pd_num" value="{{d.num}}"
style="font-size: 1.25rem;width: 100%;height: 3.125rem;text-align: center;border: 0;"></div>
<div class="pdw-ptname mui-text-center">
<span>---------</span>
</div>
<div class="pdw-count">
<div class="label-count" style="text-align: center;margin-top: 0.625rem;">
<div style="width: 80%; margin: 0 auto; text-align: center;">
<input class="mui-input" style="text-align: center;" type="text" id="pd_count" value="">
</div>
<!-- <div class="mui-numbox" style="width: 80%;height: 3.125rem;" data-numbox-min="1" data-numbox-max="1000">
<button class="mui-btn mui-btn-numbox-minus" type="button" style="font-size: 1.875rem;">-</button>
<button class="mui-btn mui-btn-numbox-plus" type="button" style="font-size: 1.875rem;">+</button>
</div> -->
</div>
<!-- <div class="mui-input-row mui-input-range range-slider" style="padding-right: 0;margin: 0.625rem auto; width: 90%;"
id="mySlider">
<input type="range" min="1" max="100" value="1">
</div> -->
</div>
<div class="pddsc" style="margin: 15px auto; width: 80%;">
<textarea class="form" id="pd_dsc" rows="2" placeholder="请输入备注信息..."
data-trans="placeholder:mark_dowm"></textarea>
</div>
<div class="pdw-btn mui-text-center" style="margin-top:-1.25rem;">
<button type="button" class="mui-btn mui-btn-blue" id="pdwSubmit"><span
data-trans="html:submit">确认</span></button>
<button type="button" class="mui-btn mui-btn-default" id="pdwCancel"><span
data-trans="html:cancel">取消</span></button>
</div>
</div>
</template></body>
<script type="text/javascript">
var bt = null;
var inventoryList = [];
var typeCount = 0;
var totalCount = 0;
//var inventoryIsRuning=false;
var isInventoring = false;
var inventoryStorageKey = "inventorys";
var pd_winIndex = false; //盘点对话框
var Location = null;
app.ready(function () {
//用户信息
var user = app.getUserId();
var userInfo = app.getUser();
console.log(JSON.stringify(userInfo));
Location = userInfo.ProductionLineList[0].Location;
$("#userName").html(userInfo.RealName);
//日期
$("#pdate").html(new Date().format("yyyy/MM/dd"));
var customOptions = {
//读取数据
readDataCallback: function (data) {
if (app.pageIsActivety("inventory")) {
var scanData = data.data;
inventory(scanData);
}
},
connExceptionCallback: function (e) {
console.log(JSON.stringify(e));
}
}
bt = app.getBluetooth(customOptions);
pageLoad();
$("#start").on("tap", function () {
startInventory();
});
$("#end").on("tap", function () {
endInventory();
});
//测试扫码方法
$("#pdrotate").on("tap", function () {
//var scanData ="Item Code:23455667782 Batch number:160524001 ManufactureDate:5/23/2016 ExpiryDate:5/23/2017 GuaranteePeriod:365 D";
var scanData = '{"wlCode":"703317","pcCode":"152552555","name":"Name"}';
inventory(scanData);
});
});
// mui('body').on('tap', '.mui-coll-btn', function (e) {
// $(this).parents('li.mui-coll-li').remove()
// // myStorage.inventoryList.removeItem();
// for (var i = 0; i < inventoryList.length; i++) {
// console.log(inventoryList[i].count)
// myStorage.inventoryList[i].removeItem();
// // console.log(inventoryList[i].parents('li.mui-coll-li'))
// }
// });
//页面加载
function pageLoad() {
//检查盘点任务
var inventoryStorage = myStorage.getItem(inventoryStorageKey)
if (inventoryStorage && inventoryStorage.length > 0) {
//存在未完成的任务
inventoryLoad(inventoryStorage);
mui.confirm(app.getLang("inventory_confirm"), app.getLang("material_inventory"), [app.getLang("continue"), app
.getLang("cancel")
], function (e) {
if (e.index == 0) {
isInventoring = true;
$("#pdrotate").addClass("rotate");
$("#startPD").html(app.getLang("restart"));
} else {
//取消
inventoryClear();
$("#startPD").html(app.getLang("inventory_start"));
$("#pdrotate").removeClass("rotate");
}
})
}
}
//开始盘点
function startInventory() {
if (isInventoring) {
//重新开始盘点
if (inventoryList && inventoryList.length > 0) {
//提示用户
mui.confirm(app.getLang("inventory_restatrt_confirm"), app.getLang("material_inventory"), [app.getLang(
"sure"), app.getLang("cancel")], function (e) {
if (e.index == 0) {
inventoryClear();
}
})
}
} else {
inventoryClear();
}
isInventoring = true;
$("#pdrotate").addClass("rotate");
$("#startPD").html(app.getLang("restart"));
}
//结束盘点
function endInventory() {
//上传数据...
if (!isInventoring) {
//盘点已经结束
return;
}
if (inventoryList && inventoryList.length > 0) {
mui.confirm(app.getLang("inventory_submit_confirm"), app.getLang("material_inventory"), [app.getLang("sure"),
app.getLang("cancel")
], function (e) {
if (e.index == 0) {
var sendData = {
"Location": Location,
"InventoryMaterial": []
}
//console.log(JSON.stringify(inventoryList));
$.each(inventoryList, function (k, itemData) {
var mData = {
"Count": itemData.count,
"MaterialNo": itemData.num,
"BatchNo": itemData.batchno,
"Quantity": itemData.count,
"Remark": itemData.dsc
}
sendData.InventoryMaterial.push(mData);
});
//提交盘点数据
app.post("Inventory", {
InventoryRequestData: sendData
}, function (data) {
if (data.Code == 1) {
//提交成功
app.msg(app.getLang("submit_success"));
isInventoring = false;
$("#startPD").html(app.getLang("inventory_start"));
$("#pdrotate").removeClass("rotate");
} else {
app.msg(data.Message);
}
});
}
})
} else {
isInventoring = false;
$("#startPD").html(app.getLang("inventory_start"));
$("#pdrotate").removeClass("rotate");
}
}
//盘点操作
function inventory(number) {
if (!isInventoring) {
//盘点未开始
return;
}
//重复的物料如何处理TODO???
layer.closeAll();
var parseData = JSON.parse(number);
if (!parseData) {
var code = qrcodeParse(data, "Item Code");
var pcCode = qrcodeParse(data, "Batch number");
if (code && pcCode) {
parseData = {
wlCode: code,
pcCode: pcCode
}
}
}
if (!parseData) {
app.msg(app.getLang("qrcode_invalid"));
return;
}
var MaterialNo = parseData.wlCode; //qrcodeParse(number, "Item Code");
var BachNo = parseData.pcCode; //qrcodeParse(number, "Batch number");
var wldata = {
num: parseData.wlCode,
pcnum: BachNo,
name: "--"
}
//app.msg(parseData.wlCode);
//加载物料单位
app.post('MaterialInfo', {
MaterialNameRequestData: {
MaterialNo: MaterialNo
}
}, function (data) {
if (data.Code == 1) {
//获取成功
var mdata = data.MaterialInfoResponseData;
var wlName = mdata.Name ? mdata.Name : "--";
var Unit = mdata.Unit ? mdata.Unit : "--";
wldata.unit = Unit;
wldata.name = wlName;
//console.log(JSON.stringify(data));
var tpl = $("#pdtpl").html();
var content = "";
laytpl(tpl).render(wldata, function (html) {
content += html;
});
content = app.langTranslate(content);
// $('.mui-coll-btn').on('button', function () {
// $(this).parents('li.mui-coll-li').remove()
// console.log(this)
// });
//盘点输入对话框
pd_winIndex = layer.open({
type: 1,
title: false,
closeBtn: 0,
area: ['80%', 'auto'],
shadeClose: false,
skin: 'pdwindow',
content: content,
success: function (layero, index) {
mui(".mui-numbox").numbox();
//监听滑块输入
mui('#mySlider').on("input", 'input', function () {
$("#pd_count").val($(this).val());
});
//监听手动输入
$("#pd_count").on("change", function () {
$("#mySlider input").val($(this).val());
});
//绑定方法
$("#pdwSubmit").on('tap', function () {
var num = $("#pd_num").val();
var count = $("#pd_count").val();
var dsc = $("#pd_dsc").val();
var itemData = {
num: num,
count: count,
dsc: dsc,
batchno: BachNo,
unit: wldata.unit,
name: wldata.name
}
console.log(JSON.stringify(itemData));
if (count < 1) {
setTimeout(function () {
$("#pd_count").focus();
}, 500)
} else {
//app.msg(itemData.num);
addInventoryItem(itemData);
layer.closeAll();
}
});
$("#pdwCancel").on('tap', function () {
layer.closeAll();
});
//自动焦点
var defaultText = $("#pd_count").val();
$("#pd_count").empty().focus().val(defaultText);
//document.activeElement.blur();
//$("#pd_count").focus();
}
});
} else {
app.msg(app.getLang("material_no_info"));
}
});
}
//添加盘点记录
function addInventoryItem(data) {
inventoryList.unshift(data);
myStorage.setItem(inventoryStorageKey, inventoryList);
typeCount += 1;
totalCount += parseInt(data.count);
var tpl = $("#tpl").html();
var content = "";
laytpl(tpl).render(data, function (html) {
content += html;
});
$("#pdList").prepend(app.langTranslate(content));
$("#typeCount").html(typeCount);
$("#totalCount").html(totalCount);
//滚动区域
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数
});
}
// 删除盘点信息
// // $('.mui-coll-btn').addEventListener("del",function () {
// // console.log("tap event trigger");
// // });
// // typeCount 物料数据数 4
// // inventoryStorageKey 英文 inventorys
// // inventoryList 物料数据
// // typeCount 物料数据数 4
// // totalCount 总数 128014
mui('body').on('tap', '.mui-coll-btn', function (e) {
$(this).parents('li.mui-coll-li').remove()
// inventoryList.splice(this.index, 1)
// myStorage.inventoryList.removeItem();
for (var i = 0; i < inventoryList.length; i++) {
// inventoryList.splice(i,1)
console.log(i)
// myStorage.inventoryList[i].removeItem();
// console.log(inventoryList[i].parents('li.mui-coll-li'))
}
});
//加载盘点信息
function inventoryLoad(data) {
inventoryList = data;
var tpl = $("#tpl").html();
var content = "";
mui.each(inventoryList, function (index, value) {
typeCount += 1;
totalCount += parseInt(value.count);
laytpl(tpl).render(value, function (html) {
content += html;
});
});
$("#pdList").prepend(content);
$("#typeCount").html(typeCount);
$("#totalCount").html(totalCount);
//滚动区域
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数
});
}
//数据清理
function inventoryClear() {
typeCount = 0;
totalCount = 0;
$("#typeCount").html(typeCount);
$("#totalCount").html(totalCount);
inventoryList = [];
myStorage.removeItem(inventoryStorageKey);
$("#pdList").empty();
}
function qrcodeParse(qrcodeString, search) {
var value = "";
if (search) {
var startIndex = qrcodeString.indexOf(search);
if (startIndex >= 0) {
var endIndex = qrcodeString.indexOf(" ", startIndex + search.length);
var validStr = qrcodeString.substring(startIndex, endIndex);
if (validStr.indexOf(":") > 0) {
value = validStr.substring(validStr.indexOf(":") + 1);
}
}
}
return value;
}</script>
</html>
android
html5
数组删除