Layui-基本使用、数据调试

Posted 2023-03-01

参考技术A 首先是官方文档。我真的不是第一次觉得阅读官方文档比百度上搜索要有效率几百倍了，当然前提教程是汉语。
组件库
使用文档
Springboot+Thymeleaf+layui框架的配置与使用

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

我觉得我现在能看懂了，感慨。
layui.table 里面 json数据有多层嵌套, 请问要怎么获取数据?

下面这个主楼里用的是改底层源码的方式，我觉得不可取。
layui数据表格total和data无法使用多层嵌套json格式的数据的解决办法

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

我用的版本中Layui符号是以字体的形式表示的（layui 2.3.0 之前只支持采用 unicode 字符），可能也是被拦截掉了，参考以下写法。
SpringBoot 中 引用LayUI font 不显示问题解决办法
以后可以直接使用内联元素调出字体图标。
Layui字体图标库

第二种方法（我没试过）：
Spring Boot使用layui的字体图标时无法正常显示 解决办法

layuiAdmin使用总结，基于springmvc
Layui在MVC下的配置过程，我没用到，但是感觉不错。去看了看这位以前的文章，感叹大佬真的太多了，随处一看就都是大佬。
虽然大家都说毕设很水，但是年轻又有为的人却不计其数，可能他们很聪明早就开始做自己的项目了，没把毕设当作发力点。那我就将错就错吧，我想学习，我很羡慕。

通过table.render来刷新、绘制table

Layui表格单元格编辑保存

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

layui的table中日期格式转换
这个除了显示其实还有个问题：当这个日期还是null时，会自动显示当前日期，所以需要加一个判断，不为空才显示。
下面是我用在了进度计划行内编辑中的例子。

layui基本使用（动态获取数据，并把需要的数据传到新打开的窗口）

<div class="xiaoxi">\n‘ +
    ‘    <div class="layui-row">\n‘ +
    ‘        <input type="hidden" name="id" class="id" value="‘ + item.ID + ‘"/>\n‘ +
    ‘        <input type="hidden" name="type" class="type" value="‘ + item.type + ‘"/>\n‘ +
    ‘        <input type="hidden" name="name" class="name" value="‘ + item.name + ‘"/>\n‘ +
    ‘        <input type="hidden" name="states" class="states" value="‘ + item.states + ‘"/>\n‘ +
    ‘        <div class="layui-col-xs8" style="padding-left: 50px;padding-top: 10px;">\n‘ +
    ‘            <div ><span name="ziti">‘ + item.TITLE + ‘</span></div>\n‘ +
    ‘            <div class="one" style=" padding-top: 8px;"><span name="ziti" style="font-size:12px">‘ + item.ZDRQ + ‘</span></div>\n‘ +
    ‘        </div>\n‘ +
    ‘        <div class="layui-col-xs1">\n‘ +
    ‘        </div>\n‘ +
    ‘        <div class="layui-col-xs3" style="padding-left: 50px;padding-top: 10px;">\n‘ +
    ‘            <div><span name="ziti">‘ + item.CDATE + ‘</span></div>\n‘ +
    ‘            <div><span name="ziti">‘ + item.TJR + ‘</span></div>\n‘ +
    ‘        </div>\n‘ +
    ‘    </div>\n‘ +
    ‘    <div style=" padding-top: 15px;"><hr/></div>\n‘ +
    ‘</div>‘

============================================

//消息的跳转页面
$(".xiaoxi").click(function () { //添加跳转页面的单击事件
var id = $(this).find("input[name=‘id‘]").val();//账单或合同的ID
var type = $(this).find("input[name=‘type‘]").val();//0是合同，1是账单
var span = $(this).find("span").val();//获取span标签里的内容
if (type === "1") {//0是合同，1是账单
    if (states === "0") {//账单待审核0/审核通过1/审核不通过2/ 默认生成3
        parent.layer.open({
            zIndex: 1005,
            type: 2,    //弹出类型
            title: ‘审核账单‘,   //标题
            closeBtn: 1,    //显示关闭按钮
            shade: [0.3],   //遮罩透明度
            area: [‘80%‘, ‘90%‘],  //打开窗口的宽高
            time: 0,    //几秒后自动关闭，默认0时不关闭
            anim: 1,    //动画效果
            resize: false,  //设置成不允许拉伸
            content: ‘../../../webhtml/daiban/bill_shenhe.html?BILL_ID=‘ + id + ‘‘  //iframe的url
        });