改变layui表格样式

改变layui表格样式

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：MVC

 

作者：盘洪源

 

撰写时间：2019年7月7日星期日

 

在用到layui初始化表格的时候，一开始我们可以自定义高度，这样就可以达到自已想要的效果。这个自定义高度就直接给在初始化表格下面就行，这些属性，layui官网都有介绍，想要了解更清楚就去官网看。

 

首先我要实现一个怎么样的效果呢？看图

 

 

  

     我这个就是上面表格下面就是一些输入框这些东西，然后通过一个回填数据回填到上面表格，但是呢，就是在回填表格数据的时候我需要下面这些输入框样式隐藏掉，并且上面表格的高度变高，因为这样效果会好看些，不然的话，下面的输入框隐藏掉，上面表格的高度并没有变化，这样效果就有点难看了。

    

首先先把下面的输入框隐藏掉，这个就是通过找到你下面这个内容区的最大的div，然后给个ID，然后通过这个ID将它隐藏掉就行了，就是一个attr的属性问题。

$("#BottomID").attr("hidden", true);

 

这里面true就是隐藏掉，如果想要再显示出来就改为false就行。

 

然后就是改变这个表格高度问题了，首先就是给表格的一个重载事件，然后在重载事件里给个done函数，然后里面就是通过选择元素来改变表格的高度，这些如果不会就自已去百度搜。

 

BasicMessage = layuiTable.reload("BasicMessage", {

                            done: function (res, curr, count) {

                                $('th').css({ 'background-color': '#bdccea', 'color': 'black', 'font-weight': '500', 'font-size': '12px', 'line-height': '10px' });

                                $("[lay-id=BasicMessage]").css("height", "500px");

                                $("[lay-id=BasicMessage]").find(".layui-table-box").css("height", "500px");

                                $("[lay-id=BasicMessage]").find(".layui-table-body").css("height", "500px");

                            }

                        })