<!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. Excel自动建组

    已用于测试用例自动创建组 使用要求:A列的格式如:X.X.X.X.X11.11.1.11.1.1.11.1.1.1.11.1.1.21.1.21.22 会自动将1.1.1.1.1-1.1.1.1.X组 ...

  2. GNU Wget 1.19.1 static built on mingw32

    http://pan.baidu.com/s/1sluFAVj #wget --version GNU Wget 1.19.1 built on mingw32. -cares +digest -gp ...

  3. 使用AutoFac实现依赖注入

    1.基本使用 1.1新建MVC项目并安装Autofac 注意需要安装AutoFac和AutoFac.mvc5 Install-Package Autofac Install-Package Autof ...

  4. Laravel 5.2--如何让表单提交错误，不清空？

    控制器 public function store(Request $request) { $validator = Validator::make($request->all(), [ 'Su ...

  5. 【原创】运维基础之Docker（6）性能

    The general result is that Docker is nearly identical to Native performance and faster than KVM in e ...

  6. Linux 操作系统死机故障处理方法总结

    通常在出现系统崩溃后,大家会担心再次出现故障,但是发现系统各日志中并没有记录到任何死机前后的信息,无法分析故障原因,认为已经无药可救.但是,实际上,Linux 有多种机制来保证发生系统崩溃后,可以获取 ...

  7. Python-数据类型 主键auto_increment

    MySQL数据操作: DML========================================================在MySQL管理软件中,可以通过SQL语句中的DML语言来实 ...

  8. python基础--管理目录与文件

    1) 文件夹 os.listdir() #显示文件夹下所有文件 os.getcwd() #获取当前工作目录 os.chdir() #切换目录 os.mkdir() #建立目录 os.path.exis ...

  9. python-面向对象之继承

    一.继承介绍 继承是一种新建类的方式,新建的类称之为子类或者派生类,被继承的类称为父类/基类/超类 python中继承的特点: 1.子类可以遗传/重用父类的属性 2.子类可以有多个父类 3.Pytho ...

  10. vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...