Tag:ajaxjavascript
Article From:https://segmentfault.com/q/1010000012146868
Question:

The code is as follows. This is the left menu bar from the background. Now I want to add different small icons in front of the first level menu, how to set in the Ajax, the small icons in the label, how to set the different class names for each small icon to display the different icons, and how should the specific code write?

function getSubMenu(id){
        var url = '${ctx }/getSubMenu.action';
        $.ajax({  
            async : false,    
            type : 'post',    
            url : url,    
            data : {    
                'parentId' : id
            },    
            success : function(data) { 
                var data = eval('('+data+')');
                var length = data.length;
                if(length<=0){
                    $(".index").show();
                    $("#left").hide();
                    $(".footer").hide();
                    $('#indexP').attr('src', '${ctx}/index.action');
                }else{
                    $(".index").hide();
                    $("#left").show();
                    $(".footer").show();
                    var html ='' ;
                    $.each(data, function(idx, obj) {
                        var flag = false;
                           if(obj.parentId==id){
                               $.each(data, function(idx2, obj2) {
                                if(obj2.parentId == obj.id){
                                    flag = true;
                                }
                            });
                            if(flag){
                                var h = '';
                                h += '<li><div class="main-menu left-li">'+obj.label+'</div><ul class="sub-menu">';
                                $.each(data, function(idx3, obj3) {
                                    if(obj3.parentId == obj.id){
                                        h += '<li><a class="easyui-linkbutton" id="'+obj3.id+'"  href="javascript:void(0);"  onclick="addTab(\''+obj3.label+'\',\''+obj3.targetUrl+'\',\''+obj3.icoPath+'\')"><i class="icons"></i>'+obj3.label+'</a></li>';
                                    }
                                });
                                h += '</ul></li>';
                                html += h;
                            }else{
                                html += '<li><a class="easyui-linkbutton main-menu1 left-li" id="'+obj.id+'"  href="javascript:void(0);"  onclick="addTab(\''+obj.label+'\',\''+obj.targetUrl+'\',\''+obj.icoPath+'\')">'+obj.label+'</a></li>';
                            }
                        }
                    });
                    $("#subMenu").html(html);
                    $.getScript("${ctx}/baseStyle/js/index.js");
                }
                
            }    
        }); 
    }

Answer 0:

First, do not use Eval, $.parseJSON () or JSON.parse (), and then the data format is designed to return the background directly to you. If you do it with class, you can make a good class name with the background, or return the background directly to the imgUrl.

Answer 1:

The simplest thing is to make the backend add class names when processing data.

Answer 2:

Do you want to add different class directly in each cycle, then CSS different class to write different icons?

Answer 3:

Use<i [attr.class]="icon"></i>The form shows that this icon is the class class name of the little icon that is taken from the background.

Answer 4:

You can get the backstage back together

Leave a Reply

Your email address will not be published. Required fields are marked *