layui由职业前端倾情打造,面向所有层次的前后端开发者,零门槛开箱即用的前端UI解决方案,用过的人都说好

废话不多说,先上成果

注意了上图的难点就是需要根据每行的api的数据显示不同的操作,我这是需要判断每行接口的数据里的isUsed是否为ture,如果为true,则需要显示引用中

想了下,实现这个很简单,有如下思路

  1. 使用vuev-for,循环判断渲染Dom,可是我这个项目是个老项目了,为这个在引入,有点冗余问题
  1. 使用原生的js/jq拼接,这个表格已经使用了layui,所以就不考虑这个
  1. 使用java Scala语法(项目的框架是java Scala),但是现在前后端分离,有点不伦不类的
  1. 使用laytpl模板引擎,这个正合我意,基于layui
html:

<table id="apiList" lay-filter="test"></table>
<script type="text/html" id="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>
    {{#  if(d.isUsed){ }}
        <a class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="reference">引用中</a>
    {{#  } }}
</script>
/*
注意:上述的 {{d.isUsed}} 是动态内容,它对应数据接口返回的字段名。
*/
javascript:

layui.use('table', function(){
    var table = layui.table;

    //执行渲染
    table.render({
        elem: '#apiList' //指定原始表格元素选择器(推荐id选择器)
        ,id: 'testReload'
        ,limit: 15
        ,height: 650 //容器高度
        ,method:"post"
        ,url:"/api/actionApi/loadActionApis"
        ,cols: [[
            {field:'name', minWidth: 150,title:'API列表',fixed:'left'},
            {toolbar: '#barDemo',minWidth:200,title:'操作'}]] //设置表头
        ,page: true
        ,loading: true
        ,skin:'row'
        ,even: true
        ,request:{
            pageName: 'page' //页码的参数名称,默认:page
            ,limitName: 'limit' //每页数据量的参数名,默认:limit
        }

    })
})

扫描二维码,在手机上阅读!