2018-07-14 layUI 2.x

table模块 - layui.table - 实例

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <form id="form" class="layui-form layui-form-pane">
      <div class="layui-inline">
          <input class="layui-input" name="fuzzy" placeholder="关键字搜索" autocomplete="off">
      </div>
      <button type="button" id="searchkeyword" class="layui-btn" data-type="reloadIccid">搜索></button>
  </form>
  <table class="layui-hide" id="all" lay-filter="demo"></table>
  <script type="text/html" id="barDemo1">
      {{#  if(d.role_id != 3){ }}    <!-- 如果接收的role_id不等于3说明该用户有下级编辑栏显示查看按钮 -->
      <a class="layui-btn layui-btn-primary layui-btn-xs " lay-event="detail">查看下级</a>
      {{#  } else { }}    <!-- 如果接收的role_id等于3说明该用户为普通按钮 显示个假按钮 -->
      <a class="layui-btn layui-btn-xs layui-btn-danger">普通用户</a>
      {{#  } }}
  </script>

  <script>
      $(function(){
          layui.use(['laypage', 'layer', 'table'], function(){
              var laypage = layui.laypage //分页
              ,layer = layui.layer        //弹层
              ,table = layui.table;       //表格
              
              //监听工具条    删，改，查
              table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，demo是table原始容器的属性 lay-filter="对应的值"
                  var data = obj.data //获得当前行数据
                  ,layEvent = obj.event; //获得 lay-event 对应的值
                  if(layEvent === 'detail'){
                      var index = layer.open({                          //此
                          type: 2,                                      //处
                          content: "{:U('User/oneList')}?id=" + data.id,//为
                          area: ['700px', '450px'],                     //全
                          maxmin: true                                  //屏
                      });                                               //弹
                      layer.full(index);                                //出
                      console.log(data);
                  }
              // if(layEvent === 'detail'){ //查看
              //  //do somehing
              // } else if(layEvent === 'del'){ //删除
              //  layer.confirm('真的删除行么', function(index){
              //      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存              //复
              //      layer.close(index);                                          
              //      //向服务端发送删除指令                                         //制
              //  });
              // } else if(layEvent === 'edit'){ //编辑                            //的
              //  //do something
              //                                                                   //官
              //  //同步更新缓存对应的值
              //  obj.update({                                                     //网
              //      username: '123'
              //      ,title: 'xxx'                                                //上
              //  });
              // }                                                                 //的

              });

              //执行一个 全部user table 
              table.render({      // 默认接受的数据格式：{ code: 0, msg: "", count: 1000, data: [] }
                  elem: '#all'
                  ,url: "{:U('User/generalList')}" //数据接口
                  ,method: 'post'
                   //,where: {token: 'sasasas', id: {$id}}
                  ,height: 'auto'
                  ,width: 'auto'
                  ,limit: 10
                  ,page: true
                  ,loding: true
                  ,request: {
                      pageName: 'page'
                  }
                  ,cols: [[  // templet - 自定义列模板
                      {checkbox: true}
                      ,{field: 'id', title: 'id', width: 60, sort: true}
                      ,{field: 'name', title: '用户名', width: 120}
                      ,{fixed: 'right', title: '操作', width: 100, align:'center', toolbar: '#barDemo1',templet: '#barDemo1'}
                  ]]
                  ,done: function(res, curr, count){
                      console.log(res);
                      return false;
                  }
              });

              //搜索加载--数据表格重载           搜索框
              var $ = layui.$, active = {
                  reloadIccid: function () {      //此处的 reloadIccid 命名是和上面的搜索按钮 data-type 的值相同
                      //执行重载
                      table.reload('all', {
                          page: {
                              curr: 1 //重新从第 1 页开始
                          }
                          , where: {
                              fuzzy: $("input[name=fuzzy]").val()
                          }
                      });
                  }
              };
              // 绑定click点击事件          绑定搜索框搜索按钮
              $('#searchkeyword').on('click', function () {
                  var type = $(this).data('type');
                  active[type] ? active[type].call(this) : '';
              });

          });
      });
  </script>
</body>
</html>

最后编辑于：2018.08.08 17:14:15

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,839评论 6赞 482
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,543评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 153,116评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,371评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,384评论 5赞 374
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,111评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,416评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,053评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,558评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,007评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,117评论 1赞 334
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,756评论 4赞 324
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,324评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,315评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,539评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,578评论 2赞 355
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,877评论 2赞 345

2018-07-14 layUI 2.x

table模块 - layui.table - 实例

推荐阅读更多精彩内容