Layui使用table展示数据
今天在Layui官网拿了一个table表格数据展示的源码,研究遇到了很多问题,最后才把数据展示出来,和大家分享下。
源码地址:https://www.layui.com/demo/table/operate.html
下面图片是做出来展示数据的效果
说下遇到的问题:
1.去Layui官网下载框架文件,解压后必须完整的放到项目里然后引用文件,注意必须完整。
2.
这个url链接的地址:是你项目目录下的具体方法,这个方法经测试返回了Layui要求的JSON格式数据
上面的截图里面有一个json.ToJson_LayUI()的方法,这是将数据转换成Layui所需要的JSON格式数据,为了方便不截图了,贴代码如下:
Public Function ToJson_LayUI(ByVal ds As DataSet) As String
'Dim jsonString As String = "{""total"":" & ds.Tables(0).Rows.Count.ToString & ","
Dim jsonString As String = "{""code"":0,""msg"":"""",""count"":" & ds.Tables(0).Rows.Count.ToString & ","
Dim table As DataTable
For Each table In ds.Tables
jsonString += """data"":" + ToJson(table) + ","
Next
jsonString = jsonString.TrimEnd(",")
Return jsonString + "}"
End Function
Public Function ToJson(ByVal dt As DataTable) As String
Dim jsonString As System.Text.StringBuilder = New System.Text.StringBuilder()
jsonString.Append("[")
Dim drc As DataRowCollection = dt.Rows
Dim i As Integer = 0
For i = 0 To drc.Count - 1
jsonString.Append("{")
Dim j As Integer = 0
For j = 0 To dt.Columns.Count - 1
Dim strKey As String = dt.Columns(j).ColumnName
Dim strValue As String = drc(i)(j).ToString()
Dim type As Type = dt.Columns(j).DataType
jsonString.Append("""" + strKey + """:")
strValue = StringFormat(strValue, type)
If (j < dt.Columns.Count - 1) Then
jsonString.Append(strValue + ",")
Else
jsonString.Append(strValue)
End If
Next
jsonString.Append("},")
Next
If jsonString.ToString <> "[" Then
jsonString.Remove(jsonString.Length - 1, 1)
End If
jsonString.Append("]")
Return jsonString.ToString()
End Function
这两个方法把数据转换成JSON格式数据。
Layui使用table展示数据的更多相关文章
- Saiku Table展示数据合并bug修复(二十五)
Saiku Table展示数据合并bug修复 Saiku以table的形式展示数据,如果点击了 非空的字段 按钮,则会自动进行数据合并,为空的数据行以及数据列都会自动隐藏掉. 首先我们应该定位问题: ...
- flask+layui+echarts实现前端动态图展示数据
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...
- 使用LayUI展示数据
LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区. 点击查看 文档地址 下载框架 使用: 1.把这个5个文件项都拷贝到项目中 ...
- LayUI之table数据表格获取行、行高亮等相关操作
前言 目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
- MySQL+Service+Servlet+Jsp实现Table表格分页展示数据
下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...
- 基于 若依 ,或者使用 LayUi ,用来展示数据表,同时要 转换字典数据时的转换的建议
原作者在做这个项目时,他把所有数据字典都放在数据库表中了,这种方法的确比较好,适用于中大型项目,方便统一管理字典:而且优点突出,字典值变化后不需要调整前端代码: 但是在实际开发项目中,一些小型的项目, ...
- 分享layui的table的一些小技巧,前端分页
最近一直在折腾报表,期间使用了layui的table做展示(版本号:2.5.5) 起初:以为是查询结果出来后,前端和服务端分页一弄就完事了,参考例子,但是sql写得太长太长了,翻页困难,数据库是老旧的 ...
- 创建几个常用table展示方式插件
这次和大家分享的是自己写的一个table常用几种展示格式的js插件取名为(table-shenniu),样式使用的是bootstrap.min.css,还需要引用jquery.min.js包,这个插件 ...
- Repeater控件 ---表格展示数据
简介: Repeater控件是Web 服务器控件中的一个容器控件,它使您可以从页的任何可用数据中创建出自定义列表. Repeater 控件不具备内置的呈现功能,这表示用户必须通过创建模板为 Repea ...
随机推荐
- vChart
vue+echarts工具: https://v-charts.js.org
- ESLint具体规则设置
"no-alert": 0,//禁止使用alert confirm prompt "no-array-constructor": 2,//禁止使用数组构造器 & ...
- windows中,VS2017下,在Cmake中添加OpenCV依赖
OpenCV_DIR -----D:/OpenCV/3.3.0/opencv/build/x64/vc14/lib 只有这个目录 cmake才认..貌似是因为找到了对应的OpenCvConfig.c ...
- linux centos 磁盘清理
执行df -h 与 du -sh / 所查询到的已用容量不对应 执行xfs_fsr来清理磁盘 参考 https://www.jianshu.com/p/0ded68808123
- 缓存:前端页面缓存、服务器缓存(依赖SQL)MVC3
缓存依赖数据库 第一步 1通过vs里面带的命令提示窗口. 2或者.NET Framework 版本 4(64 位系统)条件,%windir%\Microsoft.NET\Framework64\v4. ...
- MySQL复制相关技术的简单总结
MySQL有很多种复制,至少从概念上来看,传统的主从复制,半同步复制,GTID复制,多线程复制,以及组复制(MGR).咋一看起来很多,各种各样的复制,其实从原理上看,各种复制的原理并无太大的异同.每一 ...
- Scratch 数字游戏
本想用Scratch给女儿做一个类似舒尔特方格的程序来认识数字和提升专注,想想这对刚刚3岁的孩子来说还是比较困难的,于是只做了3*3的方格,来认识数字1-9. 游戏地址:Random 9 v0.21 ...
- javaMail实现收发邮件(五)
控制台打印出的内容,我们无法阅读,其实,让我们自己来解析一封复杂的邮件是很不容易的,邮件里面格式.规范复杂得很.不过,我们所用的浏览器内置了解析各种数据类型的数据处理模块,我们只需要在把数据流传输给浏 ...
- 【spring】使用spring过程中踩到的坑
这里简单记录一下,学习spring的时候碰过的异常: 异常:org.springframework.beans.factory.BeanDefinitionStoreException: Unexpe ...
- SpringCloud Zuul网关超时
最近在使用SpringCloudZuul网关时,报错"NUMBEROF_RETRIES_NEXTSERVER_EXCEEDED", 查询资料后,发现: ribbon.Connect ...