layui中table根据数据不同渲染不同toolbar

这是按钮模板代码,根据status不同渲染不同工具栏

    <script type="text/html" id="btnBar">
      {{# if(d.status === 'active') { }}
      <a class="layui-btn layui-btn-xs" lay-event="wuZiKu-ready">准备完毕</a>
      {{# } else if(d.status === 'inactive') { }}
      <a class="layui-btn layui-btn-xs layui-btn-disabled" lay-event="wuZiKu-ready">准备完        
      </a>
      {{# } }}
    </script>

这是表格代码

    let wuZiKuData = [
        {
          id: 1,
          sign: '1',
          name: '物资库1',
          status: 'active'
        },
        {
          id: 2,
          sign: '2',
          name: '物资库2',
          status: 'inactive'
        },
        {
          id: 3,
          sign: '3',
          name: '物资库3',
          status: 'active'
        }
      ]

     table.render({
        elem: '#wuZiKu-table',
        css: [
          '.layui-table-page{text-align: center;}' // 让分页栏居中
        ].join(''),
        cols: [
          [
            //标题栏
            { field: 'id', hide: true },
            { field: 'sign', title: '编号' },
            { field: 'name', title: '名称' },
            { title: '操作', toolbar: '#btnBar' }
          ]
        ],
        data: wuZiKuData,
        page: true,
        limits: [2],
        limit: 2
      })

就这样啦

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
layui table ,需要使用接口返回的数据进行渲染表格。具体步骤如下: 1. 定义表格的列属性,包括标题、字段名、宽度等信息。 2. 使用 layuitable 模块初始化表格,并将列属性传递给它。 ```javascript layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', url: '/api/table', cols: [[ //表头 {field: 'id', title: 'ID', width:80}, {field: 'username', title: '用户名', width:120}, {field: 'email', title: '邮箱', width:150}, {field: 'sex', title: '性别', width:80}, {field: 'city', title: '城市'}, {field: 'sign', title: '签名'}, {field: 'experience', title: '积分', sort: true}, {field: 'score', title: '评分', sort: true}, {field: 'classify', title: '职业'}, {field: 'wealth', title: '财富', sort: true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]] }); }); ``` 3. 在接口请求成功后,将返回的数据传递给表格进行渲染。 ```javascript layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', url: '/api/table', cols: [[ //表头 {field: 'id', title: 'ID', width:80}, {field: 'username', title: '用户名', width:120}, {field: 'email', title: '邮箱', width:150}, {field: 'sex', title: '性别', width:80}, {field: 'city', title: '城市'}, {field: 'sign', title: '签名'}, {field: 'experience', title: '积分', sort: true}, {field: 'score', title: '评分', sort: true}, {field: 'classify', title: '职业'}, {field: 'wealth', title: '财富', sort: true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]], done: function(res, curr, count){ // 成功请求后的回调函数 // res 是接口返回的数据 // curr 是当前页码 // count 是数据总数 // 通过 res.data 获取表格数据 // 通过 res.code 判断请求状态,一般情况下 0 表示成功 } }); }); ``` 4. 在接口请求失败时,可以使用 `table.reload()` 方法重新加载表格。 ```javascript layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', url: '/api/table', cols: [[ //表头 {field: 'id', title: 'ID', width:80}, {field: 'username', title: '用户名', width:120}, {field: 'email', title: '邮箱', width:150}, {field: 'sex', title: '性别', width:80}, {field: 'city', title: '城市'}, {field: 'sign', title: '签名'}, {field: 'experience', title: '积分', sort: true}, {field: 'score', title: '评分', sort: true}, {field: 'classify', title: '职业'}, {field: 'wealth', title: '财富', sort: true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]], done: function(res, curr, count){ if (res.code !== 0) { // 请求失败,重新加载表格 table.reload('demo'); } } }); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值