在DW中用layuiDoc插件完成表格渲染

超、凢脫俗 2022-02-23 13:27 400阅读 0赞

1：在进行渲染之前肯定要引用插件，因为需要用到布局的问题，所以我们先引用一个bootstrap-4.1.3-dist 的一个css：bootstrap.min.css，这个插件是我们在布局时常常用到的，因为它可以帮你解决布局问题，让你更加方便，节省时间；其次我们再去引用layui 里面的一个layui.css，引用它是因为我们在表格的布局中需要用到它，最后再引用一个layui里面的js: layui.all.js ,它里面主要是包含了一些渲染表格的方法。  
引用插件截图：  
![在这里插入图片描述][20190408122228515.PNG]

2：引用完插件以后我们就需要去设置一个需要被渲染的表格，这时候我们的插件就派上用场了，我们去刚刚引用的bootstrap.min.css中调用row这样的一个类，然后再放一个类为col的div，它们都是为了适应布局才设置的，再在里面放一个table表格的标签，给它一个ID叫tab。  
div截图：  
![在这里插入图片描述][20190408122303873.PNG]  
3：我们现在是看不到效果的，也看不到表格，只能看到一条细小的线，接下来我们就是要去进行表格的渲染了，我们不去创建新的JavaScript了，我们就在html上设置，首先肯定是要写一个页面加载事件的，然后再去页面加载事件里面去进行渲染，先定义几个变量，比如定义一个tab，再定义一个layuiTable；定义完以后再进行赋值，使layuiTable赋值为layui,css里面的table，tab赋值为layuiTable中的render（指定该容器）事件，再到里面去渲染指定的表格，通过ID值来指定你想要渲染的表格，也就是我们刚刚给那个表格的ID，然后因为不知道要获取的具体数据，所以先给它一个空的数据，然后你也可以设置一下表格的高度等等，然后渲染表格里面表头的内容，比如这个表头的标题名称，宽度，字段名，固定列，排列方式等等  
表格渲染代码截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]  
4：完成一系列的操作之后，我们打开浏览器就可以看到一个无数据的表格了，而且表头也是会自动平均分布的，甚至你还可以拉动它们的宽度  
表格渲染完成截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 1]

[20190408122228515.PNG]: /images/20220223/1511493b125b43459b0f7d6445110c38.png
[20190408122303873.PNG]: /images/20220223/7ad41a97b1dd4e15afbefbaf7add8876.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]: /images/20220223/4576b2a305cf48c3a2f9e4f7a973b63d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 1]: /images/20220223/47ad980bb9ae4323932929c2fbc9d2cb.png