zoukankan      html  css  js  c++  java
  • 当你的layui表格要做全选+删除功能【兼容ie8】

                                    <!-- 全选 -->
                                    <div class="choose">
                                        <input type="checkbox" id="chooseAll" name="" title="全选" lay-skin="primary" onclick="chooseall">
                                        <span onclick="delAll()" lay-submit lay-filter="delete">删除记录</span>
                                    </div>
     <td>
                <!-- <input type="checkbox"> -->
                <input type="checkbox" data-id="{{ item.id }}" lay-skin="primary" name="idList[]" value="{{item.id}}">
            </td>
    

      

    // 全选/取消全选
    var flag = true;
    var chooseAllstr = '';
    $('.choose').on('click', '.layui-form-checkbox', function() {
            var cb = $(".layui-form-checkbox");
            $(".layui-form-checkbox").each(function() {
                if (flag) {
                    $(this).addClass('layui-form-checked')
                } else {
                    $(this).removeClass('layui-form-checked')
                }
            })
            flag = !flag;
        })
    

      

    // 删除全选的数据
    function delAll() {
        chooseAllstr = '';
        $(".layui-form-checked").each(function() {
            if ($(this).parent().find('input').data("id") && $(this).parent().find('input').data("id") != undefined) {
                chooseAllstr += $(this).parent().find('input').data("id") + ','
            }
        })
        if (chooseAllstr != '') {
            //询问框
            layer.confirm('确认删除全部记录吗?', {
                btn: ['删除', '取消'] //按钮
            }, function() {
                ajax('/pu/ScancodeBehavior/Delete', { idList: chooseAllstr }, function(data) {
                    if (data.success) {
                        layer.closeAll();
                        popupSuccess(data.msg);
                        getList(param, function(data) {
                            if (Number(data.count) != 0) {
                                var getTpl = tabletpl.innerHTML,
                                    view = document.getElementById('table-adm');
                                laytpl(getTpl).render(data.list, function(html) {
                                    view.innerHTML = html;
                                });
    

    -------------------------------------------------------------------  

    如果想用layui的name属性获取选中的数据:

    <span lay-submit lay-filter="deteleSubmit">删除记录</span>
    

      拼接为逗号分割的字符串,供接口传参,进行删除

            form.on('submit(deteleSubmit)', function(data) {         
                var shuzu = [];
                var arr = '';
                Object.keys(data.field).forEach(function(key) {
                    shuzu.push(data.field[key]);
                });
                arr = shuzu.join(",");
            })
    

      

  • 相关阅读:
    day 05 讲解java三大特性
    day 02 运算符
    石大 6-9 待提交
    poj分类
    NLog使用总结
    VS 2010下单元测试
    MQTT----物联网常用的消息队列协议
    使用jfreechart生成柱状图、折线图、和饼状图
    JavaBean持久化
    使用maven搭建springMVC开发环境
  • 原文地址:https://www.cnblogs.com/nangras/p/10612823.html
Copyright © 2011-2022 走看看