Home > 前端开发 > layuiAdmin踩坑实录


注:此页面所属问题均出现于layuiAdmin V1.0环境下,部分解决方案需修改源码,并非官方修复,请谨慎使用


背景

现在项目采用layuiAdmin作为后台框架,虽然在此之前已经有了layui的基础,但是在使用的过程中依旧磕磕绊绊踩了很多坑,故写此博客作为记录以方便来人。

网页内部刷新导致问题

一般来讲,内部刷新导致的问题,主要分为两类:
1. script标签带lay-url,异步获取数据延迟导致渲染失效
2. ID重复/重复绑定jquery事件导致的BUG

数据表格自动渲染无法使用

数据表格的自动渲染一直无法使用,使用layui.table.render();使用javascipt渲染即可,样例如下:

table.render({
        elem: '#LAY-xma-users-default-table'
        ,url: './json/xma/roles/users.js' //模拟接口
        ,height: 'full-235'
        ,page: true
        ,cellMinWidth: 120
        ,cols: [[
            // {type: 'checkbox'},
            {field:'id', width:80, sort:true, title: '编号'},
            {field:'name', width:160, title: '用户名'},
            {field:'role', width:120, sort:true, title: '所属角色'},
            {field:'grade', title: '管理年级'},
            {field:'classes', title: '管理班级'},
            // {toolbar: '#statusSwitch', title: '状态', width:120},
            {field:'expire', title: '到期时间', width:160},
            {field:'update', title: '更新时间', width:160},
            {field:'create', title: '创建时间', width:160},
            {width:150, title: '操作', align:'center', fixed: 'right', toolbar: '#LAY-xma-users-default-table-operate'},
        ]]
    });
});

数据表格、动态表单内部刷新后消失

数据表格的渲染,表单的自动渲染一般都是在layui.use([‘table’, ‘form’])的时候处理的。
刷新不出来一般有两种情况:
1. 如果我们使用<script type=”text/html” template lay-url=”xxx.js”></script>,layui将会自动使用ajax获取lay-url所在地址,导致加载延迟,在执行layui.use([])时,script中的内容并没有被渲染完成。
解决方法:
故将layui.use([]);放在<script templete>中即可在异步获取后再渲染table/form。
2. form在使用内部刷新后经常会出现没有渲染的情况,这是因为form的自动渲染仅在第一次使用layui.use([‘form’])时,内部刷新并不会重新加载form.js,导致表单没有自动渲染。
解决方法:
在非1 情况时,在layui.use([‘form’], function(){layui.form.render();});手动渲染兼容下就好。

动态渲染相同ID元素导致某个页面元素失效

layuiadmin是单页面应用,并非通常的iframe架构,相同ID的元素在同一页面下会导致获取ID选择器获取元素达不到想要的效果。最后的结果可能是:单独刷新此页面 – 一切正常。 打开其他页面,发现同ID的元素渲染不正常(不渲染或信息错误-table的toolbars)
解决方法:
对于此类问题,layuiadmin文档中给出的解决方案是:所有ID/lay-filter都使用LAY-开头,并将路由信息以-分割,最后才是自定义的ID字符串,比如路由信息user/login,ID可为:LAY-user-login-tempid

内部渲染事件重复绑定问题

通常,我们使用$(…).click();来绑定点击事件,并且习惯将此代码直接放到views/下的视图文件中,不过由于layuiadmin采用单页面技术,每次使用layuiadmin提供的刷新按钮刷新时,内部代码绑定事件的代码会被重新执行,导致多次绑定click事件。
解决方法:
目前我使用的方法是,使用xx.on(‘click’);前执行unbind(‘click’),解除点击事件的绑定,亲测有效,如:。

// 普通绑定
('.test').unbind('click').on('click', function(){...}); // 动态绑定 ('#main-content').unbind('click').on('click', function(){...});

框架其他问题

此类问题中部分是官方写代码时的疏忽,部分是使用者使用时不注意导致的。

layui.use()与script templete同时使用,内部解析失效问题

出现原因:
layui.use()当模块未加载时,会异步加载模块代码,<script templete>使用if判断时为同步解析,导致layui.use的回调执行时模板解析早已结束,所以无法同时使用templete和layui.use();
解决方法:
目前的解决方法是把需要使用的模块在使用前静态加载好(手动赋值layui.xxx = obj;等形式),如有更好的办法请告知。

多重script嵌套使用单行注释导致报错

出现原因:
layui的模板解析会压缩代码,从而导致//注释将其后的所有代码注释掉。
解决方法:
换为块级注释即可/*测试注释*/。

菜单无法自动定位

出现原因:
出现此类问题的原因很多,目前我遇到的原因是,仅使用菜单返回的jump属性强制跳转,导致_lib/admin.js_中on(‘hash(_)’)监听hash变化时无法正确找到对应菜单从而导致切换tab菜单自动定位失效。
解决方法:
于_lib/admin.js*500行左右,添加如下代码:

// 上边是match2的判断
if(matched2 == false && matched1){
            // 避免二级分类无法渲染匹配(主要是使用jump的时候)
            matched1 = false;
          }

注:临时解决方法,并不具有解决一切问题的能力。

tab左右切换导致路由传递参数丢失问题

出现原因:
这个问题无论是官方给的样例,还是自己的测试都会存在这个问题,目测是官方系统缺陷,审查TAB的元素可知,lay-attr内的数据是tab切换时应该跳转的真实路径,而非lay-id中去掉参数的路径。

解决方法
于_lib/admin.js_约568行的位置(检索setThisRoter即可),将此函数代码改为:

//同步路由
  var setThisRouter = function(othis){
    var layid = othis.attr('lay-attr')
    ,index = othis.index();
    // 兼容主页
    layid = layid ? layid : othis.attr('lay-id');

    admin.tabsBodyChange(index);
    location.hash = layid === setter.entry ? '/' : layid;
  }
  ,TABS_HEADER = '#LAY_app_tabsheader>li';

admin.req()无法POST传递问题

出现原因:
在_lib/view.js_的req()函数中将$.ajax中的type写死为get,所以无法使用POST(注:admin.req其实是回调的view.req(),在admin.js中可以看到)。
解决方法:
lib/view.js第89行(搜索:$.ajax 即可),将type: ‘get’改为type: options.type ? options.type : 'GET'

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

*