当前位置:首页 > 网站建设 > 正文内容

layui管理系统模板教程(layui模板怎么用)

网站建设2年前 (2023-01-23)1178

本篇文章给大家谈谈layui管理系统模板教程,以及layui模板怎么用对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

layui前端分页不要每次调后端

layUI实现前端分页和后端分页

本文实例为大家分享了layUI实现前端分页和后端分页效果,供大家参考,具体内容如下

layui后端分页:

function pagination(curr,gwayId,mlity,ePart) {

$(".manage_ys_list").html('加载中...');

let dd={

conditions: {

gatewayId:gwayId,

searchText:"",

pageSize:15,

pageIndex:curr-1

},

identity:{

"userName":userName1,

"sessionId":sessionId1,

"token":token2

}

}

$.ajax({

type:"POST",

dataType: 'json',

url:UserListPaged,

data:dd,

headers:{ 'X-Requested-With': 'XMLHttpRequest' },

success:function(data){

let total=data.data.recordCount;

let pageCount=data.data.pageCount;

let pageSize=data.data.pageSize;

if(data.data.recordCount=0){

let dataHtml = '';

for(var i=0;idata.data.result.length;i++){

dataHtml += 'trtd'+data.data.result[i].gatewayId+'/tdtd'+data.data.result[i].userId+

'/tdtd'+data.data.result[i].realName+'/tdtd'+data.data.result[i].sex+'/tdtd'+data.data.result[i].workUnit+

'/tdtd'+data.data.result[i].phoneNo+'/tdtd'+data.data.result[i].isAdmin+

'/tdtda title="" class="btn btn-sm btn-info text-white manage_ys_xg" gatewayId="'+

data.data.result[i].gatewayId+'" userId="'+data.data.result[i].userId+

'" realName="'+data.data.result[i].realName+'" sex="'+data.data.result[i].sex+

'" age="'+data.data.result[i].age+'" birthday="'+data.data.result[i].birthday+

'" workUnit="'+data.data.result[i].workUnit+'" phoneNo="'+data.data.result[i].phoneNo+

'" isAdmin="'+data.data.result[i].isAdmin+'"修改/aa href="#" rel="external nofollow" title="" class="btn btn-warning text-white btn-sm man_ys_shanc" gatewayId="'+

data.data.result[i].gatewayId+'" userId="'+data.data.result[i].userId+'"删除/a/td/tr'

}

$(".manage_ys_list").html(dataHtml);

}else{

$(".manage_ys_list").html('li暂无数据/li');

}

//显示分页

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

var laypage = layui.laypage

,layer = layui.layer;

laypage.render({

elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号

,count: total//数据总数,从服务端得到

,limit: 15//每页显示条数

,curr: curr || 1 //当前页

layui实现table加载的示例代码

js实现:

layui.use(['table','form'],

function()

{

$

=

layui.jquery;

table

=

layui.table;

tableIns

=

initTable();

});

//加载列表

function

initTable(){

//

执行渲染

tableIns

=

table.render({

id:

'idTest',

elem

:

'#deviceTable',

//

指定原始表格元素选择器(推荐id选择器)

size:

'lg',

height

:

'full-20',

//

容器高度

url

:

'/csCloud-admin/deviceController/getDeviceList.do',

where:

{

'orgId':$("#orgId").val(),

'coldNum':$("#coldNum").val(),

'devType':$("#devType").val(),

'isUsed':$("#isUsedId").val()

},

method

:

'post',

cols

:

[

[

//

标题栏

{

field

:

'rownum',

title

:

'序号',

width

:

100,

sort

:

true

},

{

field

:

'devNum',

title

:

'设备编号',

width

:

200

},

{

field

:

'devAlias',

title

:

'设备别名',

width

:

100

},

{

field

:

'devTypeVal',

title

:

'设备类型',

width

:

100

},

{

field

:

'devModel',

title

:

'设备型号',

width

:

100

},

{

field

:

'stateVal',

title

:

'设备状态',

width

:

100

},

{

field

:

'coldNum',

title

:

'冷库编号',

width

:

100

},

{

field

:

'orgName',

title

:

'所属机构',

width

:

300

},

{

field

:

'isUsedValue',

title

:

'状态',

width

:

100

},

{

fixed

:

'right',

width

:

300,

align:'center',

toolbar

:

'#barDemo'

}

]

],

//

设置表头

page

:

true,

limits

:

[

10,30,

60,

90,

150,

300

],

limit

:

10

});

return

tableIns;

}

jsp实现:

div

class="layui-fluid"

div

class="layui-row"

div

class="layui-col-lg12"

table

id="deviceTable"/table

/div

/div

/div

以上这篇layui实现table加载的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:layui的table单击行勾选checkbox功能方法layui实现点击按钮给table添加一行layui结合form,table的全选、反选v1.0示例讲解

layui 的table表头 字体太多如何自动换行

layui 的table表头字体太多自动换行代码:

table style="TABLE-LAYOUT: fixed" border="1" cellspacing="0" cellpadding="0" width="200"

  tbody

      tr

          td style="WORD-WRAP: break-word" width="20"sssssssssssssssssssssssssssssssssssssssssssssss /td

          tdaaaaa/td

      /tr

      tr

          td style="WORD-WRAP: break-word" width="20"sssssssssssssssssssssssssssssssssssssssssssssss /td

          tdaaaaa/td

      /tr

  /tbody

/table

扩展资料

layui更多是面向于后端开发者,所以在组织形式上依然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式,却又并非受限于 CommonJS 的那些条条框框,它拥有自己的模式,更加轻量和简单。

layui 定义为“经典模块化”,并非是刻意强调“模块”理念本身,而是有意避开当下 JS 社区的主流方案,试图以尽可能简单的方式去诠释高效!

它的所谓经典,是在于对返璞归真的执念,它以当前浏览器普通认可的方式去组织模块! layui 认为这种轻量的组织方式,仍然可以填补 WebPack 以外的许多场景。

所以它坚持采用经典模块化,也正是能让人避开工具的复杂配置,重新回归到原生态的 HTML/CSS/JavaScript本身。

layui管理系统模板教程的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于layui模板怎么用、layui管理系统模板教程的信息别忘了在本站进行查找喔。

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://chlfg.com/post/5230.html

分享给朋友:

“layui管理系统模板教程(layui模板怎么用)” 的相关文章

网站制作套餐(北京网站制作套餐)

网站制作套餐(北京网站制作套餐)

本篇文章给大家谈谈网站制作套餐,以及北京网站制作套餐对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、做网站需要什么,做网站要多少钱? 2、一般企业网站制作多少钱? 3、网站建设多少钱? 4、制作一个网站需要多少钱? 5、网站制作需要多少钱 6、网站制作...

建设银行网站(欢迎访问中国建设银行网站)

建设银行网站(欢迎访问中国建设银行网站)

本篇文章给大家谈谈建设银行网站,以及欢迎访问中国建设银行网站对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、中国建设银行的官方网站是什么? 2、建行网址是什么 3、建设银行网址账号是什么 4、建设银行官方网站 5、欢迎访问中国建设银行官方网站怎么回事...

招生宣传单模板简洁(招生传单设计模板)

招生宣传单模板简洁(招生传单设计模板)

本篇文章给大家谈谈招生宣传单模板简洁,以及招生传单设计模板对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、宣传单模板 2、小学生辅导班招生宣传单怎么写? 3、小学生作文辅导班招生宣传单怎么写 4、英语培训班招生宣传单怎么做 5、开业宣传单怎么写 宣传单模...

剪映怎么提取文字(剪映怎么提取文字复制)

剪映怎么提取文字(剪映怎么提取文字复制)

今天给各位分享剪映怎么提取文字的知识,其中也会对剪映怎么提取文字复制进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、剪映字幕怎么一句一句的出来 2、剪映字幕怎么全部复制 3、剪映字体颜色可以自己提取吗 4、怎么提取视频的语音内容转为文字 5、...

淘宝详情页模板哪里有(淘宝详情页模板素材)

淘宝详情页模板哪里有(淘宝详情页模板素材)

本篇文章给大家谈谈淘宝详情页模板哪里有,以及淘宝详情页模板素材对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、哪里可以找到淘宝详情页模板,店小美可以吗?效果怎么样? 2、淘宝新旺铺装修之如何添加并设置宝贝详情页模板 3、请问一般淘宝,阿里巴巴,网站详情页的模板都是...

建党100周年手抄报模板打印(建党100周年手抄报模板打印图片)

建党100周年手抄报模板打印(建党100周年手抄报模板打印图片)

本篇文章给大家谈谈建党100周年手抄报模板打印,以及建党100周年手抄报模板打印图片对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、2021纪念建党100周年手抄报一等奖 2021喜迎建党100周年手抄报作品 2、2021建党100周年主题手抄报 2021建党主题手抄...