layui和后端如何连起来


本文摘自PHP中文网,作者尚,侵删。

Layui前后台数据交互:

layui有自己的一套特定的数据格式交互(这很重要),必须参数code:0,msg:“”,count:数据size(int),data:”数据List”。一般我们选择封装返回接收类。
Layui前台js请求数据
其中html代码

1

2

3

<link rel="stylesheet" href="static/layui/css/layui.css" media="all" />

<script type="text/javascript" src="static/layui/layui.js"></script>

<table class="layui-hide" id="test" lay-filter="table"></table>

js代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

layui.use(['form','layer','table'], function(){

          var table = layui.table

          ,form = layui.form,$=layui.$;

 

          table.render({

            elem: '#test'  //绑定table id

            ,url:'sys/menu/list'  //数据请求路径

            ,cellMinWidth: 80

            ,cols: [[

              {type:'numbers'}

              ,{field:'name', title:'菜单名称'}

              ,{field:'parentName', title:'父菜单名称',width:150}

              ,{field:'url', title: '菜单路径'}

              ,{field:'perms', title: '菜单权限'}

              ,{field:'type', title:'类型'}

              ,{field:'icon', title:'图标'}

              ,{field:'orderNum', title:'排序'}

              ,{fixed: 'right',title: '操作', width:180,      align:'center', toolbar: '#toolBar'}//一个工具栏  具体请查看layui官网

            ]]

            ,page: true   //开启分页

            ,limit:10   //默认十条数据一页

            ,limits:[10,20,30,50]  //数据分页条

            ,id: 'testReload' 

          });

});

阅读剩余部分

相关阅读 >>

layui封装模块教程

layui怎么使用日期控件

layui 免费开源吗?

layui如何实现表格单元格合并

layui和后端如何连起来

layui是基于vue的吗?

怎么将layui引入开发框架中

layui事件监听的方法

layui时间控件选择时间

layui数据表格删除当前行的实现方法

更多相关阅读请进入《layui》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...