自定义表格的渲染

拼搏现实的明天。 2022-01-21 08:41 437阅读 0赞

开发工具与关键技术： VS ， ；自定义表格渲染  
作者：刘佳明  
撰写时间：2019年 6 月 3 日

之前有编辑过运用layui渲染出table表格，本篇文章是不使用layui的方法，自己在HTML中使用标签来构建出一个table的表格  
以下是经常使用的layuitable表格渲染

tabStudent = layuiTable.render({
        elem: "#tabStudent",//html table id
        //url: "/PateOnt/SelectPateOnt/",//数据接口
        cols: [[ //表头
        { type: 'checkbox', fixed: 'left' },//复选框列,fixed:'left' 将列固定在左边
        { type: 'numbers', title: '序号' },//序号列，title设定标题名称
        { field: 'employeeID', title: 'employeeID', hide: true },
                           //{ field: 'UserID', title: 'UserID', hide: true },//hide:true 隐藏列
        { field: 'employeeName', title: '员工姓名' },
        { field: 'employeeNum', title: '员工编号' },
        { field: 'telphone', title: '电话号码' },
        { field: 'address', title: '家庭住址' },                        
        { title: '操作', templet: setOperate, width: 148, align: 'center', fixed: 'right' }//width: 160 指定宽度，align 指定对其方式
                        ]],
         page: {
                limit: 10,//指定每页显示的条数
                limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
              }, //开启分页
        data: [],//加载本地数据
                     
              //toolbar: '#tabStudentToolbar',
         })

直接在HTML中记录一个table的标签。然后在js 的代码中把表格渲染出现，  
在这里，小编使用同一个数据库，相同字段，不同的渲染方式构建了另外一种table表格的渲染，同样可以实现将数据库中的数据传输到table中 显示，  
HTML中渲染table  
注意，HTML中渲染表格，数据查询数据的链接方法，是在标签中直接引入；

以下是两种的效果图对比：  
Layuitable表格渲染：  
![在这里插入图片描述][20190609122653618.png]  
使用HTML中定义的table标签来定义的table表格：  
![在这里插入图片描述][20190609122707332.png]  
两种方法都可以接受数据的数据，并将它们显示在table表格中

[20190609122653618.png]: /images/20220121/c67b00a8437f4dab8271f2ac0df4dbfd.png
[20190609122707332.png]: /images/20220121/774aad7126234d82a162b23fb9b7c10a.png