layui 基础使用一

table 中单元格可点击，数据样式渲染： table.render 的配置项 cols 所在列配置如下：

{ field: 'name', title: '姓名', width: 120, templet: function (d) {
            var nameDom = '<a class="table-inner-handle">' + d.name + '</a>'
            return nameDom;
          }, event: 'check-student'
        },

table 中单元格日期数据格式化，数据样式渲染： table.render 的配置项 cols 所在列配置如下：

{ field: 'liveTime', title: '购房日期', width: 150, minWidth: 50, hide: true,  templet: function (d) {
        if(d.liveTime){
          var date = new Date(d.liveTime),
            formate = util.toDateString(date, 'yyyy-MM-dd')
          return formate;
        }else{return '';}}
      },

table 中 数据格式化，数据样式渲染： table.render 的配置项 cols 所在列配置如下：

{ field: 'twins', title: '是否双(多)胞胎', width: 140, hide: true,templet: function(d){return Object.is(null, d.twins) ? "" : (d.twins ? "是":"否")} },

　　获取 下拉 数据渲染：

function getClass(clazz) {
      $.ajax({
        method: 'get',
        url: AjaxUrl + '/xxx/xxx/getClassInfo',
        success: function (res) {
          let option = "";
          for (let key in res.classes) {
            option += '<option value="' + key + '">' + res.classes[key] + '</option>';
          }
          $('#clazz').append(option);
          form.render('select');
        }
      });
    };
    getClass()

tab 页签的设置及切换监听：

<div class="layui-tab" lay-filter="student-type-tab">
            <ul class="layui-tab-title">
              <li class="layui-this" lay-id="1">小学</li>
              <li lay-id="0">中学</li>
            </ul>
            <div class="layui-tab-content" style="padding: 10px 0;">
            </div>
</div>

// 切换头部tab
element.on('tab(student-type-tab)', function (data) {
    //....
}