Shulou(Shulou.com)06/02 Report--

Today, I would like to share with you the relevant knowledge about the use of Select and other Form form elements, which is detailed in content and clear in logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

With regard to Form form elements such as Select, some features become invalid when used

For example, the Search feature that comes with select:

In fact, when using Form form elements, if you need some of the functions that layui comes with (search, validation, etc.), please wrap them in tags and need to initialize the form object in order to render effectively. Similarly, tabs need to initialize the element object.

/ / Note: the tab depends on the element module, otherwise the functional operation layui.config ({base:'/ Resources/Script/'}) .use (['element',' common', 'form'], function () {var element = layui.element;//tab tab class can realize the function of var form = layui.form;// part of the form elements can be realized})

About the cancel button auto-submit event

Layui automatically submits the form when using the button, regardless of whether your button type is submit or not.

Solution:

1. As long as you put it in the tag, he will submit it automatically. When you use it, please put it outside the Form.

2, the return value of the click event of the button, be sure to return false, you can also organize form submission.

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 of key=value&key1=value2 (with Serialize ())

But here, if you get the select option of layui's form, he will hide your original select and render a select again, then you can't get the value of select through the above method, or honestly use $() .value, the default option must be assigned to value='', otherwise value will copy the text () value by default when rendering.

Initialization of the default value of laydate:

Please open isInitValue, personally feel that the document is not accurate, so configure the feeling of chicken ribs. In any case, the isInitValue must be clearly indicated before the default can be initialized.

About the asynchronous load parameters of the DataTable data table:

When the request is a layui request, the parameters default to pageIndex and pageSize, and you can configure your own pageIndex and pageSize names through the request parameter. The additional request parameters need to be encapsulated in where, and eventually layui will assemble them together and send them to the background.

With regard to the parameter configuration of response, there are four items that must be pointed out when drawing lines. Other parameters can be transmitted freely in the background and can be obtained in done.

About the linkage of provinces, cities and regions (local rendering at the control level)

Here, because layui does not have the concept of two-way binding, all we can do here is to retrieve the data every time, and then perform render rendering to refresh the control. Therefore, it is generally adopted through: form listening event + local rendering of form

Here, if you have a large amount of select and a large amount of data in the drop-down box, you can enclose the select in a div (class needs to contain layui-form and lay-filter attributes), and then form.select ('select', contains the value of the div:filter attribute of select), so that you do not have to refresh the select of all form, but render a select However, event listening can reach the control level (that is, lay-filter is annotated on the control).

From: form.on ("select (selLine)", function (data) {var template1 = "all options" For (var index in result.Data) {if (result.Data[ index] .LineId = = data.value) {template1 + = "" + result.Data[ index] .TimesName + "" }} $("# selTimes") .html (template1); form.render ('select','selLlocation');})

Implementation of self-increasing column of data list (two kinds)

1. Using the template engine

Template: col parameter of {{d.LAY_TABLE_INDEX+1}} table: cols: [[{title: 'serial number', templet:'# indexTpl', width: "6%}]]

two。 Use the parameter type:numbers in col (note that this parameter is added by layui2.2.0)

Cols: [[{title: 'serial number', type:'numbers', width: "6%"}]]

I recommend the second, the second way is to sort with paging, the second page is the index incremented from the previous page, and the sort sequence number will not change, the first is in sort, the sequence number will be from 10-1

Finally, for the background staff how to write the front-end code, that is, a little bit of the page that can be seen (we are mostly forms).

My advice is:

1, first understand the grid layout, some basic easy-to-use frames, there are layouts.

2. Modify the element style through chrome, then cp the modified style itself, and then package it into a css.

3, when using components, look at the structure carefully, do not destroy the original structure, it is easy to fail.

4. Do not copy demo completely, because there is still a great influence between demo, that is, elements are nested before, so be sure to read the rules clearly. For our backstage staff, these points are almost enough to be able to cope with most applications.

These are all the contents of this article entitled "what is the use of Select and other Form form elements?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.