layui模板怎么用(layui不同页面使用同一模板)

最近开发中在做项目的后台管理系统。用的guns框架,框架自带的js是layui。自己写页面也不好换模板。就简单的使用layui进行开发了。

1、layui的js、css引入跳过。

2、layui的js开头定义:

首先统一的js语法开头layui.use();要用到什么组件自己添加,下面的示例是用到了jquery、ajax、form表单等组件;但ajax的写法有很多种可以自己写熟悉的语法格式,不强制使用它封装的ax。

layui.use([‘form’, ‘admin’, ‘ax’], function () { var $ = layui.jquery; var $ax = layui.ax; var form = layui.form;

var admin = layui.admin;

});

3、layui的表格生成,包括分页:

我使用的表格是在html页面,先定义表格,然后再js 初始化各个行

html代码:

<table class=”layui-table” id=”channelListTable”lay-filter=”channelListTable”></table>

js代码:

1)、首先定义表格的全局变量:

var ChannelList = { tableId: “channelListTable”};

2)、访问后台路径,渲染表格(这里可以定义表格的大小,注意有个initColumn方法)

var tableResult = table.render({ elem: ‘#’ ChannelList.tableId, url: Feng.ctxPath ‘/ChannelList/list’, page: true, height: “full-158”, cellMinWidth: 100, cols: ChannelList.initColumn()});

3)、通过刚刚定义的表格的全局变量初始化行,也就是ChannelList.initColumn方法

ChannelList.initColumn = function () { return [[ {type: ‘checkbox’}, {field: ‘cId’, sort: true, title: ‘设备id’}, {field: ‘cName’, sort: true, title: ‘设备名称’},

{field: ‘gdName’, sort: true, title: ‘设备昵称’}

]]

这里对应的就是表格里的各个字段,field与后台的实体类命名相同即可。

总结:这种表格生成方法蠢得一批。完全用的html与js。框架自动生成表格。分页在后台用的LayuiPageInfo类封装,页面的分页也是和表格一起生成,这种自动生成方式在后面的开发中给我带来了很大的痛苦。如果需求变更,在页面中的样式有变更。表格的样式调整起来会非常麻烦,想到了以前jsp的好。现在虽然jsp的使用率正在降低但是其他的模板引擎正在兴起。最近也正好在学习thymeleaf。过几天再写一个thymeleaf的学习笔记。

4、layui的特色,render方法:

在没有学过layui的情况下,来使用它遇到好多坑 ,最坑的应该就是render方法了,layui的组件,无论什么组件写完后都需要render一下,举个例子:

在页面加载完成后需要在form表单里动态生成一个select组件。生成代码后就需要render下表单,生成的数据才会显示。否则

layui模板怎么用(layui不同页面使用同一模板)

layui模板怎么用(layui不同页面使用同一模板)。具体方法看截图

form.render(‘select’);渲染select框

同样的意思form.render(‘checkbox’);渲染多选框

5、form表单的验证,这个用起来还是挺方便的:

话不多说,直接举例

html代码:

<div class=”layui-input-block”>

<input id=”username” name=”username” type=”text” class=”layui-input”

lay-verify=”required|username” required/>

</div>

注意lay-verify。

js代码:

form.verify({ username:function(value){ var flag; $.ajax({ url:Feng.ctxPath ‘/subUserList/checkUsername’, data:{“username”:value}, dataType:”json”, async:false, success:function (data) { if(data.flag == false || data.flag == ‘false’){ flag =data.flag; } },error:function (data) { alert(“用户名效验失败” data); } }); if(flag==false){ return “用户名已存在”; } },});

其中required代表必填项。

OK,暂时写那么多,以后遇到坑继续填上,其实作为一个外行前端,对前端这些框架不太懂,也不太想把时间花在页面上,前端的各种框架,jquery最基础的,又有各种如bootstrap,layui,easyui,还有我没接触过的vue。术业有专攻,我选择java

发表评论

登录后才能评论