Layui同页面多个数据表格

前言:

        1、个人转码小说网站:友书-绿色、纯净、无广告,欢迎广大小说阅读爱好者同行来本网站看小说

        2、书友交流群:580462139(群主及管理均为资深90后程序猿,也欢迎诸位刚毕业的小白入群咨询编程、面试、就业等各方面问题哦)

        3、对外承接app API开发、网站建设、系统开发,联系方式于文章最下方 

 

正文:

 1、截图(因为我是tab页,所以放两张图,这两个数据表格其实是在同一个html页面上):

《Layui同页面多个数据表格》

 

《Layui同页面多个数据表格》

 

2、前端html代码:

  <div class="layui-form layui-tab-item" style="width:100%">
                    <div class="demoVisitTable">
                        门诊号:
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" class="layui-input" id="txt_jz_VisitId" style="width: 180px;">
                            </div>
                        </div> 
                        <button class="layui-btn" data-type="jzreload" id="but_jzreload" style="width: 90px">搜索</button> 
                        <button class="layui-btn layui-btn-primary" id="but_VisitAdd" style="width: 90px">新增</button>
                    </div>
                    <script type="text/html" id="barVisitTDemo">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="view">查看</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    </script>
                    <table class="layui-hide" id="bindVisitTable" lay-filter="bindVisitTable"></table>
                </div>
                <div class="layui-form layui-tab-item">

                    <div class="demoZYTable">
                        入院日期:
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" class="layui-input" id="IHDate" placeholder="yyyy-MM-dd" style="width: 180px;">
                            </div>
                        </div> 
                        <div class="layui-inline">
                            <div class="layui-input-inline" runat="server">
                                <select id="ClinicDoctorID" lay-filter="ClinicDoctorID" style="width: 180px;">
                                    <option>请先选择门诊科室</option>
                                </select>
                            </div>
                        </div>
                        <button class="layui-btn" data-type="zyreload" id="zyreload" style="width: 90px">搜索</button>
                        <button class="layui-btn layui-btn-primary" id="but_HospitAdd" style="width: 90px">新增</button>
                    </div>
                    <script type="text/html" id="barHospitDemo">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="view">查看</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    </script>
                    <table class="layui-hide" id="bindZhuYuanTable" lay-filter="bindZhuYuanTable"></table>
                </div>

 

3、前端js代码:

//渲染就诊记录
                table.render({
                    elem: '#bindVisitTable'
                    , method: 'post'
                    , url: '../Patient/GetClinicList'
                    , where: { accessToken: accessToken, patientId: patientId, visitId: "", recordTime: "", departId: "", doctorId: "", diagnoseType: "" }
                    , cols: [[
                        { checkbox: true, fixed: true, field: 'Id' }
                        , { field: 'PatientId', title: '病人Id', hide: true }//此列为隐藏列,为方便子页面传值所用
                        , { field: 'EmpId', title: '病人EmpId', hide: true }//此列为隐藏列,为方便子页面传值所用
                        , { field: 'VisitId', title: '门诊号', width: '10%', align: 'center' }
                        , { field: 'RecordTime', title: '门诊日期', width: '10%', align: 'center' }
                        , { field: 'DepartName', title: '门诊科室', width: '10%', align: 'center' }
                        , { field: 'DoctorName', title: '门诊医生', width: '10%', align: 'center' }
                        , { field: 'DiagnoseType', title: '初复诊', width: '10%', align: 'center' }
                        , { field: 'RegisterType', title: '疾病类型', width: '10%', align: 'center' }
                        , { field: 'Diagnosis', title: '疾病诊断', width: '27%', align: 'center' }
                        , { field: 'score', title: '操作', width: '10%', align: 'center', toolbar: '#barVisitTDemo', fixed: 'right' }
                    ]]
                    , id: 'TableVisitReload'
                    , page: true
                    , parseData: function (res) {
                        if (res.code == -1) {
                            layuiHelp.AlertMsg(res.msg, res.icon);
                        }
                    }
                });

                //渲染住院记录
                table.render({
                    elem: '#bindZhuYuanTable'
                    , method: 'post'
                    , url: '../Patient/GetHospitalList'
                    , where: { accessToken: accessToken, patientId: patientId, }
                    , cols: [[
                        { checkbox: true, fixed: true, field: 'Id' }
                        , { field: 'PatientId', title: '病人Id', width: '0', hide: true }//此列为隐藏列,为方便子页面传值所用
                        , { field: 'EMPIId', title: '病人EmpId', width: '0', hide: true }//此列为隐藏列,为方便子页面传值所用
                        , { field: 'VisitId', title: '住院号', width: '9%', align: 'center' }
                        , { field: 'IHDATE', title: '入院日期', width: '8%', align: 'center' }
                        , { field: 'LHDATE', title: '出院日期', width: '8%', align: 'center' }
                        , { field: 'FeeSortName', title: '消费级别', width: '8%', align: 'center' }
                        , { field: 'InpatientAreaName', title: '病区', width: '8%', align: 'center' }
                        , { field: 'DIAGNOSETYPE', title: '初复诊', width: '8%', align: 'center' }
                        , { field: 'TubebedDoctorName', title: '管床医生', width: '10%', align: 'center' }
                        , { field: 'ClinicDepartmentName', title: '门诊科室', width: '10%', align: 'center' }
                        , { field: 'ClinicDoctorName', title: '门诊医生', width: '10%', align: 'center' }
                        , { field: 'REMARK', title: '客户档案', align: 'center' }
                        , { field: 'AdviceFZContent', title: '操作', width: '10%', align: 'center', toolbar: '#barHospitDemo', fixed: 'right' }
                    ]]
                    , id: 'TableZhuYuanReload'
                    , page: true
                    , parseData: function (res) {
                        if (res.code == -1) {
                            layuiHelp.AlertMsg(res.msg, res.icon);
                        }
                    }
                });

                //执行重载
                var $ = layui.$, active = {
                    //就诊重载
                    jzreload: function () {
                        table.reload('TableVisitReload', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            , where: {
                                accessToken: accessToken,
                                patientId: document.getElementById("lab_PatientId").innerText,
                                visitId: $("#txt_jz_VisitId").val(),
                                recordTime: $("#txt_jz_RecordTime").val(),
                                departId: $("#txt_jz_DepartId").val(),
                                doctorId: $("#jz_Doctor").val(),
                                diagnoseType: ""
                            }
                        }, 'data');
                    },
                    //住院重载
                    zyreload: function () {
                        table.reload('TableZhuYuanReload', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            , where: {
                                accessToken: accessToken,
                                patientId: document.getElementById("lab_PatientId").innerText
                            }
                        }, 'data');
                    }
                };

                //声明门诊搜索作用域
                $('.demoVisitTable .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
                //声明住院搜索作用域
                $('.demoZYTable .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });



            //事件监控:
                 //就诊记录
                table.on('tool(bindVisitTable)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'view') {
                        var index = layer.open({
                            type: 2,
                            area: ['90%', '90%'],
                            fixed: false,
                            maxmin: true,
                            offset: "10px",
                            zIndex: "1000",
                            title: "查看就诊",
                            content: '../Patient/Visitinfo?Id=' + data.Id + "&type=view&PatientId=" + data.PatientId + "&EmpId=" + $("#lab_EmpId").val()
                        });
                    } else if (obj.event === 'edit') {
                        var index = layer.open({
                            type: 2,
                            area: ['90%', '90%'],
                            fixed: false,
                            maxmin: true,
                            offset: "10px",
                            zIndex: "1000",
                            title: "编辑就诊",
                            content: '../Patient/Visitinfo?Id=' + data.Id + "&type=edit&PatientId=" + data.PatientId + "&EmpId=" + $("#lab_EmpId").val()
                        });
                    }
                });

                //住院记录
                table.on('tool(bindZhuYuanTable)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'view') {
                        var index = layer.open({
                            type: 2,
                            area: ['90%', '90%'],
                            fixed: false,
                            maxmin: true,
                            offset: "10px",
                            zIndex: "1000",
                            title: "查看就诊",
                            content: '../Patient/HospitInfo?Id=' + data.Id + "&type=view&PatientId=" + data.PatientId
                        });
                    } else if (obj.event === 'edit') {
                        var index = layer.open({
                            type: 2,
                            area: ['90%', '90%'],
                            fixed: false,
                            maxmin: true,
                            offset: "10px",
                            zIndex: "1000",
                            title: "编辑就诊",
                            content: '../Patient/HospitInfo?Id=' + data.Id + "&type=edit&PatientId=" + data.PatientId
                        });
                    }
                });

 

 

 

 

 

 

 

联系方式:

                 wechat&QQ&Tel:13501715983(如查不到请加QQ:631931078或352167311)

                 个人邮箱:13212644043@163.com

                 

如有问题或改进地方请多多指点,本文为个人原创,转载请加以说明  

    原文作者:纪寻川
    原文地址: https://blog.csdn.net/m0_37781450/article/details/103908749
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞