Layui related form method

Now we make a layui form association. What is a form association? For example, there are two layui tables. After querying the data of the first table, then click on a certain button in the form. For a piece of data, based on the primary key id of this piece of data, query the data of the second form and backfill the data.

The first step is to prepare two tables and design the headers corresponding to the data.

These are the two tables I prepared. One is the VIP table and the other is the VIP points adjustment table. After a while, we will click on the data query of the VIP form. Output the data of the points adjustment form. I have already written the data query methods for these two forms on the controller side. Now let’s see what data needs to be displayed on the page.

The form on the page is displayed like this. The adjustment record table still has no data. This is because I logged out the request path of the adjustment form when initializing the form above. , there are not many ways to query with more conditions, just add a bar to the query path, and start querying when the conditions are met.

The following is a form-related event, which is a listening event. This event must be written in the method of loading the layui module. The meaning of the code here is to obtain a certain row of data in the VIP table, declare a variable for it with a click event, and assign a value to this variable. When assigning a value, it is usually assigned to the id. Later, the adjustment table will be queried based on this id. data. If you can query the data, you can output the value just assigned to the console to see if it is possible.

//获取VIP表行事件
            layuiTable.on('row(tabVip)', function (obj)
             {
                  var data = obj.data;//获取点击行数据
                  //标注选中样式
           		obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
           		
                    ////***单击选中单选框
                    obj.tr.find('div.layui-unselect.layui-form-radio')[0].click();
                    
                    var vipId = data.VipID;//vip类型id
                    
                    //控制台输出看看是否能获取到VIPid
                    console.log(vipId);
                    
                    //调整记录附件，根据VIPid查询对应的调整记录信息
                    tabAdjustmentRecord.reload
                    ({
                        //查询路径
                        url: '/DailyAffairs/VIPManege/AdjustmentRecord',
                        where:
                         { //设定异步数据接口的额外参数，比如设置多条件查询的参数
                            vipId: vipId
                        },
                        //从第一页开始
                        page:
                         {
                            curr:1
                        }
                    });
                });

Let’s take a look at the effect first:

#I clicked on the second piece of data, so the id output by the console is 2, which proves that we are The id is obtained successfully; if the VIPid of the VIP table is not obtained, there is no data in the adjustment table. This requires the console output to see whether there is an id output. If there is no id output, check whether the id is obtained incorrectly, or whether there is Pass the ID to the controller and check whether the controller that adjusted the record has written the corresponding ID to receive it.

For more informationlayui, please pay attention to the PHP Chinese websitelayui tutorialcolumn

The above is the detailed content of Layui related form method. For more information, please follow other related articles on the PHP Chinese website!