<!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. 移植busybox构建最小根文件系统

    Busybox:瑞士军刀,里面装有很多小命令. STEP 1:构建目录结构  创建根文件系统目录,主要包括以下目录/dev  /etc /lib  /usr  /var /proc /tmp /hom ...

  2. node学习第一天：nvm使用

    nvm是什么? 学习node,首先要安装node的环境,nvm是一款工具,使用这款工具可以很方便的下载所需版本的node文件以及npm,十分的方便. nvm下载: nvm下载链接 注:下载文件名为 n ...

  3. linux显示完整目录

    vim ~/.bashrc ##添加以下信息 export PS1='[\u@\h `pwd`]$ ' 然后保存退出 source  ~/.bashrc 或者关机重新启动即可

  4. 转：如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  5. Ajax中onreadystatechange函数不执行，是因为放在open()后

    今天动手写Ajax时遇到的问题:按照下面的顺序来写Ajax,功能是alert出txt文档的内容,在Chrome下可以执行onreadystatechange中的事件,在IE11及以下.FF就不能执行o ...

  6. Confluence 6 开始使用

    欢迎来到 Confluence 的开始使用指南文档.在这个稳定中,你将会找到有关对 Confluence 进行评估的指南和其他的一些有用的内容.当你开始使用 Confluence 的时候,这些信息能够 ...

  7. Confluence 6 安装 SQL Server

    如果你还没有在安装可以连接的 Microsoft SQL Server 数据库,请先下载后进行安装.请参考 MSDN 上 Installation for SQL Server 的指南.  有关授权模 ...

  8. 新版Go2Shell 安装详解

    Go2Shell 下载地址 https://zipzapmac.com/Go2Shell 安装说明 1,首先下载好程序,然后运行到下面界面 2 然后将程序拖到下面位置 3,然后执行install Go ...

  9. bs4

  10. ionic3 打包Xcode 9 Swift Language Version (SWIFT_VERSION) Ask 报错

    解决方案 选择4.0 然后报错17个,类似以下这样的错误 'AVMediaTypeVideo' has been renamed to 'AVMediaType.video' 根据提示更改 AVMed ...