baodinzhihui/view/manager/slide/index.html

{layout name="manager/layout" /}
<div class="layui-card layui-col-md12">
    <div class="layui-card-body">
        <div class=" top-operate">
            <a class="layui-btn layui-btn-normal" data-href="{:url('manager.slide/add')}" title="新增轮播图"><i class="layui-icon layui-icon-add-1"></i>新增轮播图</a>
            <button class="layui-btn layui-btn-danger delAll" data-url="{:url('manager.slide/batchDel')}"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
        </div>
        <table class="layui-table layui-form">
            <colgroup>
                <col width="15px" >
                <col width="75px">
                <col >
                <col >
                <col width="60px">
                <col width="290px">
            </colgroup>
            <thead>
                <td><input type="checkbox" lay-skin="primary" lay-filter="parents-table" title=""/></td>
                <td>封面图</td>
                <td>标题</td>
                <td>链接地址</td>
                <td>排序</td>
                <td>操作</td>
            </thead>
            {foreach name="items" item="item"} 
            <tr class="table-lv1" data-id="{$item.id}" data-url="{:url('manager.slide/sort')}">
                <td><input type="checkbox" name="checkbox" value="{$item.id}" lay-skin="primary" lay-filter="childrens-table"/></td>
                <td class="layer-photos">
                    {if !empty($item['src']) && file_exists('.' . $item['src'])}
                    <div class="layer-photos">
                        <img src="{$item['src']}" width="100" />
                    </div>
                    {/if}
                </td>
                <td><a class="layui-btn layui-btn-title" data-href="{:url('manager.slide/edit',['id' => $item['id']])}" title="编辑">{$item.title}</a></td>
                <td>{$item.url}</td>
                <td>{$item.sort}</td>
                <td>
                    <div style="width: 265px;">
                        <a class="sort layui-btn layui-btn-primary layui-btn-xs" data-url="{:url('manager.slide/sort')}" data-id="{$item.id}" data-sort="up" href="javascript:void(0)">
                            <i class=""></i>向上
                        </a>
                        <a class="sort layui-btn layui-btn-primary layui-btn-xs" data-url="{:url('manager.slide/sort')}" data-id="{$item.id}" data-sort="down" href="javascript:void(0)">
                            <i class=""></i>向下
                        </a>
                        <a class="layui-btn layui-btn-warm layui-btn-xs" data-href="{:url('manager.slide/edit',['id'=>$item['id']])}" title="编辑">
                            <i class=""></i>编辑
                        </a>
                        <a class="del layui-btn layui-btn-danger layui-btn-xs" data-url="{:url('manager.slide/del')}" data-id="{$item.id}" href="javascript:void(0);">
                            <i class=""></i>删除
                        </a>
                    </div>
                </td>
            </tr>
            {/foreach}
        </table>
        
        <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>
                    
        <script type="text/html" id="test-table-toolbar-toolbarDemo">
          <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
          </div>
        </script>
         
        <script type="text/html" id="test-table-toolbar-barDemo">
          <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 type="text/javascript">
            layui.use('table', function(){
                var table = layui.table;
                table.render({
                elem: '#test-table-toolbar'
                ,url: '/api/'
                ,where: {
                    _token:'123'
                }
                ,request: {
                    limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                ,toolbar: '#test-table-toolbar-toolbarDemo'
                ,title: '用户数据表'
                ,cols: [[
                  {type: 'checkbox', fixed: 'left'}
                  ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
                  ,{field:'username', title:'用户名', width:120, edit: 'text'}
                  ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
                    return '<em>'+ res.email +'</em>'
                  }}
                  ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
                  ,{field:'city', title:'城市', width:100}
                  ,{field:'sign', title:'签名'}
                  ,{field:'experience', title:'积分', width:80, sort: true}
                  ,{field:'ip', title:'IP', width:120}
                  ,{field:'logins', title:'登入次数', width:100, sort: true}
                  ,{field:'joinTime', title:'加入时间', width:120}
                  ,{fixed: 'right', title:'操作', toolbar: '#test-table-toolbar-barDemo', width:150}
                ]]
                ,page: true
                });
                  
                //头工具栏事件
                table.on('toolbar(test-table-toolbar)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                  case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                  break;
                  case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                  break;
                  case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                  break;
                };
                });

                //监听行工具事件
                table.on('tool(test-table-toolbar)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                  layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                  });
                } else if(obj.event === 'edit'){
                  layer.prompt({
                    formType: 2
                    ,value: data.email
                  }, function(value, index){
                    obj.update({
                      email: value
                    });
                    layer.close(index);
                  });
                }
                });
                
            });
        </script>
        
    </div>
</div>