Layui-基本使用、数据调试
-
Layui相关文档、教程
首先是官方文档。我真的不是第一次觉得阅读官方文档比百度上搜索要有效率几百倍了，当然前提教程是汉语。
组件库
使用文档
Springboot+Thymeleaf+layui框架的配置与使用
//引用模块，其中$是layui中的jquery模块
layui.use(['form','layer', 'laydate','upload'], function(){
$ = layui.jquery;
var form = layui.form
,layer = layui.layer
,laydate = layui.laydate
,upload = layui.upload;
}
-
Layui分页
Spring data jpa 分页+ layui数据表格渲染数据
-
Layui取出嵌套数据
我觉得我现在能看懂了，感慨。
layui.table 里面 json数据有多层嵌套, 请问要怎么获取数据?
简单.取值
自定义模板的方式取嵌套值
遍历解释
下面这个主楼里用的是改底层源码的方式，我觉得不可取。
layui数据表格total和data无法使用多层嵌套json格式的数据的解决办法
另一个方式
下面有对主楼这样的补充，但也是改的底层源码：
res[response[countName]]
res[options[response.dataName]]
其实这样就行了
对于多维数组尽量不要用点 而改用这样的调用方式
-
Layui的一些图标不显示
我用的版本中Layui符号是以字体的形式表示的（layui 2.3.0 之前只支持采用 unicode 字符），可能也是被拦截掉了，参考以下写法。
SpringBoot 中 引用LayUI font 不显示问题解决办法
以后可以直接使用内联元素调出字体图标。
Layui字体图标库
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<fork>true</fork>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<configuration>
<nonFilteredFileExtensions>
<nonFilteredFileExtension>woff</nonFilteredFileExtension>
<nonFilteredFileExtension>woff2</nonFilteredFileExtension>
<nonFilteredFileExtension>eot</nonFilteredFileExtension>
<nonFilteredFileExtension>ttf</nonFilteredFileExtension>
<nonFilteredFileExtension>svg</nonFilteredFileExtension>
</nonFilteredFileExtensions>
</configuration>
</plugin>
</plugins>
</build>
第二种方法（我没试过）：
Spring Boot使用layui的字体图标时无法正常显示 解决办法
原因：经过maven的filter，会破坏font文件的二进制文件格式，导致前台解析出错。
解决办法：在pom文件中配置maven的filter，在<build>标签内添加如下配置：
在pom文件中配置maven的filter
-
Layui基于SpringMVC的使用经验
layuiAdmin使用总结，基于springmvc
Layui在MVC下的配置过程，我没用到，但是感觉不错。去看了看这位以前的文章，感叹大佬真的太多了，随处一看就都是大佬。
虽然大家都说毕设很水，但是年轻又有为的人却不计其数，可能他们很聪明早就开始做自己的项目了，没把毕设当作发力点。那我就将错就错吧，我想学习，我很羡慕。
-
Layui的table绘制
通过table.render来刷新、绘制table
-
Layui行内编辑
//监听单元格编辑
layuiTable.on('edit(tabSupplierCategoryDetails)', function (obj) {
var value = obj.value;//修改后的数据
var field = obj.field;//修改的字段名
var data = obj.data;//修改的当行数据
//获取修改行的ID值
var ID = data.SupplierCategoryDetailsID;
$.post("/BackStageManagement/IinventoryManagement/updateSupplierCategoryDetails", { ID: ID, value: value, field: field }, function (data) {
if (data.State) {
layer.msg(data.Text);
}else{
layer.msg(data.Text);
}
});
});
public ActionResult updateSupplierCategoryDetails(int ID , string value , string field){
ReturnJsonVo returnJson = new ReturnJsonVo();
SupplierCategoryDetails updateSupplierCategoryDetails = myModels.SupplierCategoryDetails.Where(L => L.SupplierCategoryDetailsID == ID).Select(L => L).Single();
if (field == "SupplierCategoryNumber")
{
updateSupplierCategoryDetails.SupplierCategoryNumber = value;
}
if (field == "SupplyCategory")
{
updateSupplierCategoryDetails.SupplyCategory = value;
}
myModels.Entry(updateSupplierCategoryDetails).State = EntityState.Modified;
if (myModels.SaveChanges() > 0)
{
returnJson.State = true;
returnJson.Text = "编辑成功";
}else{
returnJson.Text = "编辑失败";
}
return Json(returnJson, JsonRequestBehavior.AllowGet);
}
-
Layui的table中日期格式的显示
layui的table中日期格式转换
这个除了显示其实还有个问题：当这个日期还是null时，会自动显示当前日期，所以需要加一个判断，不为空才显示。
下面是我用在了进度计划行内编辑中的例子。
,cols: [
[ //表头
{field: '', title: '合同编号', templet: '<div>{{d.contract.no}}</div>'}
,{field: '', title: '追踪阶段', templet: '<div>{{d.trackStatus.name}}</div>'}
,{field: 'name', title: '进度名称', edit: 'text'}
,{field: 'planDate', title: '计划日期', edit: 'text', event: 'date',data_field: "planDate", templet:function(d){
return d.planDate == null ? "":layui.util.toDateString(d.planDate, "yyyy-MM-dd");
}}
,{title:'操作', toolbar: '#barDemo',width:200}
]
],
