Introduction to the use of Form form elements such as Select

Regarding Form elements such as Select, some features will become invalid when used.

For example, the Search function that comes with select:

In fact, when using the Form form element, if you need some of the functions that come with layui (search, verification, etc.), please enclose it with

tags and need to be initialized. form object, so that rendering can take effect. Similarly, tabs need to initialize the element object

//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.config({
    base: '/Resources/Script/'
})
.use(['element', 'common', 'form'], function () {
    var element = layui.element;//tab选项卡类的功能才能实现
    var form = layui.form;//部分表单元素功能才能实现
});

About the automatic submission event of the cancel button

layui will automatically submit the form when using the button, no matter you The button type is not submit.

Solution:

1. As long as you put it inside the

tag, it will be automatically submitted. For general use, please put it outside the Form.

2. The return value of the button click event must return false, and form submission can also be organized.

Note that there is a small detail here, that is, the form elements enclosed by the Form form. You can use Jquery's Seriliaze method to quickly encapsulate the form result set: (I encapsulate a JSON object)

var formData = $("#infoForm").serializeArray();
           var data = {};
           $.each(formData, function (index, item) {
               data[item.name] = item.value;
           });

Or generate a string with key=value&key1=value2 (using Serialize())

But if you get the select option of the layui form here, it will hide your original select and re-render it. A select. At this time, you cannot get the value of the select through the above method. You can still use $().value. The option of the default option must be assigned value='', otherwise when the value is rendered, the text() value will be copied by default. .

The default value initialization of laydate:

Please turn on isInitValue, personally think the document writes It's not accurate, and it feels like a useless configuration. Anyway, isInitValue must be explicitly pointed out before the default value can be initialized.

About the asynchronous loading parameters of the DataTable data table:

Regarding request, when making a layui request, the parameters include pageIndex and pageSize by default. You can pass the request parameter Go configure your own pageIndex and pageSize names. Additional request parameters need to be encapsulated into where, and finally layui will assemble them together and send them to the background.

Regarding the response parameter configuration, four items must be pointed out when drawing lines. You can transfer other parameters in the background at will and get them when done.

About province and city linkage (local rendering at the control level)

Because layui does not have the concept of two-way binding, what is done here can only be repeated each time Get the data, then render and refresh the control. Therefore, what is generally adopted is the partial rendering of the form listening event through: form -form and lay-filter attributes) enclose the select, and then perform form.select('select', the div containing the select: filter attribute value), so that you do not need to refresh all form selects, but render a certain select , but event monitoring can go to the control level (that is, the lay-filter is marked on the control).

<div class="layui-form" lay-filter="selLocation">
                            <label class="text_label">出发站:</label>
                            <div class="layui-input-inline">
                                <select id="selLocation" name="selLocation" class="text_input" lay-filter="selLocation" lay-verify="" lay-search></select>
                            </div>
                        </div>

form.on("select(selLine)", function (data) {
                       var template1 = "<option value=&#39;&#39;>全部选项</option>";
                       for (var index in result.Data) {
                           if (result.Data[index].LineId == data.value) {
                               template1 += "<option value=&#39;" + result.Data[index].TimesId + "&#39;>" + result.Data[index].TimesName + "</option>";
                           }
                       }
                       $("#selTimes").html(template1);
                       form.render(&#39;select&#39;,&#39;selLlocation&#39;);
                   })

Implementation of self-increasing columns of data list (two types)

1. Use the template engine

模板：
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
table的col参数：
cols: [[
            { title: &#39;序号&#39;, templet: &#39;#indexTpl&#39;, width: "6%" }
]]

2. Use the parameters in col type:numbers (note that this parameter is new in layui2.2.0)

cols: [[
            { title: '序号', type:'numbers', width: "6%" }
]]

I recommend the second method. The second method is sorting with paging. The second page is an index that increases from the previous page, and The serial number will not change during sorting. In the first type, during sorting, the serial number will change from 10-1

. Finally, as for how the back-end staff writes the front-end code, it is slightly visible. Some suggestions for the pages (most of them are forms)

My suggestions are:

1. First understand the grid layout and some basic frameworks that are easy to use. All have layouts.

2. Use chrome to modify the element style, then cp the modified style yourself, and then encapsulate it into a css.

3. When using components, carefully look at the structure and don’t Destroying the original structure can easily lead to failure.

4. Don’t copy the demo completely, because the demos still have a big impact, that is, the elements are nested before, so be sure to read the rules clearly. For our backend staff, knowing these few points is almost enough, and we can already handle most applications.

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of Introduction to the use of Form form elements such as Select. For more information, please follow other related articles on the PHP Chinese website!