mui用列表实现表格的增删改查

我的需求：

表格实现增删改查，表格有两列的表，有三列的表，因为移动端的表格操作不方便，所以想采用以前常用的列表形式来实现。

先看画面效果。

实现步骤：

 一，先用静态html代码，实现画面呈现的样式，采用列表嵌套表格的方法，表格可以约束列宽。

<div class="mui-table">
    <div class="mui-table-cell mui-col-xs-2 mui-text-center">
        <span class="mui-h4">序号</span>
    </div>
    <div class="mui-table-cell mui-col-xs-6 mui-text-center">
        <span class="mui-h4">检测人</span>
    </div>
    <div class="mui-table-cell mui-col-xs-4">
    </div>
</div>

<div class="mui-card" style="margin-bottom: 35px;">
    <ul id="OA_task_1" class="mui-table-view">
        
        <li class="mui-table-view-cell" id="1">
            <div class="mui-slider-right mui-disabled">
                <a class="mui-btn mui-btn-red">删除</a>
            </div>
            <div class="mui-slider-handle">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-4">
                        <h5 class="mui-ellipsis">1</h5>
                    </div>
                    <div class="mui-table-cell mui-col-xs-8">
                        <span class="mui-h5">张三</span>
                    </div>
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell" id="2">
            <div class="mui-slider-right mui-disabled">
                <a class="mui-btn mui-btn-red">删除</a>
            </div>
            <div class="mui-slider-handle">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-4">
                        <h5 class="mui-ellipsis">2</h5>
                    </div>
                    <div class="mui-table-cell mui-col-xs-8">
                        <span class="mui-h5">李四</span>
                    </div>
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell" id="3">
            <div class="mui-slider-right mui-disabled">
                <a class="mui-btn mui-btn-red">删除</a>
            </div>
            <div class="mui-slider-handle">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-4">
                        <h5 class="mui-ellipsis">5</h5>
                    </div>
                    <div class="mui-table-cell mui-col-xs-8">
                        <span class="mui-h5">爱新觉罗</span>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

删除采用手指左滑删除，这个是官方网站的示例，直接copy，删除的js代码如下：

(function($) {

$('#OA_task_1').on('tap', '.mui-btn', function(event) {
var elem = this;
var li = elem.parentNode.parentNode;
mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
if (e.index == 0) {
li.parentNode.removeChild(li);
} else {
setTimeout(function() {
$.swipeoutClose(li);
}, 0);
}
});
});
var btnArray = ['确认', '取消'];

})(mui);

 

二、增加数据时，准备迁移到新的画面，用户选择之后返回本画面，在列表的最后添加，添加的规则是序号最大加一，名称直接显示，js代码：

mui.plusReady(function() {

    document.getElementById("setry").addEventListener('tap', function() {
        var dBox = document.getElementById("OA_task_1");
        dBox.appendChild(createFragment("沙悟净"));
    });
    
});

var createFragment = function(name) {
    
    var dBox = document.getElementById("OA_task_1");
    var h5 = dBox.getElementsByTagName('h5');
    var id = 1;
    if(h5.length >0) {
        id = id + Number(h5[h5.length-1].innerText);
    }
    
    var fragment = document.createDocumentFragment();
    var li;
    //mui.toast(data.length);
    //for (var i = 0; i < data.length; i++) {
        li = document.createElement('li');
        li.id = id;
        li.className = 'mui-table-view-cell';
        li.innerHTML =
            '<div class="mui-slider-right mui-disabled"><a class="mui-btn mui-btn-red">删除</a></div><div class="mui-slider-handle"><div class="mui-table"><div class="mui-table-cell mui-col-xs-4"><h5 class="mui-ellipsis">'+ id +'</h5></div><div class="mui-table-cell mui-col-xs-8"><span class="mui-h5">'+ name +'</span></div></div></div>';
        fragment.appendChild(li);
    //}
    return fragment;
};

 

 

 三、画面操作中，数据不进行提交，而是在最后用户点击提交按钮，统一提交，所以，增加，删除（无修改）操作完成后，直接获取列表数据，IF提交。

获取列表内容的代码：

document.getElementById("next").addEventListener('tap', function() {
                    var dBox = document.getElementById("OA_task_1");
                    var dSpan = dBox.getElementsByTagName('span');
                    var spans = [];
                    
                    for(var i=0;i<dSpan.length;i++){
                        console.log(dSpan[i].innerText);
                        spans.push(dSpan[i].innerText);
                    }
                });

 

这样，静态的调研工作就结束了，接下来把静态列表，通过IF获取动态做成，就大功告成了。