搜索
首页web前端Layui教程layui中的table模块中的基础参数应用

layui中的table模块中的基础参数应用

Nov 19, 2019 pm 05:07 PM
layuitable

layui中的table模块中的基础参数应用

layui 的 table模块是一个重头,在基础参数方面尽可能地做到友好,即:保证功能的前提而又避免过于繁杂的配置。

基础参数一般出现在以下几种场景中:

场景一:下述 lay-data 里面的内容即为基础参数项,切记:值要用单引号

<table lay-data="{height:300, url:&#39;/api/data&#39;}" lay-filter="demo"> …… </table>

场景二:下述方法中的键值即为基础参数项

table.render({
  height: 300
  ,url: &#39;/api/data&#39;
});

更多场景:下述options即为含有基础参数项的对象

> table.init(&#39;filter&#39;, options); //转化静态表格
> var tableObj = table.render({});
  tableObj.reload(options); //重载表格

接下来看一下基础元素有哪些?

1、elem - 绑定元素是指定原始table容器,只适用于 table.render()的渲染方式

HTML:
<table id="test"></table>     
 
JS:
table.render({ //其它参数在此省略
  elem: &#39;#test&#39; //或 elem: document.getElementById(&#39;test&#39;) 等
});

2、设置表头,这里包含很多值,是一个二维数组。如果你采用表格的“方法级渲染”,那么你需要借助该参数来设定表格。如:

JS:
table.render({
  cols:  [[ //标题栏
    {checkbox: true}
    ,{field: &#39;id&#39;, title: &#39;ID&#39;, width: 80}
    ,{field: &#39;username&#39;, title: &#39;用户名&#39;, width: 120}
  ]]
});
 
它等价于:
<table class="layui-table" lay-data="{基础参数}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{checkbox:true}"></th>
      <th lay-data="{field:&#39;id&#39;, width:80}">ID</th>
      <th lay-data="{field:&#39;username&#39;, width:180}">用户名</th>
    </tr>
  </thead>
</table>

下面是一个二级表头的例子:

JS:
table.render({
  cols:  [[ //标题栏
    {field: &#39;username&#39;, title: &#39;联系人&#39;, width: 80, rowspan: 2} //rowspan即纵向跨越的单元格数
    ,{field: &#39;amount&#39;, title: &#39;金额&#39;, width: 80, rowspan: 2}
    ,{align: &#39;center&#39;, title: &#39;地址&#39;, colspan: 3} //colspan即横跨的单元格数,这种情况下不用设置field和width
  ], [
    {field: &#39;province&#39;, title: &#39;省&#39;, width: 80}
    ,{field: &#39;city&#39;, title: &#39;市&#39;, width: 120}
    ,{field: &#39;county&#39;, title: &#39;详细&#39;, width: 300}
  ]]
});
 
它等价于:
<table class="layui-table" lay-data="{基础参数}">
  <thead>
    <tr>
      <th lay-data="{field:&#39;username&#39;, width:80}" rowspan="2">联系人</th>
      <th lay-data="{field:&#39;amount&#39;, width:120}" rowspan="2">金额</th>
      <th lay-data="{align:&#39;center&#39;}" colspan="3">地址</th>
    </tr>
    <tr>
      <th lay-data="{field:&#39;province&#39;, width:80}">省</th>
      <th lay-data="{field:&#39;city&#39;, width:120}">市</th>
      <th lay-data="{field:&#39;county&#39;, width:300}">详细</th>
    </tr>
  </thead>
</table>

需要说明的是,table模块支持无限极表头,你可按照上述的方式继续扩充。核心点在于 rowspan 和 colspan 两个参数的

接下来就是表头里的一些参数设置

f35d6e602fd7d0f0edfa6f7d103c1b57 field:设定字段名

table.render({
  cols: [[
    {field: &#39;id&#39;} //其它参数在此省略
    ,{field: &#39;username&#39;}
  ]]
});
 
等价于:
<th lay-data="{field:&#39;id&#39;}"></th>
<th lay-data="{field:&#39;username&#39;}"></th>

2cc198a1d5eb0d3eb508d858c9f5cbdb title:设定标题名称

table.render({
  cols: [[
    {title: &#39;邮箱&#39;} //其它参数在此省略
    ,{title: &#39;签名&#39;}
  ]]
});
 
等价于:
<th lay-data="{}">邮箱</th> (PS:也可以把标题写在lay-data里面,即 title:&#39;邮箱&#39;)
<th lay-data="{}">签名</th>

5bdf4c78156c7953567bb5a0aef2fc53 width:设定列宽。列宽的设定也通常是必须的(“特殊列”除外,如:复选框列、工具列等),它关系到表格的整体美观程度。

table.render({
  cols: [[
    {width: 80} //其它参数在此省略
    ,{width: 120}
  ]]
});
 
等价于:
<th lay-data="{width:80}"></th>
<th lay-data="{width:120}"></th>

23889872c2e8594e0f446a471a78ec4c checkbox:设定复选框。如果设置 true,则表示该列内容为复选框,通常它被放在第一列。

table.render({
  cols: [[
    {checkbox: true} //其它参数在此省略
    ,{field: &#39;id&#39;, title:&#39;ID&#39;, width: 100}
  ]]
});
 
等价于:
<th lay-data="{checkbox:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

还有需要注意的是,这里的LAY_CHECKED是和checkbox搭配使用的,如果设置 true,则表示复选框默认全部选中。

table.render({
  cols: [[
    {checkbox: true, LAY_CHECKED: true} //其它参数在此省略
    ,{field: &#39;id&#39;, title:&#39;ID&#39;, width: 100}
  ]]
});
 
等价于:
<th lay-data="{checkbox:true, LAY_CHECKED: true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

 43ad812d3a971134e40facaca816c822 space:设定空隙列。如果设置 true,则定义一个 15px 宽度无任何内容的列。

table.render({
  cols: [[ //其它参数在此省略
    {space: true}
    ,{field: &#39;id&#39;, title:&#39;ID&#39;, width: 100}
  ]]
});
 
等价于:
<th lay-data="{space:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

efbfa0de8737dc86eae413541a49df20 sort:是否需要排序。如果设置 true,则在对应的表头显示排序icon,从而对列开启排序功能。

注意:不推荐对值存在:数字和普通字符的列开启排序,因为会进入字典序比对。比如:'贤心' > '2' > '100',这可能并不是你想要的结果,但字典序排列算法(ASCII码比对)就是这样的,具体你也可以去了解一下字典序方面的知识。

table.render({
  cols: [[
    {sort:true} //其它参数在此省略
    ,{field:&#39;id&#39;, title:&#39;ID&#39;, width:100}
  ]]
});
 
等价于:
<th lay-data="{sort:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

40107655ec554331c1c6222ab67a141c fixed:是否需要固定列。如果设置 true 或 'right',则对应的列将会被固定在左或右,不随滚动条而滚动。

table.render({
  cols: [[
    {fixed:true} //其它参数在此省略
    ,{field:&#39;id&#39;, title:&#39;ID&#39;, width:100}
    ,{field:&#39;username&#39;, title:&#39;姓名&#39;, width:120, fixed:&#39;right&#39;} //固定列在右
  ]]
});
 
等价于:
<th lay-data="{sort:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>
<th lay-data="{field:&#39;username&#39;, width:120, fixed:&#39;right&#39;}">姓名</th>

37cd6113a8c348d99fa846f2c6fcea98 edit:是否允许编辑。如果设置 true,则对应列的单元格将会被允许编辑,目前只支持type="text"的input编辑。

table.render({
  cols: [[
    {edit:&#39;text&#39;} //其它参数在此省略
    ,{field:&#39;id&#39;, title:&#39;ID&#39;, width:100}
  ]]
});
 
等价于:
<th lay-data="{edit:&#39;text&#39;}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

c161494dba5e0dd0fb25d890c74e408d templet:自定义模版。在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的,如果你想对某列的单元格添加链接等其它元素,你可以借助该参数来轻松实现。这是一个非常实用的功能,你的表格内容会因此而丰富多样。

table.render({
  cols: [[
    {field:&#39;title&#39;, title: &#39;文章标题&#39;, width: 200, templet: &#39;#titleTpl&#39;} //这里的templet值是模板元素的选择器
    ,{field:&#39;id&#39;, title:&#39;ID&#39;, width:100}
  ]]
});
 
等价于:
<th lay-data="{field:&#39;title&#39;, width: 200, templet: &#39;#titleTpl&#39;}">文章标题</th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

事实上,templet也可以直接是一段html内容,如:

templet: &#39;<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>&#39; 
注意:这里一定要被一层 <div></div> 包裹,否则无法读取到模板

eebe431eeb58984ec8915354762c30c6 toolbar:绑定工具条。通常你需要在表格的每一行加上 查看、编辑、删除 这样类似的操作按钮,而 tool 参数就是为此而生,你因此可以非常便捷地实现各种操作功能。

tool 参数和 templet 参数的使用方式完全类似,通常接受的是一个选择器,也可以是一段HTML字符。

table.render({
  cols: [[
    {field:&#39;id&#39;, title:&#39;ID&#39;, width:100}
    ,{fixed: &#39;right&#39;, width:150, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;} //这里的toolbar值是模板元素的选择器
  ]]
});
 
等价于:
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>
<th lay-data="{fixed: &#39;right&#39;, width:150, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;}"></th>

下述是 toolbar 对应的模板,它可以存放在页面的任意位置:

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
  
  <!-- 这里同样支持 laytpl 语法,如: -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-mini" lay-event="check">审核</a>
  {{#  } }}
</script>
 
注意:属性 lay-event="" 是模板的关键所在,值可随意定义。

接下来我们借助table模块的工具条事件,完成不同的操作功能:

//监听工具条
table.on(&#39;tool(test)&#39;, function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值
  var tr = obj.tr; //获得当前行 tr 的DOM对象
 
  if(layEvent === &#39;detail&#39;){ //查看
    //do somehing
  } else if(layEvent === &#39;del&#39;){ //删除
    layer.confirm(&#39;真的删除行么&#39;, function(index){
      obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
      layer.close(index);
      //向服务端发送删除指令
    });
  } else if(layEvent === &#39;edit&#39;){ //编辑
    //do something
    
    //同步更新缓存对应的值
    obj.update({
      username: &#39;123&#39;
      ,title: &#39;xxx&#39;
    });
  }
});

更多layui相关知识请关注layui框架

以上是layui中的table模块中的基础参数应用的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:博客园。如有侵权,请联系admin@php.cn删除
如何使用Layui的流块模块进行无限滚动?如何使用Layui的流块模块进行无限滚动?Mar 18, 2025 pm 01:01 PM

文章讨论了使用Layui的流量模块进行无限滚动,涵盖设置,最佳实践,性能优化和自定义,以增强用户体验。

如何使用Layui的元素模块来创建选项卡,手风琴和进度条?如何使用Layui的元素模块来创建选项卡,手风琴和进度条?Mar 18, 2025 pm 01:00 PM

本文详细介绍了如何使用Layui的元素模块来创建和自定义UI元素,例如选项卡,手风琴和进度条,突出显示HTML结构,初始化和常见的陷阱,以避免。

如何自定义Layui旋转木制模块的外观和行为?如何自定义Layui旋转木制模块的外观和行为?Mar 18, 2025 pm 12:59 PM

本文讨论了自定义Layui的Carousel模块,重点介绍了外观和行为的CSS和JavaScript修改,包括过渡效果,自动播放设置以及添加自定义导航控件。

如何使用Layui的旋转木载模块来创建图像滑块?如何使用Layui的旋转木载模块来创建图像滑块?Mar 18, 2025 pm 12:58 PM

该文章指导使用Layui的Carousel模块用于图像滑块,详细介绍设置的步骤,自定义选项,实现自动播放和导航以及性能优化策略。

如何将Layui的上传模块配置为限制文件类型和尺寸?如何将Layui的上传模块配置为限制文件类型和尺寸?Mar 18, 2025 pm 12:57 PM

本文讨论了使用Accept,Exts和Size属性来限制Layui的上传模块,以限制文件类型和尺寸,并自定义错误消息以违反。

如何使用Layui的图层模块来创建模态窗口和对话框?如何使用Layui的图层模块来创建模态窗口和对话框?Mar 18, 2025 pm 12:46 PM

本文介绍了如何使用Layui的图层模块创建模态窗口和对话框,详细设置,类型,自定义和常见的陷阱要避免。

Layui与其他CSS框架(如Bootstrap和Sminantic UI)相比如何?Layui与其他CSS框架(如Bootstrap和Sminantic UI)相比如何?Mar 14, 2025 pm 07:29 PM

Layui以简单性和性能而闻名,与Bootstrap和Sminantic UI进行了比较,并易于设计。 Layui在模块化和中文支持方面表现出色。(159个字符)

除了典型的Web应用程序之外,Layui的高级用例有哪些?除了典型的Web应用程序之外,Layui的高级用例有哪些?Mar 14, 2025 pm 07:28 PM

Layui超出了基本的Web应用程序,可以通过其模块化设计和丰富的UI组件来增强企业级用户体验。(159个字符)增强了企业级用户体验。(159个字符)

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用