layui学习汇总

目录

表格加分页渲染方法

下拉选择框通过ajax渲染

首页导航栏自定义

根据sessionStorage获取主页加载并记忆

laytpl模板中使用函数 

---

ajax加载loading

var index;
$.ajax({
  url: IP + 'forecast/getElement',
  dataType: 'json',
  type: 'post',
  data: {
    productCode: productCode,
    taskId: taskId
  },
  beforeSend: function () {
    index = layer.load(1, {
      shade: [0.1, '#fff'] //0.1透明度的白色背景
    });
  },
  complete: function () {
    layer.close(index);
  },
  success: function (res) {
    if (res.data instanceof Array && res.data.length != 0) {
      var data = res.data;
      factorData = data;
      for (var i = 0; i < data.length; i++) {
        productCodeList.push(data[i].productCode);
        var html = '';
        var elementList = data[i].elementList;
        laytpl($('#factor-tpl').html()).render(elementList, function (html) {
          $('.factor-wrap').eq(i).html(html);
        });
      }
    }
  },
});

表格加分页渲染方法

<div class="table-container layui-form" lay-filter="checkbox-form">
    <table class="layui-table">
        <thead>
            <tr>
                <th>用户名</th>
                <th>联系方式</th>
                <th>部门</th>
                <th>区域</th>
                <th>版本</th>
                <th>所属单位</th>
                <th>是否安装</th>
                <th>是否在线</th>
                <th>在线时长</th>
            </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
    <div id="page"></div>
</div>

模板

<script id="table-tpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
        <tr>
            <td>{{ item.realname  }}</td>
            <td>{{ item.mobile }}</td>
            <td>{{ item.deparetname }}</td>
            <td>{{ item.area }}</td>
            <td>{{ item.version }}</td>
            <td>{{ item.organizename }}</td>
            <td><input disabled type="checkbox" name="close" {{ item.isinstall ? 'checked' : '' }} lay-skin="switch" lay-text="是|否"></td>
            <td>{{ item.online ? '在线' : '离线'}}</td>
            <td>{{ item.onlinetime }}</td>
        </tr>
    {{#  }); }}
    {{#  if(d.length === 0){ }}
        <tr><td colspan="9">暂无数据</td></tr>
    {{#  } }}
</script>

分页器渲染和点击事件

设置全局变量flag = true  当点击分页器后设置flag=false，就不会自动去在去渲染一次了

当点击查询时设置flag = true，重新开启分页

if (flag) {
  laypage.render({
    elem: 'page',
    limit: 10,
    count: res.count, //数据总数
    jump: function (obj, first) {
      flag = false;
      page = obj.curr;
      //首次不执行
      if (!first) {
        initData.getTableData(page);
      }
    }
  });
}

表格模板渲染 

laytpl($('#table-tpl').html()).render(res.rows.listData, function (html) {
    $('#tbody').html(html);
    // 对开关进行重新渲染
    form.render('checkbox', 'checkbox-form');
});

下拉选择框通过ajax渲染

<select id="units" lay-filter="select-form"></select>

$.ajax({
    url: IP + '/BaseManage/Organize/GetTreeJson',
    dataType: 'json',
    success: function (res) {
        if (res instanceof Array && res.length != 0) {
            var html = '<option value="">全部</option>';
            for (var i = 0; i < res.length; i++) {
                html += '<option value="' + res[i].id + '">' + res[i].text + '</option>';
            }
            $('#units').html(html);
            form.render('select', 'select-form');
        } else {
            $('#units').html('');
        }
    }
});

首页导航栏自定义

样式

<style>
    .layui-layout-admin .layui-header {
        background-color: #1079E9;
    }

    .layui-layout-admin .layui-header a {
        color: #fff;
    }

    .layui-layout-admin .layui-header a:hover {
        color: #fff;
    }

    .layui-layout-admin .layui-header .layui-logo {
        position: absolute;
        width: 300px;
        background: none !important;
        box-shadow: none;
    }

    .layui-layout-admin .layui-side {
        position: absolute;
        height: 100%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 660px;
        background: none;
        box-shadow: none;
    }

    .layui-layout-admin .layui-side .layui-side-scroll {
        width: auto;
    }

    .layui-layout-admin .layui-side .layui-nav {
        width: auto;
        height: 100%;
        margin: 0;
        overflow: hidden;
    }

    .layui-layout-admin .layui-header .layui-nav .layui-nav-item {
        position: relative;
        float: left;
        width: auto;
    }

    .layui-layout-admin .layui-side .layui-nav .layui-nav-item>a {
        padding: 0;
    }

    .layui-nav-tree .layui-nav-item a {
        width: 110px;
        text-align: center;
        height: 50px;
        line-height: 50px;
    }

    .layui-nav-tree .layui-this,
    .layui-nav-tree .layui-this>a {
        background: rgba(52, 64, 88, .1);
    }

    .layui-nav-tree>.layui-nav-item>a:before {
        width: 0;
    }

    .layui-nav-item.layui-this::before {
        content: '';
        position: absolute;
        width: 110px;
        height: 3px;
        left: 0;
        bottom: 0;
        background-color: #fff;
    }

    .layui-layout-admin .layui-body {
        left: 0;
        top: 10px;
        bottom: 0;
    }
</style>

在layui-header下的layui-logo同级别下插入导航栏

<div class="layui-side">
    <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree" lay-filter="admin-side-nav">
            <li class="layui-nav-item layui-this">
                <a lay-href="systemHome/systemHome.html">
                    主页
                </a>
            </li>
            <li class="layui-nav-item">
                <a lay-href="systemHome/product.html">
                    产品图集
                </a>
            </li>
            <li class="layui-nav-item">
                <a lay-href="systemHome/pointCorrect.html">
                    格点订正
                </a>
            </li>
            <li class="layui-nav-item">
                <a lay-href="systemHome/modeCheck.html">
                    模式检验
                </a>
            </li>
            <li class="layui-nav-item">
                <a lay-href="systemHome/dutyManage.html">
                    值班管理
                </a>
            </li>
            <li class="layui-nav-item">
                <a lay-href="systemHome/systemManage.html">
                    系统管理
                </a>
            </li>
            <span class="layui-nav-bar" style="top: 27.5px; height: 0px; opacity: 0;"></span>
        </ul>
    </div>
</div>

根据sessionStorage获取主页加载并记忆

var position = sessionStorage.getItem("qiyunFront_indexTab");
if (position) {
    $('.layui-side .layui-nav-item').removeClass('layui-this');
    layui.each($('.layui-side .layui-nav-item'), function () {
        if ($(this).find('a').attr('lay-href') == position) {
            $(this).addClass('layui-this');
        }
    });
    index.loadHome({
        menuPath: position,
        menuName: '<i class="layui-icon layui-icon-home"></i>'
    });
} else {
    index.loadHome({
        menuPath: 'home/index.html',
        menuName: '<i class="layui-icon layui-icon-home"></i>'
    });
}

$('.layui-side .layui-nav-item').click(function () {
    var indexTab = $(this).find('a').attr('lay-href');
    sessionStorage.setItem('qiyunFront_indexTab', indexTab);
})


// 这种方法有错误
var position = JSON.parse(sessionStorage.getItem("qiyunFront_tempData"));
if (position && position.tabPosition) {
    $('.layui-side .layui-nav-item').removeClass('layui-this');
    layui.each($('.layui-side .layui-nav-item'), function () {
        if ($(this).find('a').attr('lay-href') == position.tabPosition) {
            $(this).addClass('layui-this');
        }
    });
    index.loadHome({
        menuPath: position.tabPosition,
        menuName: '<i class="layui-icon layui-icon-home"></i>'
    });
} else {
    index.loadHome({
        menuPath: 'home/index.html',
        menuName: '<i class="layui-icon layui-icon-home"></i>'
    });
}

laytpl模板中使用函数 

<script id="top10-tpl" type="text/html">
    <tr>
        <th width="12%">序号</th>
        <th width="40%">站点名称</th>
        <th width="12%">区域</th>
        <th width="12%">类型</th>
        <th width="12%">水深(mm)</th>
        <th width="12%">等级</th>
    </tr>
    {{#  
        var getClassName = function(waterFlag){
            var className = '';
            switch(waterFlag){
                case '特别严重':
                    className = 'seriouser';
                    break;
                case '较严重':
                    className = 'serious';
                    break;
                case '中度':
                    className = 'moderate';
                    break;
                case '一般':
                    className = 'general';
                    break;
                case '无':
                    className = 'nothing';
                    break;
            }
            return className;
        }; 
    }}
    {{#  layui.each(d, function(index, item){ }}
        <tr>
            <td><i>{{ index + 1 }}</i></td>
            <td>{{ item.position }}</td>
            <td class="color-0182E2">{{ item.area }}</td>
            <td>{{ item.positionType }}</td>
            <td class="color-1079E9">{{ parseFloat(item.water) < 0 ? '--' : item.water }}</td>  
            <td><span class="{{ getClassName(item.waterFlag) }}">{{ item.waterFlag == '无' ? '无降水' : item.waterFlag }}</span></td>
        </tr>
    {{#  }); }}
</script>