Во-первых, мониторинг событий формы
Сначала введите использование нескольких свойств
1, фильтр событий лей-фильтра
Эквивалент селектора, эксклюзивный селектор layui
2, атрибут подтверждения проверки
Значение атрибута может быть: обязательно, номер мобильного телефона, электронная почта, URL-адрес, номер, дата, личность. Это эквивалентно обычному суждению.Конечно, вы также можете определить свою собственную регулярность и сделать некоторые сложные суждения, такие как:
<input type="text" lay-verify="required">
//这里写required就是必填项的意思，相反phone就是手机号，
如果是多个判断可以这样：ay-verify="required|phone",手机号必填。
Что делать, если я хочу сделать сложные суждения? нам нужно сначалаСсылка на модуль формы
layui.use('form',function()
{
var form = layui.form;
//自定义一个验证器
form.verify({
account:[
'正则'
,'提示语句'
]
，pass:[
'正则'
,'提示语句'
]
});
})
Когда мы закончили писать правила проверки, нам нужно только записать определенное нами имя, такое как учетная запись выше, в поле lay-verify="account", после чего проверка этого правила будет завершена.
3. Lay-submit связывает элемент, запускающий отправку
В теге кнопки отправки ввода добавьте такой атрибут, и появится эффект проверки формы лайуи.
4. форма.по событию
form.on('event(lay-filter)',function(){
})
Среди них событием могут быть такие элементы, как радио, чекбокс, отправка и т. д. Lay-filter — это значение атрибута добавленного нами фильтра событий, например:
<input type="submit" lay-filter="go" lay-submit value="提交"/>
Да, это значение в этом lay-filter=" ". Ну, нам нужны только эти два атрибута для выполнения наших соответствующих событий.
Во-вторых, сформировать мониторинг событий
Прежде чем начать введение, мы можем взглянуть на идею с этой картинки. (сам нарисовал, немного некрасиво, хе-хе)
<table id="demo" lay-filter="table"></table>
1. Панель инструментов заголовка
Панель инструментов заголовка таблицы этого лайуи независима от таблицы, она прикреплена, то есть коробка ставится на стол, так что это легко понять!
Первый шаг, поэтому сначала мы построим коробку, но это особая коробка, и нам нужно ее спрятать.
<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 и название события layui-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;
}
});
Прочитав его, вы думаете, что это очень просто, события панели инструментов заголовка закончены, а события панели инструментов строки не просты? Делайте выводы друг о друге! Я рекомендую вам не читать следующее, взглянуть на официальную документацию и попробовать самому! Конечно, если вы не понимаете, вы все равно можете посмотреть следующее!
2. Панель инструментов строки таблицы
На самом деле причина почти та же, он тоже прикрепляет блок к таблице, но он есть в каждой строке, так что просто напишите код, который мы добавили в атрибут 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;
}
Ладно, вот, основные события закончились, что вы думаете об отдельных событиях, редактировании событий, это как кошки и тигры, вы можете просто посмотреть документы сами, это та же причина.
3. Перегрузка формы
Если не будет много лайков, я не буду писать, ха-ха, это на самом деле очень просто, каждый должен изучить это сам!
заключительные замечания
вам нужно принять жизнь