<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>简单例子</title>

  <link rel="stylesheet" href="css/layui.css">

  <style>

    body{margin: 10px;}

    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}

  </style>

</head>

<body>

 <script type="text/html" id="switchTpl">

  <!-- 这里的 checked 的状态只是演示 -->

  <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" />

</script>

<script type="text/html" id="checkboxTpl">

  <!-- 这里的 checked 的状态只是演示 -->

  <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" />

</script>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">

  <a class="layui-btn layui-btn-primary 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>

<script src="layui.js"></script>

<script>

layui.use('table', function(){

  var $ = layui.jquery, table = layui.table, form = layui.form;   

  //执行一个 table 实例

  table.render({

    elem: '#demo'

    ,height: 420

    ,url: '/demo/table/user' //数据接口

    ,title: '用户表'

    ,page: true //开启分页

    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档

    ,totalRow: true //开启合计行

    ,cols: [[ //表头

      {type: 'checkbox', fixed: 'left'}

      ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}

      ,{field: 'username', title: '用户名', width:80}

      ,{field: 'experience', title: '积分', width: 80, sort: true, totalRow: true}

      ,{field: 'sex', title: '性别', width:80, sort: true}

      ,{field: 'score', title: '评分', width: 80,event: 'setSign', sort: true, totalRow: true}

      ,{field: 'city', title: '城市', width:150}

      ,{field: 'sign', title: '签名', width: 200}

      ,{field:'sex', title:'性别', width:85, templet: '#switchTpl', unresize: true}

      ,{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}

      ,{field: 'classify', title: '职业', width: 100}

      ,{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}

      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}

    ]]

  }); 

  //监听头工具栏事件

  table.on('toolbar(test)', function(obj){

    var checkStatus = table.checkStatus(obj.config.id)

    ,data = checkStatus.data; //获取选中的数据

    switch(obj.event){

      case 'add':

        layer.msg('添加');

      break;

      case 'update':

        if(data.length === 0){

          layer.msg('请选择一行');

        } else if(data.length > 1){

          layer.msg('只能同时编辑一个');

        } else {

          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);

        }

      break;

      case 'delete':

        if(data.length === 0){

          layer.msg('请选择一行');

        } else {

          layer.msg('删除');

        }

      break;

    };

  });

  //监听行工具事件

  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"

    var data = obj.data //获得当前行数据

    ,layEvent = obj.event; //获得 lay-event 对应的值

    if(layEvent == 'detail'){

      layer.alert(JSON.stringify(data), {

      title: '当前行数据：'

    });

    } else if(layEvent === 'del'){

      layer.confirm('真的删除行么', function(index){

        obj.del(); //删除对应行（tr）的DOM结构

        layer.close(index);

        //向服务端发送删除指令

      });

    }

  });  

   //监听性别操作

  form.on('switch(sexDemo)', function(obj){

    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);

  });

  //监听锁定操作

  form.on('checkbox(lockDemo)', function(obj){

    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);

  });

});

</script>

</body>

</html>

layui简单例子的更多相关文章

  1. Hibernate4.2.4入门(一)——环境搭建和简单例子

    一.前言 发下牢骚,这段时间要做项目,又要学框架,搞得都没时间写笔记,但是觉得这知识学过还是要记录下.进入主题了 1.1.Hibernate简介 什么是Hibernate?Hibernate有什么用? ...

  2. AgileEAS.NET SOA 中间件平台.Net Socket通信框架-简单例子-实现简单的服务端客户端消息应答

    一.AgileEAS.NET SOA中间件Socket/Tcp框架介绍 在文章AgileEAS.NET SOA 中间件平台Socket/Tcp通信框架介绍一文之中我们对AgileEAS.NET SOA ...

  3. spring mvc(注解)上传文件的简单例子

    spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...

  4. ko 简单例子

    Knockout是在下面三个核心功能是建立起来的: 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Declarative bindings) 模板 ...

  5. mysql定时任务简单例子

    mysql定时任务简单例子 ? 1 2 3 4 5 6 7 8 9     如果要每30秒执行以下语句:   [sql] update userinfo set endtime = now() WHE ...

  6. java socket编程开发简单例子 与 nio非阻塞通道

    基本socket编程 1.以下只是简单例子,没有用多线程处理,只能一发一收(由于scan.nextLine()线程会进入等待状态),使用时可以根据具体项目功能进行优化处理 2.以下代码使用了1.8新特 ...

  7. 一个简单例子：贫血模型or领域模型

    转:一个简单例子:贫血模型or领域模型 贫血模型 我们首先用贫血模型来实现.所谓贫血模型就是模型对象之间存在完整的关联(可能存在多余的关联),但是对象除了get和set方外外几乎就没有其它的方法,整个 ...

  8. [转] 3个学习Socket编程的简单例子：TCP Server/Client, Select

    以前都是采用ACE的编写网络应用,最近由于工作需要,需要直接只用socket接口编写CS的代码,重新学习这方面的知识,给出自己所用到的3个简单例子,都是拷贝别人的程序.如果你能完全理解这3个例子,估计 ...

  9. jsonp的简单例子

    jsonp的简单例子 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

随机推荐

  1. 什么是 java.awt.headless

    以下是网上的说法,我觉得简单地说就是有些功能需要硬件设备协助,比如显卡,但如果是服务器可能都没装显卡,这时就需要JDK调用自身的库文件去摸拟显卡的功能. 什么是 java.awt.headless? ...

  2. 【转】C++ 11 并发指南一（C++ 11 多线程初探）

    引言 C++ 11自2011年发布以来已经快两年了,之前一直没怎么关注,直到最近几个月才看了一些C++ 11的新特性,算是记录一下自己学到的东西吧,和大家共勉. 相信Linux程序员都用过Pthrea ...

  3. Lyk Love painting/convex hull/mumsic

    这场比赛真的是...打的好颓废啊... 所有题面的传送门 T1 分析: 我们发现 二分答案 + \(n^3\) \(dp\) 判断可行性 可以拿 60 分(于是就写好了啊!) 然后我们发现上面的 \( ...

  4. 关于hostapd的调试

    对于hostapd和wpa_supplicant 的调试时,希望显示更多的调试信息. 未改动代码时,可以将hostapd 进程拉起时所跟的参数加上"-dd". 即使这样,也不能满足 ...

  5. 缓存系列之三：redis安装及基本数据类型命令使用

    一:Redis是一个开源的key-value存储系统.与Memcached类似,Redis将大部分数据存储在内存中,支持的数据类型包括:字符串.哈希表.链表.集合.有序集合以及基于这些数据类型的相关操 ...

  6. pycharm 中自动补全代码提示前符号 p，m ，c，v, f 是什么意思

    是自动补全的变量的类别p:parameter 参数m:method 方法c:class 类 v:variable 变量f:function 函数

  7. ios NSTimer的强引用问题

    在一个controller中,使用 NSURLSessionDataTask *dataTask = [[NSURLSession sharedSession] dataTaskWithRequest ...

  8. Jquyer table 中的数据分页

    直接上代码,复制出来就可以使用 <!DOCTYPE html> <html> <head lang="en"> <meta charset ...

  9. 17)django-模板的继承与导入

    情况1:通常写页面都有个模板用来框定头部LOGO页面,左侧导航菜单,只有右部的内容不同.如果不使用模板就大量重复工作. 特别如果头部或者左侧导航需要修改或者添加,所有页面都需要修改.django 通过 ...

  10. 洛谷P3345 [ZJOI2015]幻想乡战略游戏 [动态点分治]

    传送门 调了两个小时,终于过了-- 凭啥人家代码80行我180行啊!!! 谁叫你大括号换行 谁叫你写缺省源 思路 显然,补给点所在的位置就是这棵树的带权重心. 考虑size已知时如何找重心:一开始设答 ...