layUI数据表格(table)

简介: layUI数据表格(table)
<!--引入 layui.css--> 
//定义表格
<table class="layui-table" lay-data="{id:'myTableID'}">
  <thead>
    <tr> 
      <th lay-data="{type:'checkbox'}"></th> // --->加上选择框会显示行号
      <th lay-data="{field:'id', width:80,hide:true}">隐藏ID</th>
      <th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
      <th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
      <th lay-data="{align:'center'}" colspan="3">地址</th>
    </tr>
    <tr>
      <th lay-data="{field:'province', width:80}">省</th>
      <th lay-data="{field:'city', width:120}">市</th>
      <th lay-data="{field:'county', width:300,templet:'<div>{{myFun(d.county)}}</div>'}">详细</th>  //-->数据格式化
    </tr>
  </thead>
</table>
<!--引入 jquery.js--> 
<!--引入 layui.js-->
//自定义函数
function myFun(o){
    // do.....
}
//加载数据 刷新表格
table.reload('myTableID', {
    url: _ctx + '/url',
    where: { //参数设置
        aaaaaa: 'xxx'
        ,bbb: 'yyy'
        //…
    }
    ,page: {
        curr: 1 //从第 1 页开始显示
    }
});
相关文章
|
JavaScript Java 数据格式
Layui数据表格(table)前后台交互
Layui数据表格(table)前后台交互
563 0
|
JavaScript
Layui数据表格嵌套文件上传按钮
Layui数据表格嵌套文件上传按钮
205 0
|
2月前
antd table合并行或者列(动态添加合并行、列)
在Ant Design的Table组件中实现行或列的合并,通过动态计算数据源中的`rowSpan`或`colSpan`属性来控制,支持对特定字段进行行或列合并,包括多选框列的合并处理。
145 3
antd table合并行或者列(动态添加合并行、列)
|
6月前
|
JSON 前端开发 JavaScript
layui-数据表格的实现
`layui`是一个前端UI框架,本文档介绍了如何使用layui创建数据表格。首先展示了三张截图来预览效果,接着讲解了下载layui资源包并导入到项目中的步骤。然后,在新建的web项目中引入layui的CSS和JS文件。文档提供了模拟的JSON数据来展示表格内容。接下来,详细说明了数据表格的实现,包括注意事项和代码实现,强调了`table`标签的`id`与`script`中`elem`的匹配。此外,文档还涵盖了监听头部工具栏和工具条事件的方法,并展示了弹出层的实现,用于添加和编辑表格数据。最后,给出了完整的HTML源码示例。
109 0
|
6月前
|
XML 数据格式
uniapp本地多个sheet导出表格
uniapp本地多个sheet导出表格
|
12月前
|
数据格式
layui数据表格
layui数据表格
53 0
|
数据格式
Layui数据表格templet的数据无法合计
在使用layui数据表格的时候,有一个列是使用templet,依据其他两个列数据计算得到。 在该列开启合计行,一直显示是0 。其他两列数据合计正常。 在社区和百度上寻找过答案,并没有相关介绍。 在解决了该问题后,写下这篇小记录。
352 0
vue-mergeable-table 动态生成的可合并行列的表格
vue-mergeable-table 动态生成的可合并行列的表格
161 0
|
前端开发 JavaScript 开发工具
前端|layui后台管理—table 数据表格
前端|layui后台管理—table 数据表格
422 0