今天在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展示数据的更多相关文章

  1. Saiku Table展示数据合并bug修复(二十五)

    Saiku Table展示数据合并bug修复 Saiku以table的形式展示数据,如果点击了 非空的字段 按钮,则会自动进行数据合并,为空的数据行以及数据列都会自动隐藏掉. 首先我们应该定位问题: ...

  2. flask+layui+echarts实现前端动态图展示数据

    效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...

  3. 使用LayUI展示数据

    LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区. 点击查看 文档地址 下载框架 使用: 1.把这个5个文件项都拷贝到项目中 ...

  4. LayUI之table数据表格获取行、行高亮等相关操作

    前言 目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...

  5. MySQL+Service+Servlet+Jsp实现Table表格分页展示数据

    下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...

  6. 基于 若依 ,或者使用 LayUi ,用来展示数据表,同时要 转换字典数据时的转换的建议

    原作者在做这个项目时,他把所有数据字典都放在数据库表中了,这种方法的确比较好,适用于中大型项目,方便统一管理字典:而且优点突出,字典值变化后不需要调整前端代码: 但是在实际开发项目中,一些小型的项目, ...

  7. 分享layui的table的一些小技巧,前端分页

    最近一直在折腾报表,期间使用了layui的table做展示(版本号:2.5.5) 起初:以为是查询结果出来后,前端和服务端分页一弄就完事了,参考例子,但是sql写得太长太长了,翻页困难,数据库是老旧的 ...

  8. 创建几个常用table展示方式插件

    这次和大家分享的是自己写的一个table常用几种展示格式的js插件取名为(table-shenniu),样式使用的是bootstrap.min.css,还需要引用jquery.min.js包,这个插件 ...

  9. Repeater控件 ---表格展示数据

    简介: Repeater控件是Web 服务器控件中的一个容器控件,它使您可以从页的任何可用数据中创建出自定义列表. Repeater 控件不具备内置的呈现功能,这表示用户必须通过创建模板为 Repea ...

随机推荐

  1. vChart

    vue+echarts工具:    https://v-charts.js.org

  2. ESLint具体规则设置

    "no-alert": 0,//禁止使用alert confirm prompt "no-array-constructor": 2,//禁止使用数组构造器 & ...

  3. windows中,VS2017下,在Cmake中添加OpenCV依赖

    OpenCV_DIR  -----D:/OpenCV/3.3.0/opencv/build/x64/vc14/lib 只有这个目录 cmake才认..貌似是因为找到了对应的OpenCvConfig.c ...

  4. linux centos 磁盘清理

    执行df -h 与 du -sh / 所查询到的已用容量不对应 执行xfs_fsr来清理磁盘 参考 https://www.jianshu.com/p/0ded68808123

  5. 缓存:前端页面缓存、服务器缓存(依赖SQL)MVC3

    缓存依赖数据库 第一步 1通过vs里面带的命令提示窗口. 2或者.NET Framework 版本 4(64 位系统)条件,%windir%\Microsoft.NET\Framework64\v4. ...

  6. MySQL复制相关技术的简单总结

    MySQL有很多种复制,至少从概念上来看,传统的主从复制,半同步复制,GTID复制,多线程复制,以及组复制(MGR).咋一看起来很多,各种各样的复制,其实从原理上看,各种复制的原理并无太大的异同.每一 ...

  7. Scratch 数字游戏

    本想用Scratch给女儿做一个类似舒尔特方格的程序来认识数字和提升专注,想想这对刚刚3岁的孩子来说还是比较困难的,于是只做了3*3的方格,来认识数字1-9. 游戏地址:Random 9 v0.21 ...

  8. javaMail实现收发邮件(五)

    控制台打印出的内容,我们无法阅读,其实,让我们自己来解析一封复杂的邮件是很不容易的,邮件里面格式.规范复杂得很.不过,我们所用的浏览器内置了解析各种数据类型的数据处理模块,我们只需要在把数据流传输给浏 ...

  9. 【spring】使用spring过程中踩到的坑

    这里简单记录一下,学习spring的时候碰过的异常: 异常:org.springframework.beans.factory.BeanDefinitionStoreException: Unexpe ...

  10. SpringCloud Zuul网关超时

    最近在使用SpringCloudZuul网关时,报错"NUMBEROF_RETRIES_NEXTSERVER_EXCEEDED", 查询资料后,发现: ribbon.Connect ...