Layui同页面多个数据表格

最新推荐文章于 2024-03-26 03:32:43 发布
最新推荐文章于 2024-03-26 03:32:43 发布
阅读量1.1w 收藏 23
点赞数 2
分类专栏： asp.net html LayUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37781450/article/details/103908749
版权
asp.net 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
LayUI
5 篇文章 0 订阅
订阅专栏
html
4 篇文章 0 订阅
订阅专栏

前言：

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

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

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

 

正文：

 1、截图（因为我是tab页，所以放两张图，这两个数据表格其实是在同一个html页面上）：

 

 

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

                 

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

纪寻川
关注
  • 2
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
Layui数据表格之获取表格中所有的数据方法
10-18
今天小编就为大家分享一篇Layui数据表格之获取表格中所有的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui多个数据表格共存一个页面处理
凌云鹤YK
04-11 1万+
layui数据表格多个共存一个页面处理1、html代码2、jq代码3、数据表格重载方式 今天在做后台时，遇到一个棘手的问题，就是layui的数据表格如果两个表格在一个页面，每个表格有一个搜索查询的筛选条件，那么每个搜索结果对应的只能刷新一个数据表格。如下图，当搜索药品的时候只刷新左表，当搜索器材的时候只刷新右表。 通过上网查询资料和看layui的开发文档，最终实现效果，实现过程如下： 我的表格渲...
Springboot整合layui之一个页面显示两张表格
HANHUABAO1122的博客
03-24 3191
springboot结合layui框架项目，实现同一页面两个表格关联
Layui渲染多级表头和设置表格颜色
最新发布
2401_83817916的博客
03-26 533
即然是设置多级表头，那我就给表头设置样式好了，记得好像可以用done设置，要不试试？先看看代码有没有错（图3）：再看看效果（图4）：图3图4咦……怎么还是很丑，难道还要设置行的样式？且先写着看看：图5。
layui中一个页面显示多个表格
可可爱爱的你吖的博客
06-28 6783
遇到一个页面，有近百个table表格，然后用的是layui模板引擎，整了好久，来记个笔记。 下面是写的表格模板 <script type="text/html" id="ListTable"> <!--start 数据表格 --> <div class="table_title"> <p class="code"> <span>流水号：{{d.run_id}}</span
layui多iframe页面控制定时器运行的方法
12-09
我们web页面中有几个页面是有定时器在刷新的，并且查询的内容还不少，给服务器造成了不少压力。这些接口已经尽量优化，能放到缓存的都放到缓存。然后主管又提了一个需求，就是我们使用的是layui多标签iframe框架，当不在某个页面的iframe时不要执行定时器。我觉得这是一个挺不错的提议，而且实现起来也不难。 粗略地考虑有两个思路，一个是点击标签时开启或关闭定时器，一个是定时器执行时判断所在的iframe是否隐藏，如果隐藏则不执行定时器的方法。第一种维护麻烦，难免有错漏的情况，而且和别的iframe有联系，不好。第二种逻辑判断简单，只和定时器所在iframe有关，虽然定时器一直在跑，不过只要里面的
layui单页面同时渲染多表格缓存问题和条件查询问题
weixin_47316183的博客
10-19 4273
layui的table参数条件缓存问题 （1）layui的table在render的时候,会将部分参数缓存下来,以至于在开发过程中发现，layui的reload方法似乎有“缓存”的功能. 原因:在某博客发现,table内部是采用的继承的方法. （2）layui的数据表格如果多个表格在一个页面，每个表格有一个搜索查询的筛选条件，那么每个搜索结果对应的只能刷新一个数据表格 在这里插入图片描述 如图所示，这部分采用了layui表格渲染多个，但是用的是一个表格容器，这样写的好处： 1、不用创建多个table容器
layui一个页面中动态加载多个表格table 并且可以穿梭选择 编辑 并保存
勤劳的搬运工
04-15 1万+
楼主的水平不咋的 就不写过多的描述性文字了 代码只是实现了功能 没有进行优化过 有很大的优化空间 仅给有需要的同学一个参考 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/page/public/tag.jsp"%> <!D...
Layui之 页面多个表格,使每个表格之间的样式效果互不影响，限定是某个表格
qq_39835505的博客
12-06 1435
var disabled_click_now = new Array(); // 不可点击的行 当前表格中 var table_data = new Array(); table.render({ elem: "#followTable_now", page: true, cols: [[ {field: "id", title: "ID", width: 100}, {field: "name", title: "文
layui多表单校验处理
You Jump,I Jump.
06-23 2245
layui多表单校验 layui动态表单
一个页面创建多个表单各自提交问题
不爱熬夜的朱霸霸的博客
11-09 1854
最近做项目的时候遇到了一个问题。具体情况是这样的——在一个页面中，根据后台传来的数据。我需要动态的创建多的表单。这些表单在编辑或者提交时需要做到互不干扰。如图： 之前在网上看了很多文章，大部分都是关于表格的。由于不是专业前端所以一直困扰了我很久。最后终于找到了解决方案 1️⃣ 解决思路，首先页面中有两个按钮，一个是修改，一个是提交。我们的需求是点击哪一个表单里面的提交按钮。就提交哪个表单。 2️⃣ 先给按钮添加单击点击事件
解决Layui数据表格显示无数据提示的问题
10-16
今天小编就为大家分享一篇解决Layui数据表格显示无数据提示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Layui数据表格跳转到指定页的实现方法
12-09
1.获取数据表格下分页组件中的页码输入框，具体元素在Elements中位置如下 ...以上这篇Layui数据表格跳转到指定页的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
解决layui数据表格table的横向滚动条显示问题
10-16
今天小编就为大家分享一篇解决layui数据表格table的横向滚动条显示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui数据表格跨行自动合并的例子
12-10
在数据表格中，对于按某个分类展示数据其分类下又有多个细分的嵌套细分项，如省市区昵称，省下面有多个市，市下面有多个区，区下面有昵称，需要实现跨行合并，且操作按钮以分类为单位（即操作按钮需按照分类合并）。...
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
12-30
在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后,选中状态就消失了, 我们希望...
ASP.NET MVC+Layui数据分页的实现和说明
01-08
它的上手非常容易，官方API也十分详细，但是在我初次使用这个框架的时候，还是遇到了很多坑，一个个踩过之后才能完美避坑。  这里记录下使用Layui对数据进行分页展示的实现  前端:Layui框架 后台:ASP.NET MVC  ...
list集合手动添加数据
热门推荐
ajax_yang的博客
07-03 1万+
List list = new List(); list.Add(new SeoModel { UrlKeys = “123”, Title = “456”, Keywords = “789”, Description = “8910” }); 如有问题，请加我QQ：631931078或352167311
layui查询多条输入框的数据并且显示表格
05-13
可以使用layui的table模块和form模块来实现查询多条输入框的数据并显示在表格中。 首先在HTML页面中添加多个输入框和一个查询按钮，如下所示： ```html <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">姓名</label> <div class="layui-input-inline"> <input type="text" name="name" placeholder="请输入姓名" class="layui-input"> </div> <label class="layui-form-label">性别</label> <div class="layui-input-inline"> <input type="text" name="gender" placeholder="请输入性别" class="layui-input"> </div> <<div class="layui-form-item"> <button class="layui-btn layui-btn-primary" lay-submit lay-filter="formDemo">查询</button> </div> </form> ``` 接下来需要引入layui的form模块和table模块，并编写JS代码实现查询和表格显示的逻辑。 ```javascript layui.use(['form', 'table'], function(){ var form = layui.form; var table = layui.table; // 监听表单提交事件 form.on('submit(formDemo)', function(data){ // 获取输入框的值 var name = data.field.name; var gender = data.field.gender; // 发送AJAX请求，获取数据 $.ajax({ url: 'data.json', // 数据接口 data: {name: name, gender: gender}, type: 'get', dataType: 'json', success: function(res){ // 渲染表格 table.render({ elem: '#demo', cols: [[ {field: 'name', title: '姓名'}, {field: 'gender', title: '性别'}, {field: 'age', title: '年龄'} ]], data: res // 数据 }); } }); return false; // 阻止表单跳转 }); }); ``` 在上述代码中，我们使用了layui的form模块监听了表单的提交事件，获取输入框的值，并通过AJAX请求获取数据。最后使用table模块渲染表格并将数据填充到表格中。 需要注意的是，我们需要将表格的HTML代码添加到页面中，如下所示： ```html <table id="demo" lay-filter="test"></table> ``` 这样就可以实现查询多条输入框的数据并显示在表格中了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

纪寻川

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值