Layui event monitoring (form and data form)

First, the event monitor

first introduces the usage of several attributes

1. Lay-filter event filter
Prairing the selector, Layui’s exclusive selector

2, the Lay-Verify verification attribute

attribute value can be : Required required, Phone number, Email mailbox, URL URL, Number number, date, identity ID card. This is equivalent to the regular judgment, of course, you can define your own regular, do some complex judgment, for example:

 // Write Required is required The meaning of the phone is the mobile phone number, if it is a plurality of judgment, this: AY-VERIFY = "Required | Phone", the mobile phone number will be filled.    
How can I get the complicated judgment? We need first to reference the form module

Layui.Use (‘form’, function () {var form = layui.form; // custom A verifier Form.Verify ({Account: “, ‘提 示 语 语’], Pass: [‘regular’, ‘prompt statement’]});})

 When we write the verification rules, just write your own name, such as the above Account to Lay-Verify = "Account"It's just fine, then it is finished.   
3, Lay-Submit binding triggering submitted elements

Submit button tag in INPUT In order to add such an attribute, the verification effect of the Layui form will come out.

43]

4, form.on event

Form.on (‘Event (Lay-Filter) “

where Event can be Elements such as radio, checkbox, submit, where LAY -filter is our incident filter attribute value, such as:
   

Pairing this Lay-filter = “” The value inside, just if you only need these attributes, you can perform our corresponding events.
II, Form event monitor
   Before the introduction, we can 捋 捋 捋 捋 路. (Ourselves, a bit ugly, 嘿)  

Good Ok, let’s solve the problem !! First establish a Table tag

Layui事件监听的实现(表单和数据表格)

1. Head toolbar

This Layui’s head toolbar is independent of the form, it is attached, that is, put a box in the table, so popular Let’s take a box first, so we build a box first, but this is a special box, we need to hide it
  
View selected data

Batch deletion

Thoughts
  There are three attributes to note that the Layui-Hide hides the property, the name of the Layui-BTN-Group group, the name of the Lay-Event event. 
Layui.Use ('Table', Function () {var table = layui.table; table.render ({elem: '# Demo' // Table ID, URL: 'Data Interface', Toolbar: '# Toolbar' // Turn on the header, write our box ID, cols[[............]});});
Let’s get our form rendering, start the event!

Table.on (‘Event (Lay-filter), function (obj) {// This is format, Event has Toolbar header events, Tool line labels Events, edit editing events, etc., of course, the brackets are the lay-filter attribute we set to the table! Obj is all the data in this table, we can console.log (obj) to see what data !!}

Good gridAlmost introduced, starting the top of the top

Table.on (‘Toolbar (Table)’, Function (OBJ) {// I set the lay in the table- Filter is called Table Var Checkstatus = Table.Checkstatus (‘DEMO’) / / Table ID, get selected in line // 嘿嘿, I’m here, I seem to say how the check box is hit, very simple, {type: ‘checkbox’, Fixed: ‘left’}, written to the value of slam switch (obj.event) //, perform different judgment {case ‘getall’: layer.msg (json.stringify (checkstatus.data); Break; case ‘getnum’: layer.msg (json.stringify (checkstatus.data.length); break; case ‘dele’: // This is a batch of deletion I played, the truth is almost, traversed to ID ID Transmit to the background processing! VAR a = []; for (var i = 0; i
   
Do not feel very simple, the head toolbar event It’s not easy to finish the work of the toolbar? For three! I recommend you don’t have to look at it, look at the official document, try it yourself! Of course, you can still look at the following!
2, Table toolbar

It is also true, but also attached to the form in the form, but every line is, so take us Added code, wrote COLSI am fine in sex! !
   
Modify

Delete
  < 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;
      
    }
    
  }); Ok, ok, there is nothing special introduction, the property is the same! Start JS code 
Table.Render ({Elem: ‘, URL:’, cols:[[……………. {Toolbar: ‘#tool’ , Title: ‘Operation’}]});

Oh, omitted, omitted.

Event monitor

This is simple, however, before the selection status is checkstats, right! ! !

We are not available here, haha, directly obj.data can get data
    3, form Overload 

I am like it, I will not write, haha, it is actually very simple, everyone has to study their brains!

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.
                    
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment