Summary of the use of data-type controls in easyui, Summary of easyui-type controls

Summary of the use of data-type controls in easyui, Summary of easyui-type controls

Easyui is a very good jquery plug-in, no matter from performance to appearance, compatibility is quite awkward, General Data Controls (such as datagrid, tabs, tree) it is best to separate initialization from data binding during operations. First think about why?

Let's talk about the disadvantages:

1. The most common operation at the front-end is the addition, deletion, modification, and query operations. Imagine if initialization and binding data are performed together, it would not have been repeated during initialization.

2. Switch controls such as tabs usually have to be embedded with other data-type controls. Each switch requires initialization of nested controls. Low efficiency and more importantly, it consumes unnecessary browser memory.

Ps: I have done a real-time refresh project. The dashboard is nested in the tabs. during real-time refresh, if both initialization and binding data are done, the datagrid will flash (the column width of the datagrid changes back and forth with the refresh ). The reason is that each time before data is initialized, the default column of the datagrid is changed to 0, so that the column width is refreshed from 0 to the specified width. Oh, isn't it really cool. I initially thought it was an easyui bug. I think it is still my problem.

Divergence: if some special services, such as dynamically updating column names, or functions in column (such as styler and formatter), do not "separate" Services (initializing and binding data.

Solution:

1. A common practice is to write all rules in column style, formatter, and other functions first. Changes in the data returned by the background are not affected. This is also quite scientific.
2. There are also unconventional practices. After obtaining data, you can obtain the columns object of the dg and adjust the style, formatter, and other functions in the column. The Code is as follows:

$ ("# Dg "). datagrid ('loaddata', obj); // obtain the dg column name var fileds =$ ("# dg "). datagrid ('getcolumnfields '); for (var I = 1; I <7; I ++) {// obtain the specific column object var column of dg =$ ("# dg "). datagrid ('getcolumnoption ', fileds [I]); column. styler = function (value, row, index) {if (obj. rows [index]. g + ''+ I +'' = "1" & index> 1 & index <= 25) {return 'color: red ;';}}}

For example, the second method is suitable for dynamically updating column names.

There are basically so many disadvantages, so the benefits are: Haha .....

Therefore, the Data Control Using easyui is better to separate initialization and data binding.

Don't attach some of your experiences on easyui. I hope it will be useful to beginners:

1. easyui container components use html for better initialization, while data-type controls use scripts for initialization, controllability, and maintainability.

2. All easyui data controls should be placed in the easyui container component. For example, the parent level of the datagrid should be panel.

3. fit is full Based on the parent level. Remember to look for him when the effect is poor.

4. The center must exist in layout. If layout only exists in center, use panel directly.

5. When using a large number of easyui controls, you can create util. js first to initialize various controls. You can directly reference updates when using them.