Layui、Jquery、Echarts项目问题总结

是吃货不是贝爷

已于 2023-03-26 20:24:02 修改

阅读量585

点赞数

分类专栏： layui 文章标签： layui javascript 前端

于 2022-05-27 00:31:40 首次发布

本文链接：https://blog.csdn.net/q4451728/article/details/124995680

版权

layui 专栏收录该内容

1 篇文章

订阅专栏

本文总结了前端开发中遇到的各种问题及解决方案，包括Layui导航渲染、动态元素JS失效、echarts图表重载等问题，并提供了jQuery操作DOM的有效方法。

摘要由CSDN通过智能技术生成

Layui

导航渲染失败问题

写项目的时候，被一个问题难到了。layui的导航在动态插入导航项的时候，标签下面的颜色样式lay-this会消失，捣鼓了很久。
首先在插入li之前删除span，用谷歌开发者工具可以看到一个span，其实就是这个颜色样式，将它移除

$("#mainmenu span").remove();

然后添加完li后，再渲染。

layui.use('element', function () {
    var element = layui.element;
    element.render('nav');		//重新对导航进行渲染
})

这样样式就回来了。

参考官网：https://layui.11dz.cn/doc/modules/element.html

动态插入元素后JS失效

有时候加了一些动态标签样式，layui那些点击事件啥的都不能用了，包括原来的index.js。这时候想，表单和导航都可以用render重新渲染，那JS可不可以重新加载呢？

function loadJs(file) {
	$("#mmm").remove();	//这里，下面的解决方法就不用这个
    $("<scri" + "pt>" + "</scr" + "ipt>").attr({
        opt: 'reload', src: file, type: 'text/javascript'
    }).appendTo("head");
}
loadJs("xxx");	//文件路径名

这样就解决了？
然而，这样导致了方法执行两次。。除了相应的js文件，还有个vm…js，因此才执行两次，这时候就只能先不加script，然后直接加。

xadmin切换用户时候选项卡关闭

参考博客

点击原博主

Jquery

firstChild无效

寻找子节点的方法有很多种，但是找到children以及firstChild方法都不能成功，会提示…children is not a function，但是用find就成功了

//错误代码
$("input[value='" + fatherMenu + "']").parent("td").next().firstChild.append(str);
//正确代码
$("input[value='" + fatherMenu + "']").parent("td").next().find("div").append(str);

那么直接获取dom对象使用方法呢？

发现可以获取，也就是说firstChild是原生js的方法。。被别人的博客误导了。。

使表头固定

表头固定插件chromatable，这是一个别人做的jquery表头固定的代码，可参考以下文章。

https://www.cnblogs.com/lionelwu-qianqian/archive/2012/09/06/2673728.html

但是需要注意，由于源代码使用了resize，因此在与echarts结合使用的时候，在窗口改变时候需要注意表格是否显示，不显示时会出现bug，导致复制的表头错乱。
并且执行的chromatable需要在某些情况下只执行一次。否则也会造成错乱。
chromatable源代码：

/*
 * File:        chromatable.js
 * Version:     1.3.0
 * CVS:         $Id$
 * Description: Make a "sticky" header at the top of the table, so it stays put while the table scrolls
 * Author:      Zachary Siswick
 * Created:     Thursday 19 November 2009 8:53pm 
 * Language:    Javascript
 *
 */
(function($){
    
    $.chromatable = {
        // Default options
        defaults: {
                        //specify a pixel dimension, auto, or 100%
            width: "900px", 
                        height: "300px",
                        scrolling: "yes" 
        }
                
        };
        
        $.fn.chromatable = function(options){
         
        // Extend default options
        var options = $.extend({}, $.chromatable.defaults, options);

        return this.each(function(){
                                                            
                // Add jQuery methods to the element
                var $this = $(this);
                var $uniqueID = $(this).attr("ID") + ("wrapper");
                
                
                //Add dimentsions from user or default parameters to the DOM elements
                $(this).css('width', options.width).addClass("_scrolling");
                
                $(this).wrap('<div class="scrolling_outer"><div id="'+$uniqueID+'" class="scrolling_inner"></div></div>');
                                
                $(".scrolling_outer").css({'position':'relative'});
                $("#"+$uniqueID).css(
                                                                    
                     {'border':'1px solid #CCCCCC',
                        'overflow-x':'hidden',
                        'overflow-y':'auto',
                        'padding-right':'17px'                        
                        });
                
                $("#"+$uniqueID).css('height', options.height);
                $("#"+$uniqueID).css('width', options.width);
                
                // clone an exact copy of the scrolling table and add to DOM before the original table
                // replace old class with new to differentiate between the two
                $(this).before($(this).clone().attr("id", "").addClass("_thead").css(
                                                                                                                                                                                             
                        {'width' : 'auto',
                         'display' : 'block', 
                         'position':'absolute', 
                         'border':'none', 
                         'border-bottom':'1px solid #CCC',
                         'top':'1px'
                            }));
    
                
                // remove all children within the cloned table after the thead element
                $('._thead').children('tbody').remove();
                
                
                $(this).each(function( $this ){
                                                            
                    // if the width is auto, we need to remove padding-right on scrolling container    
                    
                    if (options.width == "100%" || options.width == "auto") {
                        
                        $("#"+$uniqueID).css({'padding-right':'0px'});
                    }
                    
                
                    if (options.scrolling == "no") {
                                                
                        $("#"+$uniqueID).before('<a href="#" class="expander" style="width:100%;">Expand table</a>');
                        
                        $("#"+$uniqueID).css({'padding-right':'0px'});
                        
                        $(".expander").each(
    
                            
                            function(int){
                                
                                $(this).attr("ID", int);
                                
                                $( this ).bind ("click",function(){
                                                                                                 
                                        $("#"+$uniqueID).css({'height':'auto'});
                                        
                                        $("#"+$uniqueID+" ._thead").remove();
                                        
                                        $(this).remove();
                        
                                    });
                                });


                        //this is dependant on the jQuery resizable UI plugin
                        $("#"+$uniqueID).resizable({ handles: 's' }).css("overflow-y", "hidden");
    
                    }
                
                });
                
                
                // Get a relative reference to the "sticky header"
                $curr = $this.prev();
                
                // Copy the cell widths across from the original table
                $("thead:eq(0)>tr th",this).each( function (i) {
                                                                                             
                    $("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width());
                    
                });

                
                //check to see if the width is set to auto, if not, we don't need to call the resizer function
                if (options.width == "100%" || "auto"){
                    
                                            
                        // call the resizer function whenever the table width has been adjusted
                        $(window).resize(function(){
                                                                            
                                    resizer($this);                                        
                        });
                    }
                });
                
    };
        
        // private function to temporarily hide the header when the browser is resized
        
        function resizer($this) {
                
                // Need a relative reference to the "sticky header"
                $curr = $this.prev();
                
                $("thead:eq(0)>tr th", $this).each( function (i) {
                                                                                                                         
                    $("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width());
                    
                });

      };
        
})(jQuery);

后续：新的要求，按某列排序，上面的方法不能排序，所以找了个支持Bootstrap3的插件，dataTable，可以实现固定表头和排序。
官网：https://datatables.net/
按特定列排序：https://blog.imdst.com/guan-yu-datatables-de-pai-xu-wen-ti/
禁止初始排序（第一行默认排序）：https://www.codenong.com/12124746/

echarts

重新加载问题

在某些时候需要进行加载，比如点击事件等，但是有时候echarts懒得改，比如在没有数据的时候，这时候可以将画布清空

var myChart = echarts.init(document.getElementById("mychart1"));
myChart.clear();

这样可以让图表从空白开始加载

隐藏导致宽度变小

https://www.ddpool.cn/article/99096.html
这个解决方法有效

两图表y轴对齐不了

原因是刻度宽度不同，导致坐标轴（不包含刻度数值）到左边的距离不同，这时候需要把刻度数值放在坐标轴内侧，才能使y轴到左边的距离不受刻度影响。即增加以下代码。

yAxis: {
    type: 'value',
    axisTick: {
        inside: true
    },
    axisLabel: {
        inside: true
    }
},

JS

修改文件后缓存问题

可以通过增加版本号的方式

https://jingyan.baidu.com/article/642c9d343a62ea644b46f776.html

如
<script src="js/name.js?001"></script>

这样修改文件后打开就不需要重新清除缓存了。