先介紹一下幾個屬性的用法ajax
至關於選擇器,layui的專屬選擇器bash
屬性值能夠是 :required必填項, phone手機號,email郵箱,url網址,number數字,date日期,identity身份證。這個至關於正則判斷,固然你也能夠定義本身的正則,作一些複雜的判斷,例如:ide
<input type="text" lay-verify="required">
//這裏寫required就是必填項的意思,相反phone就是手機號,
若是是多個判斷能夠這樣:ay-verify="required|phone",手機號必填。
複製代碼
若是說我要複雜的判斷怎麼弄呢? 咱們須要先引用form模塊工具
layui.use('form',function()
{
var form = layui.form;
//自定義一個驗證器
form.verify({
account:[
'正則'
,'提示語句'
]
,pass:[
'正則'
,'提示語句'
]
});
})
複製代碼
當咱們,寫完驗證規則後,只須要把本身定義的名字,如上面的account寫到lay-verify="account"裏面就行了,那麼對這個規則驗證就弄完了。ui
在input的submit按鈕標籤裏,添加這麼一個屬性,那layui表單的驗證效果纔會出來。url
form.on('event(lay-filter)',function(){
})
複製代碼
其中,event能夠是radio,checkbox,submit等元素,其中的lay-filter就是咱們加的事件過濾器屬性值,好比:spa
<input type="submit" lay-filter="go" lay-submit value="提交"/>
複製代碼
對就是這個lay-filter=" "裏面的值,好了就只須要這倆個屬性,就能夠執行咱們相應的事件了。code
在開始介紹前,咱們能夠從這張圖中,捋一捋思路。(本身畫的,有點醜,嘿嘿)orm
<table id="demo" lay-filter="table"></table>
複製代碼
這個layui的表頭工具欄是獨立於表格的,是附加上去的,就是把一個盒子放到表格上面,這樣通俗易懂了吧!
第一步,因此咱們先創建一個盒子,可是這是一個特殊的盒子,咱們須要對其隱藏
cdn
<div class="layui-hide layui-btn-group" id="toolbar">
<button class="layui-btn " lay-event="getall">查看所選數據</button>
<button class="layui-btn " lay-event="getnum">查看所選數量</button>
<button class="layui-btn layui-btn-danger" lay-event="delall">批量刪除</button>
</div>
複製代碼
思考問題
其中有三個屬性須要注意,layui-hide隱藏屬性,layui-btn-group組按鈕,lay-event事件的名稱。
如何去辨別咱們的操做呢,就是對layui-event設置的不一樣的值,來進行不一樣的行爲。
第二步,咱們在表格模塊裏引入咱們的頭部盒子,而後監聽事件,來看咱們的代碼吧!
layui.use('table',function(){
var table = layui.table;
table.render({
elem:'#demo'//表格ID
,url:'數據接口'
,toolbar:'#toolbar'//開啓頭部欄,寫入咱們的盒子id
,cols[[…………]]
});
});
複製代碼
到此爲止咱們的表格渲染就完畢了,開始事件!
table.on('event(lay-filter)',function(obj){
//這是格式,event有toolbar頭部欄事件,tool行標籤事件,edit編輯事件,等等,
括號裏的固然就是咱們給表格設置的lay-filter屬性啦!
obj是這個表格裏全部的數據,咱們能夠console.log(obj)來查看有哪些數據!!
})
複製代碼
好了格式差很少介紹完了,開始接着上面的打
table.on('toolbar(table)',function(obj){//我給表格設置的lay-filter叫table
var checkStatus = table.checkStatus('demo')//表格id,獲取選中行
//嘿嘿,到了這,我好像說複選框怎麼打了,很簡單的,{type:'checkbox',fixed:'left'},寫到cols裏
switch(obj.event)//對lay-event的值,進行不一樣的判斷
{
case 'getall':
layer.msg(JSON.stringify(checkStatus.data));
break;
case 'getnum':
layer.msg(JSON.stringify(checkStatus.data.length));
break;
case 'delall':
//這是我本身打的一個批刪,道理都差很少,遍歷拿到id傳到後臺處理!
var a = [];
for (var i = 0; i < checkStatus.data.length; i++) {
a.push(checkStatus.data[i].ProductID)
}
console.log(checkStatus)
let strid = a.toString();
let num = checkStatus.data.length;
if (num != 0) {
$.ajax({
url: '/JD/ShopDelAll?strid=' + strid
, type: 'Delete'
, success: function (d) {
layer.msg("刪除了" + num + "條數據");
location.href = '/JD/ShopList';
}
})
}
else {
layer.msg("至少選擇一個!")
}
break;
break;
}
});
複製代碼
看完有沒有以爲很簡單啊,頭部工具欄的事件就完了,對於行工具欄的事件還不簡單嗎? 觸類旁通啊!我推薦你不用看下面了,看看官方文檔,本身去試試吧!固然了,不明白的仍是能夠看看下面的嘞!
其實道理都差很少啦,也是把一個盒子附加到表格裏,只不過是每行都有,因此把咱們添加的代碼,寫道cols屬性裏就行了!!
建立一個盒子
<div class="layui-hide layui-btn-group" id="tool">
<a class="layui-btn layui-btn-warm" lay-event="particulars">查看</a>
<a class="layui-btn layui-btn-normal" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-danger" lay-event="delid">刪除</a>
</div>
複製代碼
好了,好了,沒什麼特別介紹的,屬性都同樣!開始js代碼
table.render({
elem: ''
, url: ''
, cols: [[
………………
{ toolbar: '#tool', title: '操做' }
]]
});
複製代碼
哎呦,省略了,省略了。
事件監聽
這個就簡單了哈,咋們前面獲取選中狀態是否是用了checkStats,對!!!
咱們這裏不用了,哈哈,直接obj.data就能獲取數據
table.on('tool(table2)', function (obj) {
switch (obj.event) {
case 'particulars':
location.href = "/JD/Particulars?productID=" + obj.data.ProductID;
break;//獲取id跳轉到詳情頁
case 'delid':
$.ajax({
url: '/JD/ShopDelAll?strid=' + obj.data.ProductID
, type: 'Delete'
, success: function (d) {
obj.del();
layer.msg("刪除成功");
}
})
break;//這是個人一個ajax刪除方法了,記得刪除後要有obj.del()哦,不然數據是不會更新的!
case 'edit':
layer.msg("功能暫未開放,你沒有權限");
//嘿嘿,修改和刪除差很少啦
break;
}
複製代碼
好了,到這,基本的事件就完了,想什麼行單機事件啊,行編輯事件啊,這些照貓畫虎,本身看看文檔就會了吧,都同樣的道理
贊很少,我就不寫了,哈哈,其實挺簡單的,你們要本身動腦去研究!
你須要去擁抱生活