2018-09-28

layui学习笔记

1.基本目录

|-css //css样式
    |-layui.css /核心样式文件
    |-modules //此模块相对较大，包含三个子模块
        |-laydate //日历控件
        |-layer
        |-layim
|-font //字体图标
|-image //图片资源
|-lay //模块核心目录
|-layui.js //基础核心库
|-layui.all.js //此模块包含layui.js和所有模块的合并文件

2.下载：官网、Git仓库、npm

3.常用部署

./layui/css/layui.css head中
    
./layui/layui.js body中
    

4.layui模板定义:

layui.define[mods],function(exports){
    ......
    exports('mod',api);
});
模板使用:
layui.use(['mod1','mod2'], function(args){
    var mod = layui.mod1;
    ......
});

问题

1.编写的是freemarker template language文件，视图层如何响应成网页
2.使用过的模块，可以了解了解源代码，不要一个劲地复制粘贴

1.table模块：

    1.1先在页面需要位置新建table标签：
        
        //id用于实例化表格时的元素选择器
        //lay-filter用于工具条监听时绑定过滤器
    1.2模块加载基本操作：
        layui.use(['laypage', 'layer', 'table', 'form', 'element','laydate','tree','treeGrid'], function(){
            var laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格 
            ,form = layui.form//表单
            ,element = layui.element//元素操作
            ,tree = layui.tree//
            ,treeGrid = layui.treeGrid
            ,laydate = layui.laydate
            ,$ = layui.$; 
    1.3实例化表格：
        table.render({
            elem: '#tableList'
            ,url: '' //数据接口
            ,page: true //开启分页
            ,msg:'无数据'
            ,cols: [[ //表头
               {checkbox: true, fixed: true}    
              ,{type:'numbers',title: '序号',fixed: 'left'}//fixed
              ,{field: 'purchasingCom', title: '采购单位'}
              ,{field: 'sellCom', title: '销售机构'}
              ,{field: 'operate', title: '操作',toolbar: '#operateTool',fixed: 'right'}
            ]]
            ,data:[{
                 'comCode':'860101'
                ,'purchasingCom':'中科软科技股份有限公司'
                ,'sellCom':'asus'
                ,'batchCode':'00001'
            }]
        });

2.日期模块：

    2.1定义日期输入框
        

            失效日期
            

                
            
        
    2.2加载模块
    2.3实例化，添加样式
        laydate.render({
            elem: '#invalidDate'
            ,theme: 'grid'
            //管theme有哪些选项：
        });   

3.treeGrid模块

    var treeGrid = layui.treeGrid;//需要单独在layui.js文件中引入treeGrid:"modules/treeGrid"
        var treeTable = treeGrid.render({
        elem: '#orgTree'
        , url: 'getOrgList'//尽量用相对路径，获取json数据
        , cellMinWidth: 100
        , treeId: 'id'//树形id字段名称
        , treeUpId: 'parentId'//树形父id字段名称
        , treeShowName: 'name'//以树形式显示的字段
        , cols: [[ //表头
            {type: 'checkbox'}
            ,{field: 'name', title: '机构名称',width:'30%'}
            ,{field: 'parentId', edit: 'text', title: 'parentId'}
            ,{field: 'areaId', title: '归属区域', sort: true}
            ,{field: 'id', title: '机构编码'}
            ,{field: 'orgType', title: '机构类型', sort: true}
            ,{field: 'remarks', title: '备注',sort: false}
            ,{field: 'operate', title: '操作',toolbar: '#operateTool',width:'20%'}
        ]]
        , page: false
    });

4.Xtree模块

    4.1，Xtree是基于form的，所以先定义form
        

            
组织机构
                
            
            

        
    4.2定义Xtree
        var xtree2 = new layuiXtree({
            elem: 'demo'   //(必填) 放置xtree的容器，样式参照 .xtree_contianer
            , form: form  //(必填) layui 的 from
            //, data: json //(必填) 数据接口，需要返回以上结构的json字符串
            , url: 'getOrgList'
        });

表格中的url和data

单选还是多选

Xtree后台交互格式，treeGrid交互格式，table交互格式

1.Xtree：根据json数组的数据层级展现树状结构
    var json = [
        {
        title: "XX人寿保险股份有限公司", value: "jd1", data: [
            { title: "保险分公司节点1.1", checked: true, disabled: true, value: "jd1.1", data: [] }//添加disabled属性为true之后不允许勾选或取消勾选
            , { title: "保险分公司节点1.2", value: "jd1.2", checked: true, data: [] } //checked属性为true则默认勾选
            , { title: "保险分公司节点1.3", value: "jd1.3", disabled: true, data: [] }
            , { title: "保险分公司节点1.4", value: "jd1.4", data: [] }
            ]
        }
        , {
        title: "XX人寿保险股份有限公司", value: "jd2", data: [
              { title: "保险分公司节点2.1", value: "jd2.1", data: [] }
            , { title: "保险分公司节点2.2", value: "jd2.2", data: [] }
            , { title: "保险分公司节点2.3", value: "jd2.3", data: [] }
            , { title: "保险分公司节点2.4", value: "jd2.4", data: [] }
            ]
        }
    ]
2.treeGrid：不用层级关系实现依靠字段的继承

表格中定义工具条

定义表格并实例化：
    
    ......
添加script标签，定义操作按钮
    
    其中lay-event的值用
添加列： 
    ,{field: 'operate', title: '操作',toolbar: '#operateTool',fixed: 'right'}
    其中#operateTool为script标签的id
监听工具条
    table.on('tool(tableFilter)', function(obj){ //注：tool是工具条事件名，tableFilter是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
        ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'doIt'){//script子标签的lay-event的值
            popup("卡单批次清算", "batchLiquidationDo","90%");//popup弹出新的小窗口页面，第一个为窗口名，
        };
    });

页面网页弹出popup

popup("批次清算", "batchLiquidationDo","90%");//popup弹出新的小窗口页面，第一个为窗口名，第二个为location，第三个为窗口大小

input-item、input-inline 和 input-block

下拉选带搜索：为select标签添加lay-search属性

    parentId
    

        
            1
            2
            3
        
    

switch 开关

    
是否启用
    

layui表格自动渲染：

 …… 

layui-tab

ajax的data.field和data.serialize

通过监听工具条获取标签的innerHTML

treeGrid.on('tool(tableFilter)', function(obj){ 
    tr = obj.tr
    ,id = $(tr).find('td:eq(4)').text()
    ,layEvent = obj.event; //获得 lay-event 对应的值
    console.log(id);
});
始终记得监听工具条的obj参数是相当于整个table的
后期有修正的更简单的

获取表单数据

1.提交按钮，用button 不用submit
    添加
2.获取数据
    form.on('submit(updateOrgDo)',function(data){
        var param = data.field;//定义临时变量获取表单提交过来的数据，非json格式
        $.ajax({
        ......
        }
        return false;
    }

FTL stack trace ("~" means nesting-related):

    - Failed at: ${ab01.ab0103}  [in template "system/org/addSubOrg.ftl" at line 11, column 19]
----] with root cause
freemarker.core.InvalidReferenceException: The following has evaluated to null or missing:

就是需要的字段为null了，根机构的上级id写成0也不要为NULL

form.on('submit(addBtn)',function(data){

1.addBtn是button 的lay-filter的值
2.

form.verify

form.verify({
  ab0102: function(value){
    if(value.trim()==""){
      return "不能为空";
    }
  }

  ,ab0103: function(value){
    if(value.trim()==""){
      return "不能为空";
    }
  }
});

Xtree/treeGrid/数据接口格式

1.treeGrid：
    code：
    msg：
    count：
    data：
2.Xtree
    code：
    msg：
    tittle：
    value：
    data：
3.table同treeGird

popup和layer.open

popup("添加下级机构", "addSubOrg?ab0101=" + ab0101,"90%");

弹窗关闭,父级页面跳转

1.通过frame序号关闭当前弹窗
    var index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);  //关闭弹出框
2.刷新表格,其实是刷新页面
    parent.location.href="orgManagement";  //父级跳转到其他页面去

页面刷新

1 history.go(0)
2 location.reload()
3 location=location
4 location.assign(location)
5 document.execCommand('Refresh')
6 window.navigate(location)
7 location.replace(location)
8 document.URL=location.href

table的reload

function reloadTable(){
    treeGrid.reload('orgTree', {
        where: {
            ab0101: $('#ab0101').val(),
            ab0102: $('#ab0102').val()
        }
    });
};
当然可以直接调用Table的reload函数,layui已经封装

Layui hint: treeSelect is not a valid module

当你遇到类似这样报错，说某某某不是一个有效的模块时，不防在layui.js前引入jquery，也许错误就被解决啦！
继续,修改了模块文件,统一了大小写,但并不知道对不对,没有报错,下拉也出来了,但是收缩效果体验很差

使用table或者treeGrid的checkbox

var active = {//讲选中的行数封装成data数组
    showOrgan: function(){
        var checkStatus = treeGrid.checkStatus('organTree')
            , data = checkStatus.data;
        if (data.length != 1) {
          layer.msg('请选择一行查看,已选['+data.length+']行', {icon: 5});
          return false;
        }
            popup("查看详情", "showOrgan?ab0101=" + data[0].ab0101, "80%");
        }
};

下拉树的实现,详见页面代码

layui tree的常用:

tree({
     elem: "#treeselect" ,
     nodes: obj.data,
     click: function (node) {
         var $select = $($(this)[0].elem).parents(".layui-form-select");
         $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.ab0603).end().find("input:hidden").val(node.ab0601);
     }
 });

异步请求获取treeselect节点列表

 $.ajax({
    url: 'selecteTree',
    type: 'post',
    dadatype: 'json',
    success: function(obj){
        val = obj.data;
         tree({
             elem: "#treeselect" ,
             nodes: obj.data,
             click: function (node) {
                 var $select = $($(this)[0].elem).parents(".layui-form-select");
                 $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.ab0603).end().find("input:hidden").val(node.ab0601);
             }
         });
    }
 });
实测在nodes属性赋值时直接调用createTree方法无效

上述代码实现下拉树之后,无法实现下拉选

下拉树测试代码:
var testData =
    [{
        ab0103: '节点1',
        name: '节点1',
        ab0101: 1,
        ab0108: 0,
        children: [{
            ab0103: '节点1.1',
            name: '节点1.1',
            ab0101: 11,
            ab0108: 1}, 
            {
            ab0103: '节点1.2',
            name: '节点1.2',
            ab0101: 12,
            ab0108: 1},
            {
            ab0103: '节点1.3',
            ab0101: 13,
            name: '节点1.3',
            ab0108: 1}
        ]
    },
        
    {
        ab0103: '节点2',
        name: '节点2',
        ab0101: 2,
        ab0108: 0,
        children: [{
            ab0103: '节点2.1',
            name: '节点2.1',
            ab0101: 21,
            ab0108: 2}, 
            {
            ab0103: '节点2.2',
            name: '节点2.2',
            ab0101: 22,
            ab0108: 2},
            {
            ab0103: '节点2.3',
            name: '节点2.3',
            ab0101: 23,
            ab0108: 2}
          ]}
    ];