layui 左右数据表格展示数据级联双tab

最新推荐文章于 2024-07-04 16:56:10 发布

Aimyone

最新推荐文章于 2024-07-04 16:56:10 发布

阅读量4.6k

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/qq_36636312/article/details/106385808

版权

layui 专栏收录该内容

46 篇文章 5 订阅

订阅专栏

页面展示：

在这里插入图片描述

在这里插入图片描述
注意：
1，两个tab标题栏
2，工具栏与数据表格排放位置
3，左右数据表格排版
4，数据表格数据级联

页面css：

<style>
    .layui-tab {
        margin: 0;
    }


    /*边框*/

    .layui-tab-title {
        border-bottom-width: 3px;
        border-bottom-color: #f7f7f7;
    }


    /*字体*/

    .layui-tab-title li {
        font-size: 11px!important;
    }


    /*高度*/

    .tabwrap .layui-tab-title {
        height: 24px;
    }


    /*高度*/

    .tabwrap .layui-tab-title li {
        line-height: 24px;
    }


    /*高度*/

    .tabwrap .layui-tab-title .layui-this:after {
        height: 24px;
    }

    .layui-tab-title .layui-this:after {
        /*height: auto!important;*/
    }

    .layui-table-view .layui-form-checkbox{
        margin-top:0px !important;
    }

    /*选中时样式*/

    .tabwrap .layui-tab-title .layui-this {
        color: white;
        background: #41BFC0;
    }


    /*关闭按钮样式*/

    .tabwrap .layui-tab-title li .layui-tab-close {
        color: #FFFFFF!important;
    }


    /*顶部搜索容器*/

    .tophead {
        height: 32px;
        /*border-bottom: 1px solid #F7F7F7;*/
        padding: 0 5px;
    }


    /*顶部输入框，下拉框去掉layui默认边距*/

    .tophead .layui-form-item {
        margin-bottom: 0px!important;
    }


    /*顶部输入框，下拉框左边文本样式*/

    .tophead .layui-form-label {
        padding: 0;
        line-height: 25px;
        width: auto;
    }


    /*顶部form块样式*/

    .tophead .layui-input-block {
        margin-left: 34px;
        min-height: 26px;
    }


    /*顶部输入框，下拉框设置高度*/

    .tophead .layui-input,
    .layui-select {
        height: 25px;
    }


    /*顶部下拉框设置子项高度*/

    .tophead .layui-form-select dl {
        top: 26px;
        padding: 0;
    }


    /*顶部下拉框设置子项内容高度*/

    .tophead .layui-form-select dl dd,
    .layui-form-select dl dt {
        line-height: 24px;
    }

    .tophead .layui-form-item {
        width: 165px;
    }


    /*顶部下拉框图标大小*/

    /*.tophead .layui-form-select .layui-edge {*/
        /*border-width: 4px;*/
    /*}*/
    .tophead .layui-form-select .layui-edge {
        border-width: 6px;
    }

    /*搜索框左边距*/

    .tophead .search .layui-input-block {
        margin-left: 32px;
    }


    /*表格字体大小*/

    .layui-table td,
    .layui-table th {
        font-size: 11px!important;
    }


    /*表格边距*/

    .layui-table,
    .layui-table-view {
        margin: 0;
    }

    .tab0>li:nth-child(1) .layui-icon.layui-unselect.layui-tab-close,
    .tab0>li:nth-child(2) .layui-icon.layui-unselect.layui-tab-close {
        display: none;
    }

    .laytable-cell-1-0-0 .layui-icon {
        margin-top: 5px !important;
    }

    .layui-table-view .layui-form-checkbox{
        margin-top:0px !important;
    }

    .laytable-cell-1-0-0 .layui-btn {
        margin-top: 2px !important;
    }

    .layui-btn-primary1 {
        border: 0px solid #C9C9C9;
        color: #0066CC;
        background-color: transparent;
        /*background: #ffffff;*/
    }

    .layui-btn:hover {
        color: black;
    }

</style>

页面排版：

<body>
<div>
    <div class="layui-tab tabwrap" lay-allowClose="true" lay-filter="tab" style="border-color: #f7f7f7;border-style: solid;">
        <!--<ul class="layui-tab-title" id="layui-tab-all" style="border: 1px solid #E6E6E6;background: #F5F7FA;">-->
        <ul class="layui-tab-title tab0" id="layui-tab-all">
            <!--三级导航（tab）-->
            <li class="layui-this">全部</li>
            <li>检索</li>
        </ul>
        <div class="layui-tab-content content0" style="padding: 2px;">
            <!--tab--全部-->
            <div class="layui-tab-item layui-show">
                <div class="flex flex-align-center flex-jusity-betreen tophead backgroundf">
                    <div class="flex flex-align-center">
                        <div class="layui-form flex flex-align-center">
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类</label>
                                <div class="layui-input-block">
                                    <select name="classid" id="classid" lay-filter="aihao">
                                        <option value=""></option>
                                        <%--<option value="0">分类1</option>--%>
                                        <%--<option value="1">分类2</option>--%>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item marginleft10 search">
                                <label class="layui-form-label">查询</label>
                                <div class="layui-input-block">
                                    <input type="text" name="businessname" id="businessname" placeholder="请输入业务名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal marginleft10" onclick="searchBtn()">确定</button>
                        </div>
                    </div>
                    <div class="layui-btn-group btns tab1">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='101'>分类维护</button>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='102'>业务维护</button>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='103'>新增功能</button>
                    </div>
                </div>
                <div class="flex flex-jusity-betreen " style="height:100%;width: 100%;background: #F7F7F7;padding: 3px 0;">
                    <div class="backgroundf">
                        <table id="demo" lay-filter="test"></table>
                    </div>
                    <div class="backgroundf">
                        <table id="demor" lay-filter="testr"></table>
                    </div>
                </div>
            </div>
            <!--tab--检索-->
            <div class="layui-tab-item">
                <div class="flex flex-align-center flex-jusity-betreen tophead backgroundf" style="border-bottom: 2px solid #F7F7F7;">
                    <div class="flex flex-align-center">
                        <div class="layui-form flex flex-align-center">
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类</label>
                                <div class="layui-input-block">
                                    <select name="mainid" id="mainid" lay-filter="aihao">
                                        <option value=""></option>
                                        <%--<option value="0">分类1</option>--%>
                                        <%--<option value="1">分类2</option>--%>
                                    </select>
                                    <%--<select name="interest" lay-filter="aihao">--%>
                                        <%--<option value="0">分类1</option>--%>
                                        <%--<option value="1">分类2</option>--%>
                                    <%--</select>--%>
                                </div>
                            </div>
                            <div class="layui-form-item marginleft10 search">
                                <label class="layui-form-label">查询</label>
                                <div class="layui-input-block">
                                    <input type="text" name="gnname" id="gnname" placeholder="请输入功能名称"  class="layui-input">
                                </div>
                            </div>
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal marginleft10" onclick="searchgndata()">确定</button>
                        </div>
                    </div>
                </div>
                <div class="backgroundf">
                    <table id="tab2_js" lay-filter="tab2_js"></table>
                </div>
            </div>

        </div>
    </div>
</div>
</body>

JS代码：级联js

//启用函数
layui.use(['form','table','element','soulTable'], function() {
        var form = layui.form;
		searchBtn();
})

//左表数据加载
function searchBtn() {
      var postdata={}
        if ($("#classid").val()) {
            postdata.classid=$("#classid").val();
        }
        if ($("#businessname").val()) {
            postdata.businessname=$("#businessname").val();
        }
        dLongDtool.getJSON("/Metadatafl/toList",postdata,function (data) {
            business(data.list);
        },true);
    }

function business(data) {
        var table=layui.table;

        //table实例
        table.render({
            elem: '#demo',
            height: "full-70",
            width: 3*CLIENTWIDTH/10-15,
            size: 'sm', //小尺寸的表格
            url: '', //数据接口
            page: false, //开启分页
            cols: [
                [ //表头
                    {field: 'id', title: 'id', event: 'setSign', style:'cursor: pointer'},
                    { field: 'classname', title: '分类', width: '40%' },
                    { field: 'businessname', title: '业务名', width: '60.5%', }
                ]
            ],
            data:data?data:[],
            done: function () {
                $("[data-field='id']").css('display','none');
            }

            // ,page: true //是否显示分页
            // ,limits: [5, 7, 10]
            // ,limit: 5 //每页默认显示的数量
            // done: function() {
            //     // 在 done 中开启
            //     layui.soulTable.render(this)
            // }

            //这个test在div中要写属性lay-filter="test"
            //这是单击触发事件（默认），如果需要双击触发事件，则table.on('rowDouble(test)', function(obj) {}）
 			table.on('row(test)', function(obj){ 
            var data = obj.data;//data为当前点击行的数据
            selid=data.id;
            searchtestlayuitablesub(selid);//级联，调用右表数据加载函数
            // layer.alert(JSON.stringify(data), {
            //     title: '当前行数据：'+selid
            // });

            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });
    }
    
//右边数据加载
 function searchtestlayuitablesub(selid) {
        $.getJSON("/Metadatafl/tosubList?selid="+selid,function (data) {
            subfunction(data.list);
        });
    }

//右边表格
 function subfunction(data) {
        var table = layui.table;
        //第2个实例
        table.render({
            elem: '#demor',
            height: "full-70",
            width: 7* CLIENTWIDTH / 10,
            size: 'sm' //小尺寸的表格
            ,
            url: '' //数据接口
            ,
            page: false //开启分页
            ,
            cols: [
                [ //表头
                    {field: 'id', title: 'id', width: '10%'},
                    // {field: 'lxlabel', title: '类型', width: '10%',templet:'<div>{{lxlabel(d.lxlabel) }}</div>'},
                    {field: 'lxlabel', title: '类型', width: '10%'},
                    {field: 'mc', title: '名称', sort: true, width: '20%'},
                    {field: 'dm', title: '代码', sort: true, width: '20%',},
                    {field: 'created', title: '创建日期', sort: true, width: '20%', templet : "<div>{{layui.util.toDateString(d.ordertime, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
                    {field: 'right',  title: '操作', align:'center', toolbar: '#barDemo'}
                    // {field: 'username', title: '操作', sort: true, width: '20%'},
                    // {field: 'sex', title: '小数位数', sort: true, width: '10%',}
                ]
            ],
            data: data? data : [],
            done: function () {
                $("[data-field='id']").css('display','none');
            }
        });

        var table = layui.table;
        //监听工具条
        table.on('tool(testr)', function(obj){
            var data = obj.data;
            var subid=data.id;
            // if(obj.event === 'detail'){
            //     layer.msg('ID：'+ data.id + ' 的查看操作');
            // } else
                if(obj.event === 'del'){
                layer.confirm('确定删除么?', function(index){
                    var postdata={id:subid};
                    $.getJSON("/Metadatafl/deletegn",postdata, function (obj) {
                        if (obj.success) {
                            alert(obj.msg)
                            searchtestlayuitablesub(selid)
                        }else{
                            alert(obj.msg)
                            searchtestlayuitablesub(selid)
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2,
                    title: '日志管理',
                    area: ['1000px', '700px'],
                    content: '/Metadatafl/todetaillog?id='+subid //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            }
        });
    }