• 0
  • 0

LayUI 不用静态表格 批量操作演示

2019-06-27 722 0 admin 所属分类:LAYUI

添加事件按钮

<a class="layui-btn layui-btn-normal" id="batchSet"  style="display: none;">设置状态</a>

表头添加全选复选框

<th width="30"><input type="checkbox" name="all"  lay-skin="primary" lay-filter="all"></th>

表项添加单选复选框

<td><input type="checkbox" name="{$v['id']}"  lay-skin="primary" value="{$v['id']}" lay-filter="one"></td>

数据返回渲染复选框监听点击事件

form.render('checkbox');
addCheckBoxListen();

按钮监听

$('#batchSet').click(function(event) {
    var elements = $('#ajaxData table tbody tr input[type=checkbox]:checked');
    var length = elements.length;
    if (length == 0) {
        return mymsg('没有选中表格项');
    }
    var ids = new Array();
    $.each(elements, function(i, v) {
        ids.push(v.value);
    });
    ids = ids.join(',');
    var title = '批量设置权限';
    aid = ids;
    layer.open({
        type: 2,
        title: title,
        shadeClose: true,
        shade: 0.3,
        area: ['700px', '500px'],
        content: '你的请求地址'
    });
});

复用函数

function addCheckBoxListen() {
    //监听复选框
    form.on('checkbox(all)', function(data) {
        if (data.elem.checked) {
            $('#ajaxData table tbody tr input[type=checkbox]').prop("checked", true);
            $('#batchSet').show();
        } else {
            $('#batchSet').hide();
            $('#ajaxData table tbody tr input[type=checkbox]').prop("checked", false);
        }
        form.render('checkbox');
    });
    form.on('checkbox(one)', function(data) {
        if (data.elem.checked) {
            $('#batchSet').show();
        } else {
            var length = $('#ajaxData table tbody tr input[type=checkbox]:checked').length;
            if (length == 0) {
                $('#batchSet').hide();
            }
        }
    });
}


返回顶部