<!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. Memcached技术

    Memcached技术 介绍: memcached是一种缓存技术, 他可以把你的数据放入内存,从而通过内存访问提速,因为内存最快的, memcached技术的主要目的提速, 在memachec 中维护 ...

  2. 设计模式C++学习笔记之十六（Observer观察者模式）

      16.1.解释 概念:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. main(), IObservable,被观察者接口 CHanFei ...

  3. InstallShield 静默安装

    可能先需要获取安装包参数,安装包参数获取/?或是/HELP InstallScrip工程 1. 在命令行窗口中使用 -R 参数(即record) 运行安装程序. 例如: Setup.exe -R or ...

  4. 51Nod--1384全排列

    1384 全排列 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 给出一个字符串S(可能又重复的字符),按照字典序从小到大,输出S包括的字符组成的所有排列.例 ...

  5. Elasticsearch入门，这一篇就够了

    实时搜索引擎Elasticsearch Elasticsearch(简称ES)是一个基于Apache Lucene(TM)的开源搜索引擎,无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进 ...

  6. Android广播机制

    原文出处: Android总结篇系列:Android广播机制 1.Android广播机制概述 Android广播分为两个方面:广播发送者和广播接收者,通常情况下,BroadcastReceiver指的 ...

  7. liunx 利用nginx 实现负载均衡

    一般采用软件实现负载均衡的有Nginx.apache.nginx 近年来使用频繁,其官网上面显示可以承载5万并发访问量,太牛了. nginx 相比 apache优势明显:Nginx 服务程序比较稳定, ...

  8. CSS margin属性取值

    margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-t ...

  9. 不能够连接到主机（名称为localhost）上的MySQL服务”

    不能够连接到主机(名称为localhost)上的MySQL服务” -如果是服务未启动.那么就右键‘计算机’---->管理--->服务和应用程序---->服务,在右侧的栏目中找到名称为 ...

  10. 整理oracle 树形查询

    注:本文参考了<整理oracle 树形查询> sql树形递归查询是数据库查询的一种特殊情形,也是组织结构.行政区划查询的一种最常用的的情形之一.下面对该种查询进行一些总结: create ...