Layui的表格应用

﹏ヽ暗。殇╰゛Y 2022-04-24 06:00 274阅读 0赞

众所周知，在html中，应用table表单十分麻烦的，tr，td，的什么要很多，像我们数据里有几千条数据，我们不可能去一条一条的输入，十分的麻烦和费时间，那么有没有自动引入生成的表单呢，有的，答案是layui的table应用。  
而layui的表单渲染方法有三，今天我们来讲其中一种。用js方法的配置完成渲染，这种方法有点就是不需要过多的html，在js中指定原始元素，再设定各项参数即可。  
首先创建两个变量，var layuiTable，和varTabAcademe，在页面加载事件中用layui.use（）的方法加载table内置模块，再使layuiTable=layui.table，然后TabAcademe=layuiTable,render（\{\}）；的方法具体代码如图一  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70]  
图一  
此前，我们要设置一个table的标签，并设置一个id。然后再elem（它是指定原始table容器的选择器）中输入table的id，url（异步数据接口相关参数，其中url参数为必填项）为你表单想要渲染的内容的路径，cols是设置表头，值是二维数组，使用我这种方法渲染时必填。  
接下来我们看cols里面，title，类型为string（字符串），用来设置标题名称  
二，type，类型是string（字符串），用来设定列的类型，可选择有1、normal（常规列，无需设定）2、checkbox（复选框列），3、radio（单选框列），4、numbers（序号列），5、space（空列）。  
三，Field，类型是string（字符串）设定字段名，注意，字段名的设定非常重要，且是表格数据列的唯一标识。  
四，Align单元格配列的方式，可选值有：left（默认），center（居中），right（居右）。  
五，Templet。这是个自定义列模板，模板遵循laytpl语法，这是个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其他格式，如时间转化为日期字符等。  
六，最高我们来看page它代表开启分页，limit，每页显示的条数（默认为10），而limits呢，也是每页显示的条数，默认为（10，20，30，40，50，60，70，80，90，）。  
这样一个使用方法渲染的表格就制作完成了，最终效果如下  
![在这里插入图片描述][20190418082248233.PNG]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70]: /images/20220218/a7a51cfbdc014e9dabf56d4c87023e3d.png
[20190418082248233.PNG]: /images/20220218/220cab0fd5bb40289ba008893b1afd97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 1]: /images/20220218/0edfa88348164787b9458af5891231c2.png