上次做table有些东西 忘记了 这次当作来个分析总结一下  跟大家共同学习

闲话不多说 直接上例子  

代码:

<form id="form1" runat="server">
<div>
<table id="demo" lay-filter="test"></table>
</div>
</form>

<script>
//*********************************layuitable初始化代码**********************************
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#demo'
, height: 500
, url: '/GetDataForLayuiTableLearning.ashx' //数据接口
, page: true //开启分页
, cols: [[ //表头
{ field: 'ID', title: 'ID', sort: true, unresize: true }
, { field: 'starttime', title: '开始时间', unresize: true}
, { field: 'addtime', title: '添加时间', unresize: true }
, { field: 'DeScore', title: '得分', unresize: true }
]]
});
});
//*********************************layuitable初始化代码**********************************

</script>

第一个表格完成了 但是可以看到时间格式多了一个很奇怪的T  原因是微软默认json化的datetime格式 所以后台做小小改动就ok

后台代码处理时间格式带有T的问题

IsoDateTimeConverter iso = new IsoDateTimeConverter();
iso.DateTimeFormat = "yyyy-MM-dd HH:mm:ss";
var ajson = JsonConvert.SerializeObject(dt, iso);
JArray jar = JArray.Parse(ajson);

ok  看效果

接下来介绍几个比较常用的table参数。

第一个:toolbar参数 开启表格头部工具栏区域 (绑定列工具条) 官网解释:通常你需要在表格的每一行加上 查看编辑删除 这样类似的操作按钮,而 tool 参数就是为此而生,你因此可以非常便捷地实现各种操作功能。

html代码:

<form id="form1" runat="server">
<div>
<table id="demo" lay-filter="test"></table>
</div>
</form>

<script>
//*********************************layuitable初始化代码**********************************
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#demo'
, height: 500
, url: '/GetDataForLayuiTableLearning.ashx' //数据接口
, page: true //开启分页
, cols: [[ //表头
{ field: 'ID', title: 'ID', sort: true, unresize: true }
, { field: 'starttime', title: '开始时间', unresize: true }
, { field: 'addtime', title: '添加时间', unresize: true }
, { field: 'DeScore', title: '得分', unresize: true }
, { align: 'center',title: '操作', toolbar: '#barDemo' }
]]
});
});
//*********************************layuitable初始化代码**********************************

</script>

<script type="text/html" id="barDemo">
<%-- *********************************工具栏绑定代码**********************************--%>
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
<%-- *********************************工具栏绑定代码**********************************--%>
</script>重点在于首先声明一个列,用来作为工具列的列名: , { align: 'center',title: '操作', toolbar: '#barDemo' }  列名为操作

然后 再script  html代码中 为我们的toobar列给定造型和样式:

<script type="text/html" id="barDemo">
<%-- *********************************工具栏绑定代码**********************************--%>
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
<%-- *********************************工具栏绑定代码**********************************--%>
</script>

效果如下:

接下来我们看看toorbar如何 实现操作的。

直接上代码:

table.on('tool(test)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的DOM对象

if (layEvent === 'detail') { //查看
layer.msg("您点击了查看按钮!",{time: 5000})
} else if (layEvent === 'del') { //删除
layer.confirm('真的删除行么', function (index) {
layer.msg("您选择了删除!",{time: 5000});
});
} else if (layEvent === 'edit') { //编辑
layer.msg("您选择了编辑按钮!",{time: 5000})
}
});

tableon加上工具条  注意  注意  注意 这里table.on('tool(test)'绑定的这个test是指table的lay-filter="test"  然后 你在相应的位置(我弹出消息的位置写上你相应的操作代码就完成了)

接下来看效果

点击查看:

点击编辑:

点击删除:

每一行所有你想获取的数据都可以获得 只要后台返回了 即使你没有在列中显示他 你也可以得到  现在我们去掉得分这一列

点击编辑 依然可以得到积分

假如要对积分进行 区分 比如什么 普通会员 黄金会员 砖石会员 白金会员 等 看操作

代码:

<%-- ********************************列数据显示做显示改变***********************************--%>
<script type="text/html" id="DeScore">
{{# if(d.DeScore < 10){ }}
积分:{{d.DeScore}}-- 普通会员
{{# } else { }}
积分:{{d.DeScore}}--黄金会员
{{# } }}
</script>
<%-- ********************************列数据显示做显示改变***********************************--%>

基本都写完了 其它就是是一个我们对表格的搜索功能了 和表格的重载放一起讲了  这是同一个功能

function searcha() {
var data = {
score: $("#score").val()
}
layui.table.reload("demo", { where: data });
}

表格重载的写法 则例的where是除了limit  和page以为的参数(limit  和page  layui默认会传入 10 和1)

前台:

<div class="layui-form-item">
<label class="layui-form-label">积分</label>
<div class="layui-input-block">
<input type="text" name="title" autocomplete="off" class="layui-input" id="score">
</div>
</div>

可以看到score已经传入后台了 后台sql做相应查询就ok了

layui table表格详解的更多相关文章

  1. HTML 之 Table 表格详解

    HTML 之 Table 表格详解 HTML中的table可以大致分为三个部分: thead ---------表格的页眉 tbody ---------表格的主体 tfoot ---------定义 ...

  2. poi导出word表格详解 超详细了

    转:非常感谢原作者 poi导出word表格详解 2018年07月20日 10:41:33 Z丶royAl 阅读数:36138   一.效果如下 二.js代码 function export_word( ...

  3. html5--1.12表格详解

    html5--1.12表格详解 一.总结 一句话总结: 二.详解 1.表格构成三个基本要素 table:表格的范围,外框:用来定义表格,表格的其他元素包含在table标签里面: tr: 表格的行: t ...

  4. oracle partition table 分区表详解

    Oracle partition table 分区表详解 分区表就是通过使用分区技术,将一张大表,拆分成多个表分区(独立的segment),从而提升数据访问的性能,以及日常的可维护性.分区表中,每个分 ...

  5. Oracle创建表语句(Create table)语法详解及示例

    创建表(Create table)语法详解1. ORACLE常用的字段类型ORACLE常用的字段类型有VARCHAR2 (size) 可变长度的字符串, 必须规定长度CHAR(size) 固定长度的字 ...

  6. Oracle创建表语句(Create table)语法详解及示例、、 C# 调用Oracle 存储过程返回数据集 实例

    Oracle创建表语句(Create table)语法详解及示例 2010-06-28 13:59:13|  分类: Oracle PL/SQL|字号 订阅 创建表(Create table)语法详解 ...

  7. layui table 表格模板按钮实例

    这是个是全部的jsp 页面: <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8& ...

  8. layui table 表格查询无效问题

    [热身话题] 在开发的过程中,大量数据的展示大多采用表格的方式,直观,清晰.在这里,我也使用过一些框架Bootstrap.table ,Dev table ,layui table.本次采用的layu ...

  9. layui table 表格上添加日期控件

    方法一: var tableInit = table.render({ elem: '#tbtxrz' , method: 'post' , data: jsonData , height: &quo ...

随机推荐

  1. JS判断PC操作系统版本

    var version = navigator.userAgent; console.log(version); //"Mozilla/5.0 (Windows NT 10.0; WOW64 ...

  2. S3C6410触摸屏驱动分析

    一. device的注册1.0 两个注册//在smdk6410_machine_init中既注册了touchscreen的私有信息也注册了ts资源 1 在arch/arm/mach-s3c64xx/m ...

  3. AntDesign初体验

    AntDesign初体验 作为一个java开发也需要掌握一定的前端开发技能,毕竟靠人不如靠自己.再者,有时候一些小的改动自己就可以搞定了,就不用低三下四去求别人了: 安装Nodejs $ npm in ...

  4. Python3.7有什么新变化

    https://docs.python.org/zh-cn/3/whatsnew/3.7.html

  5. Elasticsearch 基于external的乐观锁的版本控制

    version_type=external,唯一的区别在于,_version,只有当你提供的version与es中的_version一模一样的时候,才可以进行修改,只要不一样,就报错:当version ...

  6. Jmeter之参数化函数助手__randomstring

    1.Tools->函数助手对话框,选择__Random String,2表示随机生成的字符长度:3表示从哪些字符中随机生成:然后点击生成,得到对应的变量: 5中372表示该函数随机生成的字符串, ...

  7. centos6.8 架设 Telnet 服务

    centos6.8 架设 Telnet 非常简单 百度云下载RPM,然后上传到服务器 链接:https://pan.baidu.com/s/1w91HBf1TOJsZsqBMQnO7tA 提取码:au ...

  8. Helium文档5-WebUI自动化-press模拟键盘按键输入技巧

    前言 press方法是用来模拟键盘按键输入,可以组合使用,来模拟键盘输入,解决一些难定位的元素 入参介绍 以下是press源码中的函数介绍 def press(key):  :入参 :param ke ...

  9. CentOS8 yum安装Mariadb10.4

    CentOS8 yum安装Mariadb10.4 https://downloads.mariadb.org/mariadb/repositories/#distro=CentOS&distr ...

  10. 556. 下一个更大元素 III

    556. 下一个更大元素 III 给定一个32位正整数 n,你需要找到最小的32位整数,其与 n 中存在的位数完全相同,并且其值大于n.如果不存在这样的32位整数,则返回-1. 示例 1: 输入: 1 ...