icon-图标

1:√
2:×
3:问号
4:锁
5:哭脸
6:笑脸
7:感叹号

使用layer.msg('提示',{icon:1});  目前只有7种图标可选,用的适当还是很好看的。

表格刷新

parent.layui.table.reload('表格的ID', { page: { curr: 1 } });

这种是弹出层页面刷新父窗体表格数据的惯用手法,但我把这种重载写成一个方法,父页面还是可以正常调用。如果在子窗体调用父窗体的这个方法则会出错。方法和layui.use在同一个script标签下,方法会失效,只能写在另一个script标签里面。

在IE浏览器中进行数据添加后,数据未能正确重载。这是因为IE浏览器在执行请求时,如果url请求参数一致,会默认调用缓存,这样你的数据依旧是初次加载的数据。

解决措施:在表格重载的条件中加一个时间参数,让它认为这是一个新请求就行了,就不会调用缓存。

where: { time:new Date()}

数据查询

在对表格进行查询等操作时,如果表格使用的是自动渲染,同时页面中有文本框查询,下拉框查询,这样进行查询时。如果你上一次使用了下拉框中的条件做了查询,当你再使用文本框进行查询时,下拉框的参数还是会携带上一次的值,导致查询结果异常。使用方法级渲染可避免此类问题,二者重载的方式存在差异。当然,有时候为了更方便的自定义表头,使用了自动渲染且条件参数相对较少,你可以考虑进行查询时给其他参数赋空值。

定位当前页

场景:在操作表格中,对第二页数据进行了修改操作,当你重载表格时,页码会自动跳到第一页,如何修改完成后,就停留在当前页呢?

$(".layui-laypage-btn")[0].click(); 

这是模拟分页的那个确定按钮,我遇到这个问题,在Layui社区搜到的答案。具体请见

https://fly.layui.com/jie/13973/

文件上传获取文件名

在官方的文档选择文件的回调中有这么一串代码,只是我并没有理解,所以不知道怎么获取,后来才知晓file参数所代表的含义。

,choose: function(obj){

//将每次选择的文件追加到文件队列

var files = obj.pushFile();

//预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)

obj.preview(function(index, file, result){

console.log(index); //得到文件索引

console.log(file); //得到文件对象  这里已经说了得到了文件对象,那就可以直接file.name直接获取文件名

console.log(result); //得到文件base64编码,比如图片

//obj.resetFile(index, file, '123.jpg'); //重命名文件名,layui 2.3.0 开始新增

表格顯示圖片

有时候为了丰富表格内容,会对一些内容进行特别的样式编排,比如对某项内容使用a标签跳转,使用表单元素如checkbox来展示状态,这些都可以用templet模版来实现。那如何显示图片呢,下面就来说说实现方式,官方文档给出了三种templet语法方式,这里所使用的的是函数转义的方式。

templet:function (d) { return '<div><img src='+d.PrizeImg+'></div>' }

官方栗子:

table.render({
cols: [[
{field:'title', title: '文章标题', width: 200
,templet: function(d){
return 'ID:'+ d.id +',标题:<span style="color: #c00;">'+ d.title +'</span>'
}
}
,{field:'id', title:'ID', width:100}
]]
});

但存在缺点,对于图片的大小控制很难操控,可能是因为表格的单元格样式,我很想显示成一个略缩图的样子,但是没有实现,只是大致设了大小,显示一块内容内容,看起来是真的丑。

Layui 手册一的更多相关文章

  1. LayUI后台管理与综合示例

    一.LayUI介绍 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体 ...

  2. 7月新的开始 - LayUI的基本使用 - 分页

    LayUI 分页处理 数据展示是以表格的形式展示的.使用模块如下: 首先使用内置模块-数据表格 然后使用内置模块-分页 官方文档地址:https://www.layui.com/doc/ 官方示例地址 ...

  3. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  4. LayUI的基本使用 - Tab选项卡切换显示对应数据

    要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...

  5. SSM+layui实现增删改查

    前端使用layui框架,后端使用Spring+SpringMVC+Mybatis的集合框架,数据库使用MySQL,完成对一张用户表的增删改查操作. 前后端分离开发,即前端的HTML页面通过ajax技术 ...

  6. layui.laytpl 模板引擎用法

    目录 layui下载地址: 最终效果: 模板引擎文档 手册地址: 以下是代码思路: layui下载地址: https://www.layui.com/ 最终效果: 模板引擎文档 手册地址: https ...

  7. FREERTOS 手册阅读笔记

    郑重声明,版权所有! 转载需说明. FREERTOS堆栈大小的单位是word,不是byte. 根据处理器架构优化系统的任务优先级不能超过32,If the architecture optimized ...

  8. JS魔法堂:不完全国际化&本地化手册 之 理論篇

    前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...

  9. 转职成为TypeScript程序员的参考手册

    写在前面 作者并没有任何可以作为背书的履历来证明自己写作这份手册的分量. 其内容大都来自于TypeScript官方资料或者搜索引擎获得,期间掺杂少量作者的私见,并会标明. 大部分内容来自于http:/ ...

随机推荐

  1. unity profiler - Loading.ReadObject

    关于Loading.ReadObject耗费比较高,有什么推荐的方法吗? Loading.ReadObject是Unity引擎的资源加载函数,一般出现在切换场景和加载API调用时,这其中包括纹理.网格 ...

  2. 133克隆图 · Clone Graph

    [抄题]: 克隆一张无向图,图中的每个节点包含一个 label 和一个列表 neighbors. [思维问题]: [一句话思路]: 先BFS克隆点(一个点+扩展所有邻居),再克隆邻居(一个点+扩展所有 ...

  3. Spring框架的IOC核心功能快速入门

    2. 步骤一:下载Spring框架的开发包 * 官网:http://spring.io/ * 下载地址:http://repo.springsource.org/libs-release-local/ ...

  4. Linux下搭建gtk+2.0开发环境

    1.执行如下命令,检查系统是否已安装gtk+ pkg-config --list-all |grep gtk 若命令提示如下,则系统已安装gtk+,否则未安装. 2.若未安装,则执行如下命令进行安装 ...

  5. LR参数化类型为file显示大于100数据方法

    在做测试的时候,某些数据需要大量参数化,可以用连接数据库方式,也可以使用file类型进行参数化,而loadrunner中file类型的参数化数据只显示100条,可以调整如下配置文件进行显示数据的修改: ...

  6. 将Win7笔记本设置成WiFi热点(无线路由器)

    查看是否能启动WiFi网卡: S1:运行cmd命令,打开命令提示符窗口(以管理员身份运行). S2:在命令行输入:netsh wlan show drivers. 若“支持的承载网络”后为“是”,则可 ...

  7. windows驱动

    DriveEntry() 启动 停止 接口函数 驱动程序名 驱动程序版本号 异常处理 是否运行 声明LPOReceive类型的函数 声明函数指针(外部传进来的回调函数) 存放配置字符串 本机IP 串口 ...

  8. maven 打包 OutOfMemoryError

    maven 打包 OutOfMemoryError [ERROR] Java heap space -> [Help 1] [ERROR] [ERROR] To see the full sta ...

  9. Zookeeper 系列(四)ZKClient API

    Zookeeper 系列(四)ZKClient API 环境准备: <dependency> <groupId>com.101tec</groupId> <a ...

  10. ubuntu16.04 LTS Server 安装mysql phpmyadmin apache2 php5.6环境

    1.安装apache sudo apt-get install apache2 为了测试apache2是否正常,访问http://localhost/或http://127.0.0.1/,出现It W ...