您现在的位置是:

tp5 layui 用JS方法渲染表格

发布时间:2020-10-27作者:小灵龙来源:未知点击:95

问题描述:

在tp5框架中使用layui的方法渲染方式制作表格。用JS方法的配置完成渲染。

解决办法:
php:

//表格开始
  if(request()->isPost()){
     $limit=input("?post.limit")?input('post.limit'):20;
     $page=input("?post.page")?input('post.page'):1;         

     $list = OrderModel::table("order")->paginate(['list_rows'=>$limit,'page'=>$page])->toArray();
     foreach ($list['data'] as $key => &$value) {
        $value['username']=getUserName($value['user_']);
     }
     return json(['code'=>0,'msg'=>'','count'=>$list['total'],'data'=>$list['data']]);
   }      
   return $this->fetch('user_rank');
//表格结束
//编辑开始
//整合参数,如果$data出现预定义字符就需要使用htmlspecailchars_decode解码。

            $json_para = (array)json_decode(htmlspecialchars_decode($data), true);
            $para = array();
            for($i=0;$i<count($json_para);$i++) {
                $para[$json_para[$i]['name']] = $json_para[$i]['value'];
            }
            return json(['code'=>1000,'msg'=>'修改成功']);


//编辑结束
html:

   <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="delall" /><i class="layui-icon">&#xe640;</i> 批量删除</button>
   
   <div class="fr">
     <div class="fl ss_ctr">
       <div class="layui-input-inline" >
           <input type="text" id="keys" class="layui-input" placeholder="用户名/手机号/昵称" >
        </div>               
        <button class="layui-btn layui-btn-sm" id="search" />查询</button>
     </div>
    </div>
    <div class="layui-ctt">
        <table class="layui-table" id="demo"></table>
    </div> 
       <script type="text/html" id="add_date">
        {{#  if(d.add_date !=''){ }}
          {{layui.util.toDateString(d.add_date*1000, 'yyyy-MM-dd HH:mm:ss')}}
        {{#  } }}
    </script>
        <script type="text/html" id="action">
       <a  class="layui-btn layui-btn-sm layui-btn-success" lay-event='handle'>处理</a>       
    </script>
    <script>

        layui.use(['table'], function(){
            var table = layui.table;
            var tableIn = null;
            tableIn=table.render({
                elem: '#demo'
                ,url:"/admin/cnt/urank"
                ,method:"post"
                ,page:{
                    limit:20
                    ,limits:[20,30,50,100]
                    ,layout:['count','prev','page','next','refresh']
                    ,groups:10
                }
                ,cols:[[
                    {field:'oid',title:'订单编号',sort:true,fixed:'left'}
                    ,{field:'username',title:'会员昵称'}
                      ,{field:'add_date',title:'添加时间',templet:'#add_date'}
                       ,templet: function (d) {
                        return '<div ><img src="'+d.picpath+'" alt="" width="50px" height="50px" onclick="showBigImage(this)"></a></div>';
                    }}
                     {title:'操作',templet:'#action',width:100}


                ]]
            });
           //批量删除
         $(document).on('click','#delall',function(){
              var checkStatus = table.checkStatus('demo'); 
         
              rows=checkStatus.data.length;
              if(rows==0){
                layer.msg('请先选择要删除的数据行!', {icon: 2});
                return ;
              }
              //通过循环获取要删除的所有ID集合
              var ids='';
              for(var i=0;i<rows;i++){
                ids += checkStatus.data[i].id+",";
              }
              currs=$(".layui-laypage-em").next().html();//当前页码
              layer.confirm('确定要删除这些数据吗?',function(index){
                loading=layer.load(1,{shade:[0.2,'#ffe']});//加载层
                $.post('/admin/admin/deleteall',
                  {'ids':ids},
                  function(res){
                    console.log(res);
                    if(res.code==1000){
                      layer.msg(res.msg, {icon: 1});
                     
                      tableIn.reload({
                        page:{curr:currs}
                        ,where:{}
                      })
                    }
                    layer.close(loading);
                    layer.close(index);

                  }
                );
              })
            })
                        //搜索
            $("#search").click(function(){
                keys=$("#keys").val();
                tableIn.reload({
                    page:{  curr:1 },
                    where:{ keys:keys }
                });
            }); 
             table.on('tool(test)',function(obj){
                faultinfo=$("#faultinfo").val();
                carname=$("#carname").val();
                stime=$("#stime").val();
                etime=$("#etime").val();
                faultlevel=$("#faultlevel option:selected").val();
                data=obj.data;
                layevent=obj.event;
                currs=$(".layui-laypage-em").next().html(); //当前页码值
                if(layevent=='handle'){
                    $.ajax({
                        type:"post",
                        url:'/admin/cash/faultHandle',
                        data:{id:data.id},
                        cache: false,
                        dataType:"json",
                        beforeSend:function(){
                            layer.load();
                        },
                        error: function() {
                            layer.closeAll();
                            layer.msg("连接失败,请重试!",{icon: 5});
                        },
                        success:function(data){

                            layer.closeAll();
                            if(data.code=='1000') {
                                layer.msg(data.msg,{icon: 6});
                                tableIn.reload({
                                    page:{curr:currs},//查询后点击编辑或者其他行工具跳转到原查询条件
                                    where:{
                                        faultinfo:faultinfo,
                                        faultlevel:faultlevel,
                                        stime:stime,
                                        etime:etime,
                                        carname:carname
                                    }
                                })                     
                            } else {
                                layer.msg(data.msg,{icon: 5});
                            }
                        }
                    });
                }
                             if(layevent=='edit'){
                                 title: false,
                  shadeClose: true,
                  shade: 0.8,
                  area: ['60%', '90%']
                  ,btn: ['确定']
                  ,content: '/admin/admin/edit?id='+data.id //iframe的url
                  
                  ,yes: function(index, layero){
                  //do something确定按钮回调方法
                   
                    //当点击‘确定’按钮的时候,获取弹出层返回的值。callbackdata是iframe页面中js自定义的函数
                        var res = window["layui-layer-iframe" + index].callbackdata();
                        //打印返回的值,看是否有我们想返回的值。
                        // console.log(JSON.stringify(res)); //转为 JSON 格式
                        
                      $.post('/admin/admin/save_edit',{data:JSON.stringify(res)},function(res){
                        console.log(res);
                        if(res.code==1000){
                          layer.close(index); //如果设定了yes回调,需进行手工关闭,页面层就关闭了
                           tableIn.reload({
                            page:{curr:currs}
                            ,where:{}
                          })
                        }
                      })
                  }
                });

                             }
                
            });
        });
    function showBigImage(e) {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true, //点击阴影关闭
                area: [ 'auto'], //宽高
                content: "<img src=" + $(e).attr('src') + " height='500' width='500'/>"
            });
        }
        </script>
//layevent==edit专用开始
//iframe,新建文件,里面是要编辑的内容表单及callbackdata自定义函数。
 <div class="layui-form-item">
    <label class="layui-form-label">用户姓名:</label>
      <div class="layui-input-inline">
         <input type="text" name="m_u_name" placeholder="请输入用户姓名" value="{$data.u_name}"  class="layui-input">
      </div>
 </div>
<div class="layui-form-item">
    <label class="layui-form-label">是否激活:</label>
   <div class="layui-input-block">
  
     <input type="checkbox" name="m_work" value="1" {eq name="$data.is_work" value="1"}checked{/eq} lay-skin="switch">
   </div>
</div>
<script>            
   var callbackdata = function () {

    var data = $('form').serializeArray()
    return data;
                  
  }
</script>
//layevent==edit专用结束

如果帮到了您,请打赏一二!

标签: