JSFiddle - React, Tailwind, and code Playground

by yelog yelog

HTML

<link href='//www.layuicdn.com/layui/css/layui.css'/>
<script src="//www.layuicdn.com/layui/layui.js"></script>
  
<table id="myTable" ></table>

JavaScript

layui.config({
  base: 'https://soultable.yelog.org/ext/',   // 模块目录
  version: 'v1.3.12'
}).extend({                         // 模块别名
  soulTable: 'soulTable'
});

layui.use(['form', 'table','soulTable'], function () {
    var table = layui.table,
        soulTable = layui.soulTable;

    table.render({
        elem: '#myTable'
        ,url: 'http://47.98.40.63:8089/poetry/dataGrid'
        ,toolbar: true
        ,height: 500
        ,totalRow: true
        ,cols: [[
            {type: 'radio', title: '##', fixed: 'left'},
            {type: 'checkbox', title: '##', fixed: 'left'},
            {field: 'title', title: '诗词', width: 100, fixed: 'left', totalRowText: '合计'},
            {field: 'dynasty', title: '朝代', width: 100},
            {field: 'author', title: '作者', width: 165 },
            {field: 'content', title: '内容', width: 123},
            {field: 'type', title: '类型', width: 112},
            {field: 'heat', title: '点赞数', width: 75, fixed: 'right', totalRow: true},
            {field: 'createTime', title: '录入时间', fixed: 'right', width: 165},
        ]]
        ,done: function () {
            soulTable.render(this)
        }
    });
})