记一个js页面表格处理

2019-12-06 18:15:06  卢浮宫  阅读量:1620  版权声明:本文为站长原创文章,转载请写明出处


一、背景

    在不久之前,在某项目中新增数据时弹出框,写入参数然后点击保存的。但是,相关人员反映:你们这个操作太繁琐,我要直接

在当前页面全部操作,双击可以修改(我们旧系统就是可以这样的!)[草泥马]

二、找寻方案

    讲真,在某前端框架中暂没有找到太好的方案的(要是用element就很简单了,[污])。找不到就自己写吧,于是参考网上的一个资源,

算是大致能够实现吧,而且无需引入插件,几十行js就可以了。

三、没什么说的,上代码,简单记录下

    页面代码如下:

     <table id="XXX" border="1" style="width: 80%;margin-left: 5%;text-align: center;">

                <tr>
<td></td>
<td colspan="4">入库单件</td>
<td></td>
<td colspan="4">入库合计</td>
</tr>
<tr class="info">
<td>序号</td>
<td>实长cm</td>
<td>实宽cm</td>
<td>实高cm</td>
<td>实重kg</td>
<td>件数</td>
<td>原总重量kg</td>
<td>原总方数</td>
<td>原计费方数</td>
<td>操作</td>
</tr>
</table>

    js处理如下:

<script>

$('table').on('blur','[contenteditable="true"]',function(){
var data = xa.getTableData();
var index = $(this).parent().attr('index');
var val = $(this).html();
var attr = $(this).attr('data-role');
data[index][attr] = val;
xa.saveData(data);
})
$('table').on('click','.layui-btn-danger',function(){
var data = xa.getTableData();
var index = $(this).parent().parent().attr("index");
data.splice(index,1);
xa.saveData(data);
xa.add();
})
</script>

tableDataAdd:function(){
var data = xa.getTableData();
data.push({"index": "", "length": "", "width": "", "height": "", "weight": "", "goodNum": "", "totalWeight": "", "totalVolumn": "", "totaForCharge": ""});
xa.saveData(data);
xa.add();
},
saveData:function(data){
console.log(xa.tableList);
xa.tableList = JSON.stringify(data);
},
add:function(){
xa.removeTr();
var data = xa.getTableData();
$.each(data,function(i, v){
$("<tr>").attr("index",i).html(
"<td contenteditable='true' data-role='index' style='height:30px'>" + (i+1) + "</td>" +
"<td contenteditable='true' data-role='length'>" + v.length + "</td>" +
"<td contenteditable='true' data-role='width'>" + v.width + "</td>" +
"<td contenteditable='true' data-role='height'>" + v.height + "</td>" +
"<td contenteditable='true' data-role='weight'>" + v.weight + "</td>" +
"<td contenteditable='true' data-role='goodNum'>" + v.goodNum + "</td>" +
"<td contenteditable='true' data-role='totalWeight'>" + v.totalWeight + "</td>" +
"<td contenteditable='true' data-role='totalVolumn'>" + v.totalVolumn + "</td>" +
"<td contenteditable='true' data-role='totaForCharge'>" + v.totaForCharge + "</td>" +
"<td><button class='layui-btn layui-btn-danger layui-btn-xs'>删除</button></td>"
).insertAfter("tr:last");
});
xa.saveData(data);
},
removeTr:function(){
var trs = $("#cargoSizeTable tr");
for(var i=2;i<trs.length;i++){
trs[i].remove();
}
},
getTableData:function(){
if(xa.tableList.length === 0){
return [];
}else{
return JSON.parse(xa.tableList);
}
},
addRow:function(){
var data = xa.getTableData()
var index = $(this).parent().parent().attr("index");
data.splice(index,1);
xa.saveData(data);
xa.add();
}

四、附个效果图吧

    

最新评论: