site/application/admin/view/article/lst.html

<!--加载公共头部文件-->
    {include file='Base/top'}
<!--加载公共左侧文件-->
    {include file='Base/left'}
<!--加载公共底部文件-->
    {include file='Base/fotter'}


<!-- 内容显示部分 -->
<div class="layui-body">
    <!--面包屑导航-->
        <blockquote class="layui-elem-quote">
            <span class="layui-breadcrumb" style="visibility: visible;">
                <a >文章管理</a>
                <span lay-separator="">/</span>
                <a href="{:url('Article/lst')}">
                  <cite>文章列表</cite>
                </a>
              </span>
        </blockquote>
        <!--面包屑导航 结束-->

	<div class="layui-row  layui-col-space10" style="margin:0 10px;">
             <div class="search" style="margin:10px 0px 5px -5px;"><!-- 搜索 -->
                <div class="layui-inline">
                    <input  type="text" class="layui-input" name="title" id="refund"  autocomplete="off" placeholder="请输入文章标题">
                </div>
                <button class="layui-btn layui-btn-primary" data-type="reload">
                    <i class="layui-icon"></i>搜索
                </button>
            </div>
        <table class="layui-hide"  id="list" lay-filter="list"></table><!-- 表格数据 -->

    </div>
</div>

<script type="text/html" id="state">
    {{#  if(d.state == 0){ }}
    <div class="layui-badge layui-bg-green">推荐</div>
    {{#  } else if(d.state == 1){ }}
    <div class="layui-badge layui-bg-read">不推荐</div>
    {{#  } }}
</script>




 
<!-- 表格操作栏模块 -->
<script type="text/html" id="barDemo"><!-- 表格自定义操作按钮 -->

  	<a class="layui-btn layui-btn-xs" lay-event="edit">
        <i class="layui-icon">&#xe642;</i>编辑
    </a>
  	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe640;</i>删除
    </a>

</script>
 


<!-- 头部工具栏模块 -->
<script type="text/html" id="toolbarDemo"><!-- 表格自定义操作按钮 -->
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">
        <i class="layui-icon">&#xe654;</i>添加
    </a>

    <div class="layui-btn-group demoTable">
         <button class="layui-btn layui-btn-danger layui-btn-xs" data-type="pdel">
             <i class="layui-icon">&#xe640;</i>批量删除
         </button>
    </div>

</script>

<!-- 图片显示 -->
<script type="text/html" id="pics">
    {{#  if(d.pic == null){ }}
        暂无图片~~~
    {{# }else{ }}
        <img src="__UPLOAD__/{{d.pic}}" width="50" height="100%">
    
    {{#  } }}
</script>



<script>
layui.use(['table','layer','laypage','jquery'], function(){
        var table = layui.table,
            layer = layui.layer,
            laypage = layui.laypage,
            $ = layui.jquery;


        //数据表格
        table.render({
            elem: '#list'
            ,id:'idSystem'
            ,url:'{:url("lst_data")}'//数据接口(专门处理数据)
            ,height:'full'
            // ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
             ,toolbar: '#toolbarDemo'

             //分页
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                ,curr: 1 //设定初始在第 5 页
                ,limit:10 //一页显示多少条
                ,limits:[10,15,25]//每页条数的选择项
                ,groups: 3 //只显示 2 个连续页码
                ,first: "首页" //不显示首页
                ,last: "尾页" //不显示尾页

            }

            ,cols: [[
             	 {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: '文章ID',sort:true, align:'center',width: 100}
                ,{field: 'title', title: '文章标题',align:'left', width: 400}
                ,{field: 'author', title: '文章作者',align:'center', width: 140}
                ,{field: 'catename', title: '所属栏目',align:'center', width: 140 }
                ,{field: 'state', title: '是否推荐',align:'center', width: 90,templet: '#state'}
                ,{field: 'pic', title: '文章图片',align:'center', width: 200,templet: '#pics'}
                ,{field: 'time', title: '发布时间',align:'center', width: 180}
                ,{field:'actions',title: '操作',toolbar: '#barDemo',align:'left',width:300 ,fixed:'right'}

            ]]
        });


         // 执行搜索，表格重载
        $('.search .layui-btn-primary').on('click',function () {
            // 搜索条件
                var title = $('#refund').val();
                if(title==''){
                    layer.msg('搜索条件不能为空');
                    return false;
                }
                table.reload('idSystem', {
                    page: {
                        curr: 1
                    }
                    ,where: {
                        title: title
                    }
                    
                });
        });





        //监听头工具栏事件
        table.on('toolbar(list)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
            ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
              case 'add'://添加
                var index =  layer.open({
                    type:2,
                    title:"添加文章列表",
                    maxmin:true,
                    width:'auto',
                    offset : '100px',
                    area :['1300px','700px'],
                    content:"{:url('Article/add')}"
                });
              

              break;

              
            }; 


        });

        
          
          
        //监听行工具事件
        table.on('tool(list)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            switch(layEvent){
		      case 'edit'://编辑
		        var index =  layer.open({
                    type:2,
                    title:"编辑信息",
                    maxmin:true,
                    width:'auto',
                    offset : '100px',
                    area :['1300px','700px'],
                    content:"{:url('Article/edit')}?id="+data.id
                });
		      break;

              case 'del'://删除
                 layer.confirm('确定要删除吗？',{icon: 5},function(index){
                    $.post("{:url('Article/del')}?id="+data.id,function(res){
                        if(res == 1){        
                            obj.del();
                            layer.msg('删除成功!');
                        }else{
                            layer.msg('删除失败!');
                        }
                       
                    })
                });
              break;


		    };

            

        });



        //批量删除————————————————————————————————————————
        var $ = layui.$, active = {
            pdel: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idSystem')
                ,data = checkStatus.data;
                if(data==""){
                    layer.msg('请选择需要删除的数据',{icon:2});
                    return;
                }
                var ids = [];
                if(data.length>0){
                    for(var i=0;i<data.length;i++){
                        ids+=data[i].id+",";
                    }
                }
                layer.confirm('确定要删除id为'+ids+'的用户信息吗？',function(index){
                    $.ajax({
                        type:'POST',
                        url:'{:url("Article/pdel")}',
                        data:{"ids":ids},
                        success:function(data){
                            if(data==1){
                                // layer.msg('删除成功',{icon:1});
                                layer.msg('批量删除成功',{icon:1},function () {
                                    var index = parent.layer.getFrameIndex(window.name);// 获得frame索引
                                    parent.layer.close(index);//关闭当前frame
                                    parent.layui.table.reload('idSystem');//成功刷新父窗口的 table
                                });    
                            }else{
                                layer.msg('批量删除失败!',{icon:2});
                            }
                        }
                    })
                })
            }
        }
         $('.demoTable .layui-btn-xs').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //批量删除结束————————————————————————————————————————————————————
             


       


});



</script>