今天在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. ServerSocket详解及线程阻塞_03

    ServerSocket详解构造方法ServerSocket()ServerSocket(int port)ServerSocket(int port ,int backlog)serverSocke ...

  2. js 手写 Promise

    /* * pending:初始化成功 * fulfilled:成功 * rejected:失败 * */ function Promise(cback){ this.status = 'pending ...

  3. 这就涉及到ABAQUS历史输出中各能量变量的意义

    ABAQUS中,对于很多动态问题,尤其像高速冲击模拟中,对结果评价很重要的一点就是要保证模型能量守恒,这就涉及到ABAQUS历史输出中各能量变量的意义,下面最各简单整理: ALLAE:人工伪应变能,六 ...

  4. 【转】如何用Eclispe调试java -jar xxx.jar 方式执行的jar包

    原文地址:https://www.cnblogs.com/zzpbuaa/p/5443269.html 有时候,我们经常会需要调试 java -jar xxx.jar方式运行的代码,而不是必须在Ecl ...

  5. numpy统计分布显示

    #导包 import numpy as np #导入鸢尾花数据 from sklearn.datasets import load_iris data = load_iris() pental_len ...

  6. Jquery实现点击表格行变色!

    时隔一年左右,学习了新的知识,从尝试Linux部署项目,网络安全,至后端开发,然后用起了Jquery, 而且是必须要做.也让自己见识可能会更广泛一些.对于一个刚毕业的大学生而言.方正我是没有用过jqu ...

  7. JS,ATM代码

    rs =require("readline-sync"); let island = false; let name1 = "1"; let mima1 = & ...

  8. unique_ptr

    [unique_ptr] unique_ptr 不共享它的指针.它无法复制到其他 unique_ptr,无法通过值传递到函数,也无法用于需要副本的任何标准模板库 (STL) 算法.只能移动unique ...

  9. JAVA8 Stream集合操作:中间方法和完结方法

    StreamLambda为java8带了闭包,这一特性在集合操作中尤为重要:java8中支持对集合对象的stream进行函数式操作,此外,stream api也被集成进了collection api, ...

  10. UVA 679 二叉树

    题目链接:https://vjudge.net/problem/UVA-679 参考自:刘汝佳的紫书 思路: 我们发现,对于每一颗子树,假如小球是第奇数次到达这颗子树的根节点时,那么此时应该向左子树走 ...