精华内容
下载资源
问答
  • layui表格,手动重新渲染表格的分页
    2021-09-26 14:27:41

    业务逻辑,需要知道上次保存的时候表格在第几页,保存的时候保存页数,回显的时候,表格加载,用id拿到onPage,就是保存过的页码,用页码重载分页插件,暂时就想到这一种方法

    			var analTable = layui.table.render({
                    id: "analList",
                    elem: '#analList',
                    url: "/report/wasteGasBusiness/getAnalysisList",
                    cols: [[
                        {type: 'radio'},
                        {title: '序号', width: '8%', align: "center", templet: "#indexTable"},
                        {field: 'name', width: '22%', title: '名称', align: "center"},
                        {field: 'industry', width: '20%', title: '行业名称', align: "center"},
                        {field: 'wasteProduction', width: '30%', title: '工艺', align: "center"},
                        {field: 'scale', width: '10%', title: '规模', align: "center"},
                        {fixed: 'right', title: '操作', width: '10%', align: "center", toolbar: '#toolBar'}
                    ]],
                    //要传的参数
                    where:{
                        pollutionStr:pollutionStr,
                        analysisId:analysisId,
                        reportProcessId:reportProcessId,
                        businessAnalysisEntryId:businessAnalysisEntryId,
                    },
                    // post|get
                    method:'post',
                    page: true,
                    even: true,
                    limit: 10,
                    limits: [10],
                    parseData: function (res) { //res 即为原始返回的数据
                        // console.log(res.data)
                        if (res.code === 0) {
                            var data = res.data;
                     
                            // console.log(data)
                            return {
                                "code": res.code, //解析接口状态
                                "count": res.count, //解析数据长度
                                "data": data, //解析数据列表
                                "onPage": res.onPage, // 保存过的页码数,表格加载完之后用这个page重载分页,
                            };
                        }
                    },
                    done: function (res) {
                        that.analysisOnPage = res.onPage?res.onPage:analTable.config.page.curr
                        /**
                         * 重新设置分页插件,当回显的时候,可能选中的不是第一页的数据,需要用存过的page重载分页,
                         * 分页事件的时候就不会带着保存过的id请求
                         * 相当于除了第一次,都用新加载的分页控制表格分页
                         * */
                        var elem = analTable.config.page.elem // layui表格生成的分页的容器
                        layui.laypage.render({
                            elem: elem
                            ,count: res.count
                            ,limits: [10]
                            ,layout: [ 'prev', 'page', 'next', 'skip','count', 'limit']
                            ,curr: that.analysisOnPage
                            ,next: '<i class="layui-icon">&#xe602;</i>'
                            ,prev: '<i class="layui-icon">&#xe603;</i>'
                            ,jump: function(obj,first){
                                if(!first){
                                	// 把表格实例的分页更新
                                    calcuTable.config.page.curr = obj.curr
                                    // 翻页的时候重载表格
                                    layui.table.reload('analList', {
                                        page: {
                                            curr: obj.curr
                                        },
                                        // 重载的时候不带id,就不会拿到onPage,就不会死循环
                                        where: {businessAnalysisEntryId: ''},
                                    });
                                }
                            }
                        });
                    }
                });
    
    更多相关内容
  • link rel=stylesheet href=lib/layui/css/layui.css rel=external nofollow > [removed][removed] 2,在页面放置一个table元素 <table class=layui-hide id=test lay-filter='test3'> 3,通过 table.render() ...
  • 今天小编就为大家分享一篇layui form表单提交之后重新加载数据表格的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Layui框架作为我们日常常用的框架,其中的数据表格因其便捷也被我们广泛应用。 1.首先引入layui文件是必不可缺的,在视图层代码内分别引入layui.css以及layui.js 注意:由于框架的js是依赖于jquery的,所以引入layui...

    开发工具与关键技术: MVC
    撰写时间:2021/5/18

    Layui框架作为我们日常常用的框架,其中的数据表格因其便捷也被我们广泛应用。

    1.首先引入layui文件是必不可缺的,在视图层代码内分别引入layui.css以及layui.js
    注意:由于框架的js是依赖于jquery的,所以引入layui.js之前需要引入jquery库,如下图
    在这里插入图片描述

    2.确定放置表格的位置,在页面表格位置处添加

    ,table中自定义好id,方便之后通过table.render()方法指定该容器。
    在这里插入图片描述

    3.layui数据表格有三种初始化渲染方式,分别是js方法渲染、自动渲染,转换静态表格,推荐采用js方法渲染,因为随项目数据更改,js方法渲染的效率更高,更便捷。采用js方法渲染表格如下图所示,在页面加载时:
    (1)初始化layui模块我们使用数据表格,则在use处放上‘table’,layui.use(‘table’,function(){});
    (2)将layui.table赋值给layuiTable,便于后面使用。使用render()方法开始渲染表格。
    (3)render()方法内规定要使用的参数,平常使用多个参数需要使用{}括起来,常用的有:
    elem:“表格id”//这个属性指定渲染到哪个表格,通常使用id值来找到表格
    url:‘异步数据接口’,//获取表格数据的路径
    cols:[[
    { title:‘表头名称’,type:‘设定列的类型’,fieId:‘此列对应数据名’,templet:自定义列函数名(函数return什么它就输出什么),rowspan/colspan:所占行数/列数 …}
    ]], //cols用于设置表头,基本值是二维数组,其它参数可到layui官网查看参数一览表
    page:查询出的数据是(true)否(false)分页处理,也可自定义{
    limit:刚开始每页显示数据的条数,
    limits:值是一个数组,设置可选择每页显示的条数,
    curr:决定刚开始加载从哪一页开始显示
    }
    data:[] //值为数组类型,用于直接赋值数据
    还有很多详细的属性可以到layui官网查看基本参数一览表
    在这里插入图片描述

    4.通常我们使用时会遇到条件动态筛选数据的问题,这里我们就需要搭配layui表格重载来实现这个筛选数据的效果。
    (1)有条件动态筛选的话,渲染表格时可以不设定数据获取的地址建立出一个空表格,使用第一次数据重载来加载页面初始化数据,动态筛选时再调用一次数据重载的方法就好了
    在这里插入图片描述

    (2)数据重载的方法如下:先获取筛选数据的条件数据,使用reload()方法进行数据重载,url:‘规定提交数据的路径’,where:{数据名:数据值(数据筛选的条件数据)},
    page:{curr:int值(规定数据重载后从第几页开始显示)}…
    在这里插入图片描述

    将筛选的条件数据传输到控制器后,查询数据时使用linq语句或者lambda表达式对数据进行筛选再返回数据即可。

    展开全文
  • 今天小编就为大家分享一篇layui使用表格渲染获取行数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使用layui渲染数据表格

    千次阅读 2019-04-28 09:37:48
    使用layui渲染数据表格 开发工具与关键技术:JS 作者:李宥良 撰写时间:2019年4月25日 使用layui渲染数据表格 今天教大家用layui渲染数据表格, 快速使用 我先来为大家介绍表格 简单的 HTML 表格由 table 元素...

    使用layui渲染数据表格

    
    开发工具与关键技术:JS
    
    作者:李宥良
    
    撰写时间:2019年4月25日
    
    

    使用layui渲染数据表格

    今天教大家用layui渲染数据表格,

    快速使用

    我先来为大家介绍表格

    简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

    tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

    更复杂的 HTML 表格也可能包括
    caption、col、colgroup、thead、tfoot 以及 tbody
    元素

    表格和边框属性

    如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框

    正文到了,怎么把表格数据渲染进去呢?咱们下面第三部就是渲染的方法,叫“方法渲染”,layui官网提供的三种渲染方法,在这里不做陈述,方法渲染的优点是:你可以脱离HTML文件,而专注于JS本身。尤其对于项目的频繁改动及发布,其便捷性会体现得更为明显,layui的url默认是“get”请求,我这边是post请求,所以记得加上“method”属性为post,6,容易碰到的问题,按理来说这个时候应该已经可以看到表格数据了,为什么大多数人的表格还是渲染不出来呢?一般是因为你配置后台数据格式

    创建一个table实例最简单的方式是,在页面放置一个元素

    ,然后通过 table.render() 方法指定该容器就可以了

    在这里插入图片描述

    上面你已经看到了一个简单数据表格的基本样子,你一定迫不及待地想知道它的使用方式

    下面我就来教大家

    layui有三种初始化渲染方式。但其使用方式并不止那一种。你可按照个人喜好和实际情况灵活使用

    第一种 方法渲染 它的机制是用JS方法的配置完成渲染
    适用场景:无需写过多的 HTML,在 JS 中指定原始元素,再设定各项参数即可

    第二种 自动渲染 它的机制是HTML配置,自动渲染 适用场景:无需写过多 JS,可专注于 HTML 表头部分

    第三种 转换静态表格 它的机制是转化一段已有的表格元素 适用场景:无需配置数据接口,在JS中指定表格元素,并简单地给表头加上自定义属性即可

    我就教大家使用第一种方法渲染

    其实这是“自动化渲染”的手动模式,本质类似,只是“方法级渲染”将基础参数的设定放在了JS代码中,且原始的 table 标签只需要一个

    在这里插入图片描述

    我推荐大家采用“方法级渲染”的做法,其最大的优势在于你可以脱离HTML文件,而专注于JS本身。尤其对于项目的频繁改动及发布,其便捷性会体现得更为明显。而究竟它与“自动化渲染”的方式谁更简单,也只能由各位猿猿们自行体味了

    这个时候表格一般已经是出来了,记得,后台提供的数据格式,和layui提供的一样最好,这一点要切记,这一点大家可以去官网上看下,不做说明
    在这里插入图片描述

    最终效果图
    在这里插入图片描述

    下面是 table 模块的参数一览表

    参数 / 类型 / 说明

    Elem / String/DOM 、 指定原始 table 容器的选择器或 DOM,方法渲染方式必填

    Cols / Array / 设置表头。值是一个二维数组。方法渲染方式必填

    url / - / 异步数据接口相关参数。其中 url 参数为必填项

    展开全文
  • 今天小编就为大家分享一篇layui的布局和表格渲染以及动态生成表格的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 学习前端代码的朋友们应该都有所闻layui这个框架,这是一款遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用的前端 UI 框架。如果有需要可以通过官网下载得到...Layui中的数据表格渲染具体有三种初始化渲染

    学习前端代码的朋友们应该都有所闻layui这个框架,这是一款遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用的前端 UI 框架。如果有需要可以通过官网下载得到,使用起来也极其方便仅需引入以下两个文件

    1.	./layui/css/layui.css
    2.	./layui/layui.js //提示:如果是采用非模块化方式(最下面有讲解),此处可换成:./layui/layui.all.js
    

    下面我们来聊以下layui中数据表格的渲染部分。Layui中的数据表格渲染具体有三种初始化渲染方式 1方法渲染 2自动渲染 3转换静态表格。
    其中我最为常用的也是最推荐的是第一种方法渲染 机制:用JS的配置完成渲染 使用场景:无需写过多的HTML,在JS中指定原始元素,再设定各项参数即可。
    使用例子:
    1.需要一个原始的table标签,标签上添加一个选择器
    eg: <table id="demo" lay-filter="test"></table>
    2.申明变量
    eg:var table = layui.table;
    3. 执行渲染
    eg: 在这里插入图片描述

    渲染中需要使用到的基本参数有:
    elem:指定原始table容器的选择器或DOM(必写) url:异步数据接口相关参数路径(必写) cols:值是二维数组,用于设置表头(必写) page:开启分页(默认false)
    limit:每页显示的条数(默认:10,值需要对应limits参数的选项) limits:每页条数的选择项(默认[10,20,30,40,50,60,70,80,90]);
    其中cols的表头参数有:
    filed:设定字段名,字段名是表格数据列的唯一标识。
    title:设定标题名称
    fixed固定列(left,right)一旦被固定将不随滚动条滚动
    align:单元格排列方式(left,right,center居中)
    templet:自定义列模板(可将原始数据转化为其他格式)
    以上的参数仅仅是基本渲染表格中的一部分,有需要的可以到layui官网查看更详细的内容。
    当例子中的表格数据被查询出来后渲染视图效果如下:
    在这里插入图片描述

    自动渲染也有着其中的特色:其使用HTML配置,更专注于HTML的表头部分,无需多写JS部分被内容。
    所谓自动渲染就是,在一段table容器中设定好相应的参数,由table模块内部自动对其完成渲染,其中需要关注的为以下几点:
    1) 带有class=“layui-table”的

    标签,可通过在标签上添加lay-data={}
    2) 对标签设置属性 lay-data=””可为其容器设定宽高,异步数据接口路径,是否分页等等。
    3) 在
    标签中设置属性layui-data=””用于配置表头信息。
    例子:
    在这里插入图片描述

    静态转换表格:意为,当你用于一段由原始table标签组成粗劣的表格,你可以通过layui的某些属性将其转换为样式喜欢的表格。
    在这里插入图片描述
    ==》 在这里插入图片描述

    以上就是我对数据表格渲染的部分内容分享,由需要的可以到官网查看更详细的内容,谢谢大家的浏览。若有异议欢迎指正喔!

    展开全文
  • 直接拼接,然后根据返回值渲染select // 动态渲染脚本类型下拉框 // 1.发送ajax请求得到data // 2.将data渲染到页面上 function getDataList() { // 请求 $.ajax({ type:'post', url: "/cd/workPlatform/...
  • layui数据表格渲染(完整可用)

    千次阅读 2020-11-09 16:33:17
    先定义一个工具类,用来处理查询数据库得到的数据,把数据按照layui表格所规定的格式返回 这个工具类是必须的 java部分 工具类代码 public class LayuiTableData extends HashMap<String,Object> { public ...
  • 今天小编就为大家分享一篇layui框架table 数据表格的方法级渲染详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui数据表格渲染

    千次阅读 2019-05-07 21:38:58
    今天第一次使用layui的数据表格,刚开始根本出不来数据,然后问了一下我室友(因为我室友前几天使用过并且也成功了),发现他是直接使用的layui数据表格自带的**“url”** 属性实现的数据绑定,然后自己也试了一下这...
  • 快速入手layuitable表格渲染

    千次阅读 2019-03-20 22:37:03
    在DW中表格我们需要自己用table标签构造出来,为了便捷在VS中则选择使用插件来渲染表格。 创建一个table实例最简单的方式是,在页面放置一个元素<table id="demo"></table> ,然后通过 table.rend...
  • Layui表格渲染

    2021-12-09 10:50:05
    一、简介 表格有两种,分别是动态表格和静态表格。什么是动态表格?什么是静态表格? a) 动态、静态指的是数据,活的数据和死的数据。 b) 动态表格是指数据是活的表格,数据随时都可变化。...二、渲染准备 Layui插件。
  • 该资源主要应用于layui框架下table表格渲染后判断checkbox多选控件是否可用,当然done下还可以做其他逻辑判定,附上源码,绝对可用。
  • 实现追加功能初始化的data数据设置为全局变量...然后table.reload重新加载渲染显示表格。var table = null;var data = [{id: 1, username: 'test1'},{id: 2, username: 'test2'},{id: 3, username: 'test3'}];functi...
  • 第三步就是方法渲染表格的钱部分 在做的时候也是有多种方式去编写的 首先就是配置项 然后再指定原始的table的选择器中 然后就是判断page方法 ur也是一个路径的选择可以放在这里,也可以再后面的表格重载中选择...
  • Layui方法渲染表格

    2021-05-07 18:15:25
    文献种类:专题技术文献; 开发工具与关键技术:DW JavaScript ...Layui方法渲染表格 创建一个table实例最简单的方式是,在页面放置一个元素 <table id="demo"></table>,然后通过 ta
  • 今天小编就为大家分享一篇php+layui数据表格实现数据分页渲染代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui问题之渲染数据表格时,仅出现10条数据的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui表格数据重载

    2020-12-29 20:20:01
    本文实例为大家分享了layui表格数据重载,供大家参考,具体内容如下 html代码 <form class=layui-form action=> <div class=layui-form-item xss=removed> <div class=layui-inline> <input type=...
  • Layui 表格渲染问题

    2021-06-02 20:06:22
    描述:第一次使用Layui,当渲染表格数据时,发现了许多的问题,在这里积累一下。 1. 传参问题: 在where中
  • 今天小编就为大家分享一篇layui table动态表头 改变表格头部 重新加载表格的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Layui两张表格渲染

    2022-04-10 10:32:36
    两张表格渲染代码如下: 首先就是初始化layui,table模块 公告类型渲染代码如下: 公告类型明细渲染代码如下: 然后就是实现当点击公告类型表的字段时候去渲染公告类型明细表方法如下: 给公告类型...
  • layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询。 一、引入layUI的相关资源 <link rel=stylesheet href=${ctxPath}/vendor/layui/css/layui.css > [removed][removed] 二、html页面代码 ...
  • <!... <... <head> ...meta charset="utf-8">...link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui-v2.5.6/layui/css/layui.css"/> <script src="layui-v2.5.6/layui-v2.5.6.
  • 适用情景:为layui渲染表格添加一个表头可以随右边框移动固定的功能 JQ代码:
  • 根据需求——动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染出来的每一...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,675
精华内容 1,470
关键字:

layui重新渲染表格