學習layui分享
嘿，我回來。感受很久很久沒有維護博客了。 這篇文章應該是2019年第一篇文章。。 又換一份工做， 是否是感受博主一點都不穩定，一年換了三家公司呵呵呵呵呵。。。css
既然說到這裏作爲一個北漂打工來講，我真心以爲穩定點好，感受真的老了。。。 選工做必定要選好公司！！！選好公司！！！選好公司！！！
北漂是一種情懷，可是沒人會認這種情懷，在這適者生存的大環境裏你只能加倍努力，充實本身。。加油北漂游子。html
最近玩layui回顯玩的挺爽的。。給你們分享一下。前端
說到寫layui，我前兩家公司基本沒寫過前段代碼，作app開發和小程序開發作多了，真的感受很省事，直接提供API接口就能夠了。一個超級牛逼的前段真的很讓後端省勁啊。給你們爆一張前端技術超牛逼的小哥哥（單身哦！）。
我剛到我新換的這家公司，寫layui代碼都寫哭了。。各類回顯--數據表格回顯、複選框回顯、單選框回顯 各類js各類寫，第一次用layui感受這麼難用。很晚的時候獨自發了一個朋友圈，北上廣深不相信眼淚（加油~北漂游子們 越努力越幸運！）而後通宵把layui文檔吃了一遍。。真的好艱難。。。ajax
熬過來了，就是春天呢。不過如今layui基本的開發我感受已經沒問題了。json
終、 個人故事結束了。如今給你們分享一下layui爬過的坑，已經各類回顯的使用。小程序
先給你們介紹一下什麼是layui 後端
layui的存在價值（摘自百度百科）微信
甩一個layui的官網 點我chua的一下就進官網了mybatis
- layui官網下載layui的開發包 目錄結構以下：
- 而後就能夠進行開發了。
我給你們甩一個很簡單的數據表格使用： 點我快速進layui的數據表格DOCapp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動態數據表格dev</title>
<link rel="stylesheet" href="layui.css路徑" media="all">
</head>
<body>
<table id="dataTable" lay-filter="user"></table>
<script src="layui.js路徑"></script>
<script>
//使用layui的table
layui.use('table', function(){
//用layui的table
var table = layui.table;
//第一個實例
serach = table.render({
elem: 'dataTable'
,height: 312
,url: 'user/getUsers' //後臺數據接口路徑若是有參數直接用get形式發送？拼接
,page: true //開啓分頁 layui的分頁我以爲真的好強大。。。直接開啓而後就會日後臺傳輸頁面和每頁顯示大小layui分頁加上mybatisPlus一塊兒用真的是絕配。
,cols: [[ //表頭
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}//field是數據接口返回的字段名稱 自動填充數據
,{field: 'username', title: '用戶名', width:80}//width ：寬度 title數據表格的標題
,{field: 'sex', title: '性別', width:80, sort: true}//sort排序
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '簽名', width: 177}
,{field: 'experience', title: '積分', width: 80, sort: true}
,{field: 'score', title: '評分', width: 80, sort: true}
,{field: 'classify', title: '職業', width: 80}
,{field: 'wealth', title: '財富', width: 135, sort: true}
]]
});
});
</script>
</body>
</html>
以上就是數據表格的基本使用。
下面是我本身總結的經常使用問題解決方案。
Q：返回的數據格式怎麼出 答：隨意格式取出便可，把下面的代碼放入便可取參數。
parseData: function (res) { //res 即爲原始返回的數據
return {
"code": 0, //解析接口狀態
"msg": "ok", //解析提示文本
"count": res.total, //解析數據長度
"data": res.rows //解析數據列表
};
}
Q:數據表格的序號怎麼處理： 答：直接在標題添加下面代碼
//表頭
{
field: 'index',
title: '序號',
width: '6%',
templet: '#indexTpl'
}
<!--序號自增-->
<script type="text/html" id="indexTpl">
{{d.LAY_TABLE_INDEX+1}}
</script>
Q:若是把數據表格根據狀態回顯相應的信息 好比1可用 0不可用 答：
{
field: 'status',//後端返回的字段值
title: '狀態',
templet:'#statusTypes'
}
<script type="text/html" id="statusTypes">
//d是固定寫法不用管。
{{# if (d.status=='1') { }}
<span>可用</span>
{{# } else if(d.status=='2'){ }}
<span>不可用</span>
{{# } else{ }}
<span>數據有誤</span>
{{# }}}
</script>
Q:數據表格的查詢 答： 1.給數據表格加一個名字 2.寫查詢方法
//監聽查詢按鈕
form.on("submit(query)", function (data) {
console.info(data)
var keyWord = data.field.keyWord;
//表格從新加載
search.reload({
where: {
keyword: keyWord
}
});
return false;
});
Q:數據表格的回顯 數據表格放到後臺便可。返回參數map加上這個參數便可 以上就是數據表格的基本使用歡迎你們能夠給我交流。
下面繼續跟你們分享一下彈出層。 點我快速進入彈出層地址：
layer.open({
type: 2,//layui類型
title: ['添加用戶'],
area: ['73%', '90%'],//彈出層的大小
shadeClose: true,//是否顯示關閉按鈕
btnAlign: 'c',//
btn: ['肯定', '取消'],//彈出層按鈕
content: 'user_add.html',//彈出層頁面
success: function (layero, index) {
打開彈出層執行方法
},
yes: function (index, layero) {
//點擊彈出層肯定執行方法
},
cancel: function (index, layero) {
//取消彈出層執行的放
}
});
彈出層多少東西，能夠從layui直接粘代碼，就是最後三個按鈕事件使用方法。 給你們說一下下拉框的數據動態填充
<div class="layui-inline">
<label class="layui-form-label">KingYiFan是男是女：</label>
<div class="layui-input-inline layui-form">
<select lay-verify="" lay-search="" id="sex">
<option value="">請選擇</option>
</select>
</div>
</div>
//初始化下拉框數據 頁面數據
function initSexData() {
$.ajax({
type: "get",//接口請求方式
url: "initSex",//接口地址
async: false,//是否異步
dataType: 'json',
success: function (res) {
$.each(res, function (index, data) {
var option = $("<option>").val(data.id).text(data.sex);
$("select[id=sex]").append(option);
});
}
});
}
以上是下拉框動態添加 下面是數據下拉框回顯
$("[name='sex']").val("1");
以上就是下拉框的回顯。layui是雙向綁定的因此直接賦val值便可回顯
//多選框賦值
var sex = $("input[name='sex']");
for (var i = 0; i < sex.length; i++) {
var val = sex[i].value;
if (data.sex == val) {//data的sex是後臺傳過來的
sex[i].checked = true;
}
}
無論怎麼操道別忘記
layui.form.render();//從新繪製表單，讓修改生效
因爲有公司信息我部分打碼，請你們理解。
這就是layui學習分享，哪裏不懂能夠私信我哦！下一篇文章給你們分享layui動態三級菜單展現。
鼓勵做者寫出更好的技術文檔，就請我喝一瓶哇哈哈哈哈哈哈哈。。
微信：
支付寶：
感謝一路支持個人人。。。。。 Love me and hold me QQ:69673804（16年老號） EMAIL:69673804@qq.com 友鏈交換 若是有興趣和本博客交換友鏈的話，請按照下面的格式在評論區進行評論，我會盡快添加上你的連接。
網站名稱：KingYiFan’S Blog 網站地址：http://blog.cnbuilder.cn 網站描述：年少是你未醒的夢話，風華是燃燼的彼岸花。 網站Logo/頭像：[頭像地址](https://blog.cnbuilder.cn/upload/2018/7/avatar20180720144536200.jpg)
相關文章
- 1. 學習layui分享
- 2. layui學習筆記——分頁
- 3. layui學習
- 4. layui學習——day01
- 5. 學習分享
- 6. Layui 學習整理
- 7. Layui學習筆記
- 8. RocketMQ學習分享
- 9. Python學習分享
- 10. STM32學習分享
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 學習layui分享
- 2. layui學習筆記——分頁
- 3. layui學習
- 4. layui學習——day01
- 5. 學習分享
- 6. Layui 學習整理
- 7. Layui學習筆記
- 8. RocketMQ學習分享
- 9. Python學習分享
- 10. STM32學習分享