layui简单例子

<!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简单例子的更多相关文章

Hibernate4.2.4入门(一)——环境搭建和简单例子
一.前言发下牢骚,这段时间要做项目,又要学框架,搞得都没时间写笔记,但是觉得这知识学过还是要记录下.进入主题了 1.1.Hibernate简介什么是Hibernate?Hibernate有什么用? ...
AgileEAS.NET SOA 中间件平台.Net Socket通信框架-简单例子-实现简单的服务端客户端消息应答
一.AgileEAS.NET SOA中间件Socket/Tcp框架介绍在文章AgileEAS.NET SOA 中间件平台Socket/Tcp通信框架介绍一文之中我们对AgileEAS.NET SOA ...
spring mvc(注解)上传文件的简单例子
spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...
ko 简单例子
Knockout是在下面三个核心功能是建立起来的: 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Declarative bindings) 模板 ...
mysql定时任务简单例子
mysql定时任务简单例子 ? 1 2 3 4 5 6 7 8 9 如果要每30秒执行以下语句: [sql] update userinfo set endtime = now() WHE ...
java socket编程开发简单例子与 nio非阻塞通道
基本socket编程 1.以下只是简单例子,没有用多线程处理,只能一发一收(由于scan.nextLine()线程会进入等待状态),使用时可以根据具体项目功能进行优化处理 2.以下代码使用了1.8新特 ...
一个简单例子：贫血模型or领域模型
转:一个简单例子:贫血模型or领域模型贫血模型我们首先用贫血模型来实现.所谓贫血模型就是模型对象之间存在完整的关联(可能存在多余的关联),但是对象除了get和set方外外几乎就没有其它的方法,整个 ...
[转] 3个学习Socket编程的简单例子：TCP Server/Client, Select
以前都是采用ACE的编写网络应用,最近由于工作需要,需要直接只用socket接口编写CS的代码,重新学习这方面的知识,给出自己所用到的3个简单例子,都是拷贝别人的程序.如果你能完全理解这3个例子,估计 ...
jsonp的简单例子
jsonp的简单例子 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

随机推荐

TextArea 保存时换行符处理
后台数据保存时就要处理“\r\n",替换成”<br />",前台(html)页面显示时再做下处理. 自己是mvc页面,用到了两个方法:Html.Raw(),以及Http ...
Linux目录结构以及文件操作
Linux目录结构 UNIX 是以目录为主的,Linux 也继承了这一优良特性. Linux 是以树形目录结构的形式来构建整个系统的,可以理解为树形目录是一个用户可操作系统的骨架.虽然本质上无论是目录 ...
我理解的vue生命周期
说些题外话,引出vue的生命周期. 比如人出生到寿终正寝,这是人的一个生命周期.他会经历出生,婴儿时期,童年时期,少年时期,青年,中年,老年,到 end.然后,每个时期都会有一定的历史任务在等着去完成 ...
利用表格分页显示数据的js组件datatable的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
C++ sizeof()练习
class A { int a; short b; int c; char d; }; class B { double a; short b; int c; char d; }; 在32位机器上用g ...
Linux i2c 读写程序
/* This software uses a BSD license. Copyright (c) 2010, Sean Cross / chumby industriesAll rights re ...
SQL Server循环
1.普通循环 DECLARE @i int BEGIN WHERE Uid=@i --PRINT @i END 2.游标循环(没有事务) ---游标循环(没有事务) BEGIN DECLARE @a ...
Python-Pool类
目录: multiprocessing模块 Pool类 apply apply_async map close terminate join 进程实例 multiprocessing模块如果你打算编 ...
HTML_1
HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言,而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来 ...
FormData中delete方法在ios不兼容
1.移动端直接用的input的file上传图片(name=“file”必填) <input type="file" id="exampleInputFile1&qu ...

layui简单例子

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

随机推荐

热门专题