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);
});
}
}
},
});表格加分页渲染方法
用户名
联系方式
部门
区域
版本
所属单位
是否安装
是否在线
在线时长
模板
分页器渲染和点击事件
设置全局变量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渲染
$.ajax({
url: IP + '/BaseManage/Organize/GetTreeJson',
dataType: 'json',
success: function (res) {
if (res instanceof Array && res.length != 0) {
var html = '';
for (var i = 0; i < res.length; i++) {
html += '';
}
$('#units').html(html);
form.render('select', 'select-form');
} else {
$('#units').html('');
}
}
});首页导航栏自定义
样式
在layui-header下的layui-logo同级别下插入导航栏
根据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: ''
});
} else {
index.loadHome({
menuPath: 'home/index.html',
menuName: ''
});
}
$('.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: ''
});
} else {
index.loadHome({
menuPath: 'home/index.html',
menuName: ''
});
}laytpl模板中使用函数