layui配置

Posted ampl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui配置相关的知识,希望对你有一定的参考价值。

layui是一个全局变量,可以在任何地方访问到
layui.config 方法主配置信息(经测试好像不能添加额外属性)
layui.setter读取主配置属性
layui.extend 方法增加主配置模块
layui.use 方法引用
第一个参数(数组)用于加载模块,如果只有一个模块可以直接写字符串;
第二个参数(方法)页面回调,增加页面自定义事件

layui.config({
           base: ‘../layuiadmin/‘, //静态资源所在路径
       }).extend({
           index: ‘lib/index‘, //主入口模块
       }).use([‘index‘, ‘forum‘, ‘table‘], function () {
           var $ = layui.$
           , form = layui.form
           , table = layui.table;
});
>>>layui.setter.base
‘../layuiadmin/‘

  

一个搜索按钮,一个表格:

<button class="layui-btn layuiadmin-btn-replys" data-type="reload" lay-submit lay-filter="LAY-app-forumreply-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>

<table id="LAY-app-forumreply-list" lay-filter="LAY-app-forumreply-list"></table>

  

元素包含lay-submit,根据lay-filter的值来得到该按钮

//得到元素所在layui-form中的表单数据
form.on(‘submit(LAY-app-forumreply-search)‘, function (data) {
//data.field表单中包含name属性的键值对象
                var field = data.field;

                //执行页面中 id="LAY-app-forumreply-list"的重载
                table.reload(‘LAY-app-forumreply-list‘, {
//where属性可以在异步请求中增加额外的参数
                    where: field
                });
            });

  

加载列表:

table.render({
        elem: "#LAY-app-forumreply-list",
        url: "/Txooo/Sales/Mch/Product/Ajax/ProductAjax.ajax/GetProductList3",
        cols: [[{
//多选框
            type: "checkbox",
            fixed: "left"
        },
        {
//可排序的列sort
            field: "replytime",
            title: "回帖时间",
            sort: !0
        },
        {
//读取模板加载列内容
            title: "操作",
            width: 150,
            align: "center",
            fixed: "right",
            toolbar: "#table-forum-replys"
        }]],
        page: 0,
        limit: 10,
        where: {
            pageIndex: 0,
            r_state: 5
        },
        limits: [10, 15, 20, 25, 30],
        text: "对不起,加载出现异常!",
        response: { dataName: "list" }
})

  

render 列表渲染
elem 渲染目标id
url 异步加载地址
page 固定读取分页当前页
limit 固定每页条数
limits 可选每页条数
response 请求参数配置{"statusName":"code","statusCode":0,"msgName":"msg","dataName":"data","countName":"count"}

cols 列名与内容设置
  • type 内容类型
  • fixed 样式左右方向
  • field 对应的异步数据字段名称
  • title 展示的列名
  • sort 可排序字段
  • align 字体居中
  • toolbar 可操作模板id
  • templet 普通模板内容id或html代码



















以上是关于layui配置的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

layui配置

LayUI Table复杂表头实现

VS Code配置markdown代码片段