实现动态加载layui折叠画板element组件，并支持checkbox勾选功能（最详细版）

最近一直有个需要，需要实现一个选表选字段的功能，具体点说就是，列出一些表，可以选择，包括其字段（属性），并且还要有表信息和字段的具体信息；所以调研了好多组件发现没有什么合适的，正好看到layui的这款画板组件，感觉还行，就实现了一下。具体也看以下效果吧。

官网示例图，展开后点击内容文字

我修改后实现的示例图，我的展开是新加了一个表格；

 

如果跟你的需要一致，那就跟着往下看，废话没有，我就直接上代码 

H5页面

   <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm"   onclick="getChecked();"   >勾选指定节 </button>
  </div>
   <div class="layui-collapse" id="tableListId">  </div>

js代码

$(document).ready(function() {
    //默认加载
    getTables();
});

/**
 * 获取所有hive表
 */
function getTables() {
    var url = "/genTable/model_list";
    requestGetAjax(url, function (resData) {
        console.info(resData);
        if ("0" == resData.code ) {
            console.info(resData.data);
            if (resData.data.length > 0)
            setTables(resData.data);//查到结果后先去实现页面一打开后的列表信息
        } else {
            layer.close(index);
            layer.alert(resData.msg, {icon: 2});
        }
    });

}

/**
 * 设置表格
 * @param data
 */
function setTables(data) {
    var result = "";
for (var i = 0 ; i < data.length; i++) {
    result += "<div class='layui-colla-item'>";
    result += " <h2 class='layui-colla-title' onclick='getColumnListById("+data[i].tableId+",\""+data[i].tableName+"\")'><input type='checkbox'  value='table-"+data[i].tableName+"'  >"+data[i].tableName+"<span>("+data[i].tableComment+")</span>  </h2>";//这个checkbox的vlalue做了标记，为了分类处理，表示勾选的是什么类型的数据
    result += "<div id='"+data[i].tableId+""+data[i].tableName+"' style='display: none'> </div>";
    result += " </div>";
}
    $("#tableListId").append(result);
    layui.element.init();//初始化画板（必须加，不然不生效折叠）
}

/**
 * 根据id去查所有的字段信息
 * @param Id
 * @param tableName
 */
function getColumnListById(Id,tableName) {
   var url =  '/genTableColumn/modelColumnByTableId';
   var param = {"tableId":Id};
    requestPostAjax(url,false, param, function (resData) {
        console.info(resData);
        if ("0" == resData.code ) {
            if (resData.data.length > 0)
            setColumnTables(resData.data,Id+tableName,tableName);
        } else {
            layer.alert(resData.msg, {icon: 2});
        }
    });
}

function setColumnTables(data,styleId,tableName) {
    //获取当前的display值：是否被隐藏
    var style = $("#"+styleId).css("display");
    if(style == "none"){ //如果被隐藏,清空内容,重新赋值在显示
        $("#"+styleId).empty();
        var result = "";
        //表头
        result += "<table class='layui-table'> <colgroup>  <col width='150'> <col width='200'>  <col> </colgroup>";
        result += "<thead>  <tr>  ";
        result += "<th> <input type='checkbox' id='checkAll'   name='"+tableName+"' onclick='selectCheckboxAll(\"checkAll\",\""+tableName+"\")'  ></th>";
        //标题
        result += "<th>名称</th> <th>类型</th> <th>描述</th> " ;
        result += "</tr> </thead>";
        result += "  <tbody>";
        for (var i = 0 ; i < data.length; i++) {
            result += " <tr>";
            result += " <td><input type='checkbox' name='"+tableName+"' value='"+tableName+"-"+data[i].columnName+"'></td>";//这里也是为了做标记，表示勾选的内容是哪行的数据
            result += " <td>"+data[i].columnName+"</td>";
            result += " <td>"+data[i].columnType+"</td>";
            result += " <td>"+data[i].columnComment+"</td>";
            result += " </tr>";

        }
        result += "  </tbody>  </table>";
        $("#"+styleId).append(result);
        $("#"+styleId).css('display','block');
    }else{ //如果是已经显示,则关闭
        $("#"+styleId).css('display','none');
    }

}

/**
 * 全选与反选
 * 根据不同的name
 * @param id
 * @param name
 */
function selectCheckboxAll(id,name) {
    if ($("#" + id).prop("checked")) {
        $("input[type='checkbox'][name='" + name + "']").prop("checked", true);//全选

    } else {
        $("input[type='checkbox'][name='" + name + "']").prop("checked", false);  //取消全选
    }

}

//获取所有页面的checkbox的值
function getChecked(){

    //div内所有的input
    var items = $(".layui-collapse input");
    var len = items.length;
    //创建数组用来存放所有勾选项
    var item_value = [];

    for (var i = 0; i < len; i++) {
        //判断是否被选中
        if(items[i].checked)
        item_value.push($(items[i]).val());
    }

    console.log(item_value);
    alert(item_value);

};

 结果示例如下，

代码就这么简单，如果有问题多看一下哪里出错，如果你有更好的建议还请留言讨论，或者加q：983469079。

如果对你有帮助，点个赞再走呗~