layui批量添加选中表格table的数据

最新推荐文章于 2022-04-07 20:21:36 发布

TSwizzle1327

最新推荐文章于 2022-04-07 20:21:36 发布

阅读量1.3k

点赞数 1

分类专栏： Layui 文章标签： layui

本文链接：https://blog.csdn.net/jduksa/article/details/113319737

版权

本文介绍如何在layui框架下实现表格数据的批量选择功能，并详细阐述了批量添加选中项到表格的操作流程，通过示例代码展示了具体的实现步骤。

摘要由CSDN通过智能技术生成

界面效果图：

//批量添加 html界面

@{
    ViewBag.Title = "Index";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="~/Layui/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="~/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
        /*您可以将下列样式写入自己的样式表中*/
        .childBody {
            padding: 15px;
        }

        /*layui 元素样式改写*/
        .layui-btn-sm {
            line-height: normal;
            font-size: 12.5px;
        }

        .layui-table-view .layui-table-body {
            min-height: 256px;
        }

        .layui-table-cell .layui-input.layui-unselect {
            height: 30px;
            line-height: 30px;
        }

        /*设置 layui 表格中单元格内容溢出可见样式*/
        .table-overlay .layui-table-view,
        .table-overlay .layui-table-box,
        .table-overlay .layui-table-body {
            overflow: visible;
        }

        .table-overlay .layui-table-cell {
            height: auto;
            overflow: visible;
        }

        /*文本对齐方式*/
        .text-center {
            text-align: center;
        }

        .layui-form-label.layui-required:after {
            content: "*";
            color: red;
            position: absolute;
            top: 10px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="layui-tab-content">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div class="layuimini-container" style="height:53px;">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form layuimini-form">
                        <div class="layui-col-xs12 layui-col-sm1 layui-col-md1" style="margin-top:8px; margin-left:8px;">
                            <div class="layui-form-item">
                                <button class="layui-btn " lay-submit lay-filter="Add" id="AddFile">添加教学文档</button>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm3 layui-col-md3" style="margin-top:8px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label layui-required">主类型</label>
                                <div class="layui-input-block">
                                    <select name="ParentIdSelect" id="ParentIdSelect" lay-verify="" lay-search="" lay-filter="ParentIdSelect"></select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm3 layui-col-md3" style="margin-top:8px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label  layui-required">子类型</label>
                                <div class="layui-input-block">
                                    <select name="ChildIdSelect" id="Ch