Layui-基本使用、数据调试

首先是官方文档。我真的不是第一次觉得阅读官方文档比百度上搜索要有效率几百倍了，当然前提教程是汉语。

组件库

使用文档

Springboot+Thymeleaf+layui框架的配置与使用

Spring data jpa 分页+ layui数据表格渲染数据

我觉得我现在能看懂了，感慨。

layuitable 里面 json数据有多层嵌套, 请问要怎么获取数据

下面这个主楼里用的是改底层源码的方式，我觉得不可取。

layui数据表格total和data无法使用多层嵌套json格式的数据的解决办法

下面有对主楼这样的补充，但也是改的底层源码：

我用的版本中Layui符号是以字体的形式表示的（layui 230 之前只支持采用 unicode 字符），可能也是被拦截掉了，参考以下写法。

SpringBoot 中 引用LayUI font 不显示问题解决办法

以后可以直接使用内联元素调出字体图标。

Layui字体图标库

第二种方法（我没试过）：

Spring Boot使用layui的字体图标时无法正常显示 解决办法

layuiAdmin使用总结，基于springmvc

Layui在MVC下的配置过程，我没用到，但是感觉不错。去看了看这位以前的文章，感叹大佬真的太多了，随处一看就都是大佬。

虽然大家都说毕设很水，但是年轻又有为的人却不计其数，可能他们很聪明早就开始做自己的项目了，没把毕设当作发力点。那我就将错就错吧，我想学习，我很羡慕。

通过tablerender来刷新、绘制table

Layui表格单元格编辑保存

le可编辑扩展下拉框编辑器

layui的table中日期格式转换

这个除了显示其实还有个问题：当这个日期还是null时，会自动显示当前日期，所以需要加一个判断，不为空才显示。

下面是我用在了进度计划行内编辑中的例子。

先介绍几个字体图标的下载网站：

1、IcoMoon

2、Fontello

3、FontsAddict 这个是一个字体图标搜索引擎，提供的字体图标最多

下面以IcoMoon为例，介绍下载字体图标的方法

2/4

进入IcoMoon，看到如下图的页面，点击"Custom Built and Crisp Icon Fonts, Done Right"

3/4

选择需要的图标，点击下面的"Font>"，即生成字体

4/4

点击"Download"，即可下载。

下载得到的压缩包里有使用示例。

方法二、将自己的转为字体图标

1/10

有时候我们可能在网上找不到我们需要的字体图标。估计大部分人都不是美工，不会设计矢量图，最多能用ps画个简单的图，或者下载一些png格式的图标文件，我们该怎么把这些png格式的转为字体文件呢？

2/10

下载inkscape并安装 （百度搜索"inkscape"结果第一条），注意下载对应 *** 作系统的版本

3/10

打开inkscape，文件->打开->选择你的png，如图。

注意：最好要转换的原图是透明的png格式，而且最好是单色图，因为字体图标是单色的

4/10

点击选中图层，如图

5/10

路径->提取位图轮廓，如图

6/10

出现对话框，共有6中提取轮廓的模式，一般用 Brightness cutoff 或者 Brightness steps，点击右下角的"Update"，可以看到效果，如图。

选好你需要的模式，点击确定，关闭"提取位图轮廓"的对话框。

7/10

此时有两个图层，一个路径图层，一个原图图层。把路径图层拖至一旁，选中原图图层，按delete删除，然后把路径图层拖回原位置（顶上工具栏 x: 0, y: 0 的位置）

查看剩余4张图

8/10

文件->另存为，"保存类型"选择"普通的svg(svg)"，保存到你需要的位置即可。

9/10

接下来把制作得到的svg文件生成ttf、woff格式的字体。

打开IcoMoon网站，点击左上角的"Import Icons"按钮，选择你上一步制作的svg文件。

10/10

这样就导入进来了。然后你只要点右下角"Generate Fonts"就可以下载下来了，下载下来的zip包里面有eot、ttf、svg、woff四种格式的字体。

步骤如下：

1 下载Font Awesome到本地，并安装改字体，字体名称为FontAwesome

2 创建一个winform应用程序，并在Form界面设计如下：

代码如下：

1 using System;

2 using SystemCollectionsGeneric;

3 using SystemComponentModel;

4 using SystemData;

5 using SystemDrawing;

6 using SystemLinq;

7 using SystemText;

8 using SystemWindowsForms;

9

10 namespace WinFormFont

11 {

12 public partial class IconFontDemo : Form

13 {

14 public IconFontDemo()

15 {

16 InitializeComponent();

17 //必须是unicode码

18 thislabel1Text = "\uF028";

19 thislabel1Font = new Font("FontAwesome", 16);

20 thislabel1ForeColor = ColorGreen;

21 //必须是unicode码

22 thistextBox1Text = "\uF029 jackwangcumt";

23 thistextBox1Font = new Font("FontAwesome", 16);

24 thistextBox1ForeColor = ColorBlack;

25 }

26

27 private void button1_Click(object sender, EventArgs e)

28 {

29 int fontsize = intParse(thistextBox2Text);

30 thislabel1Font = new Font("FontAwesome", fontsize);

31 thistextBox1Font = new Font("FontAwesome", fontsize);

32 }

33 }

34 }

3 运行，界面如下：

更改字体大小，单击刷新，可以看到字体图标都变大了喽：

字体编码如何获取：

可以借助word中的插入符号，然后选择该字体，然后点选需要的图标，看下面的unicode编码即可：

以上就是关于Layui-基本使用、数据调试全部的内容，包括:Layui-基本使用、数据调试、在flexifont网站上制作的自己的字体能在手机上用吗、如何在window Form中使用Font Awesome等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！