Jquery easyui note

1. today, easyui-tabs is used for the easyui layout page. different from the previous one, easyui-tabs is directly used on the body Tag. At the beginning, there was no problem with the page display, however, after an hour, Google's browser and Firefox cannot display pages normally. The opposite is that the magic IE8 shows ~~~~~~~~

It took me more than two hours to solve this problem, and I did not solve it with various CSS methods. Previously I thought it was very useful to use overflow: auto; min-height: 10px; height: auto; it also becomes invalid. The final solution is tough. Wrap the content in a div label and refresh the page ,~ ~ ~

2. linkbutton can be directly created in the HTML Tag without specifying an ID and then executed in the initialization function, because there is nothing to define in the linkbutton, except for one icon class (iconCls). In addition, the linkbutton methods enable and disable are a bit tricky. When disable, the button can still be clicked by clicking the departure event ............ You need to encapsulate it yourself.

3. When the easyui component is instantiated using javascript, the previous jquery object is returned after instantiation. However, if the method is called, no jquery object is returned.

4. initialize combobox, which can be in $ (selector ). combobox ({...}) then, combobox ('select', value) is called directly to display the specified entry. The select method triggers the onSelect (rowData) event. After an entry is selected, the form element represented by the selector does not have the selected value. In this case, you need to process it in onSelect. Otherwise, the following is an example:

1 $ (selector ). combobox ({2 textField: 'xxxxxxxx', 3 valueField: 'xxxxxxxxxxxx', 4 url: 'xxxxxxx. php ', 5 onSelect: function (row) {// The this object in this callback function does not point to $ (selector) 6 var valueField = $ (selector ). combobox ('options '). valueField; 7 var value = row [valueField]; 8 $ (selector ). val (value); 9} 10 });

 

If you call the combobox method on a non-combobox element, an error is reported, for example, TypeError: $. data (xxx, "combobox"). xxxxx.

If you call the easyui element proprietary method on any non-jquery easyui element, an error is reported, that is, TypeError: $. data (tag, easyuiElement). method.

You can use loader (params, success, error) to redefine the process of obtaining data from the server. Here, you can modify the data from the server and pass the modification to the success parameter.

5. the methods in messager seem to be single-sample, for example, $. messager. after progress () is enabled, you must use $. messager. progress ('close'). This method does not return a value.

6. if the field in the datagrid is specified with a width or is not specified, the content is hidden when the size of the cell is exceeded. If the field is specified with align: true, the cell width can be adjusted according to the content, you can also call the datagrid ('autosizecolumn') Implementation in onLoadSuccess. You can use LoadFilter to modify the data from the server before displaying the data. After the modification, the datagrid will display the modified data. loadFilter must return the modified value; otherwise, an error will be reported.

7. if the easyui component has the formatter attribute, you can define a function to return an HTML clip to format the content to be displayed, for example, formatter: function () {return '<a href = "#"> nimeide </a> ';}

8. the layout components in easyui have the resize method. When fit is set to false, you can call the resize method to adjust the size of these components. When you call them, they are top-down, call the resize of the parent component first, and then call the resize of the child component. Call the resize function to fill the component with the parent container (default ), when the parent component does not resize, its size remains unchanged. At this time, the result of calling the child component resize is the same as its own size, so there is no effect.

9. The layout component in easyui seems to have a default size of 0? Therefore, either define fit = true or specify its width and height. To ensure the final display effect, you can first define a series of divs to build a page framework to ensure the overall skeleton of the page. Inside these divs, layout components are used as their child elements, and fit = true

10. The extractor method of the panel can modify data from the server. Similarly, the data must be returned after modification.

11. How can I adjust the size of the datagrid toolbar? The toolbar is preferably a block-level element (form will cause the paging bar to be unable to be displayed). By default, block-level elements are horizontally filled and must be visible during overflow. Auto height: overflow-y: auto; height: auto;

12. when using the easyui form component, do not directly $ (ID) according to the input ID ). val () is used to obtain the value. In this way, the value becomes invalid in some cases. You can directly use the corresponding methods of these components, such as getValue.

13. take a closer look at the datagrid dom and you will find many things. Each row (tr) has a datagrid-row-index attribute. You can get this index and then $ (grid ). the datagrid ('getrows ') [index] can get the corresponding data of this row.

14. it seems that the window is not displayed at the initial stage, and is displayed after the event is triggered. closed = true can be used for initial display, and $ (window) can be used for display ). window ('open'); close the window: $ (window ). window ('close ')

15. when you place validatebox and other elements in the window, when the window is closed but the validabox verification is not passed, you will see that the validation prompt of validatebox still exists (usually in the upper left corner). At this time, use form. reset () is OK, but make sure that validatebox is in form (form in dom. the reset () method sets all input in this form to the initial state ).

16. when debugging the datagrid, if there is no suitable ready-made url to provide data, you can write an object that complies with the datagrid data format and then use $ (grid ). datagrid ('loaddata', data) Loading

17. display common messages. $. messager. alert is enough to solve the problem. If you want to achieve some cool effects, you can use $. messager. show ()

18. If you want to edit the data in the datagrid, you can add the editor attribute when defining the field, which is generally satisfied by default. However, I encountered an abnormal problem. The columns in the current row do not always need to be edited. For example, if there are two columns: user name and password, edit the password if the password is very simple during editing, on the contrary, editing is not allowed. This problem becomes a little tricky. Later I found that the editor attribute in the column options can be dynamically modified to enable/disable the editor. The Code is as follows:

1 var fields = grid. datagrid ('getcolumnfields '); // obtain all fields used. 2 var colOpt = grid. datagrid ('getcolumnoption ', field); // obtain column option 3 colOpt. oldEditor = colOpt. editor; // back up the original editor 4 colOpt. editor = null; // disable editor 5 colOpt. editor = colOpt. oldEditor; // enable the editor

19. it is not recommended to edit styles on the jquery easyui element, because your styles may overwrite jquery easyui's own styles, so the display effect crashes, especially the buttons, the span style under the button is very easy to get rid.

20. Many jquery easyui elements have default borders. When these elements are stacked together, the border overlapping display effect is very poor. Therefore, add border = false to all unnecessary elements.

------------------------------------------ The following is the source, but the vulnerability is too large --------------------------------------------

As a background management system in last November, The jquery easyui framework was used to complete the project last year. It has been a few months since now and has not been summarized yet. Now that we want to activate the blog, simply start with jquery easyui. In general, this framework is still possible. Although there are some minor problems, it does not affect the framework. If there are bugs, it can be solved with a slight flexibility. The jquery easyui version I used is 1.3. I don't know if there are any updates. It has been useless for a long time, but I still remember some things.

Jquery easyui provides a set of controls, including panel, form control set, button, and grid. Let's talk about panel first. All panel components are based on panel. panel functions are actually quite powerful. You can understand panel in this way. A panel is like a windows XP desktop window, there is a title, a few buttons (maximize, minimize, close, etc.), and then add a content area. Based on your needs, you can discard the title, buttons, and so on. These are all small cases, it is easy to do. By default, You need to manually set the height and width of a panel. Otherwise, you cannot see any effect. In a special case, the width and height values can not only be numbers, it can also be 'auto'. Have a try! I have just said that panel is very powerful, but if you only look at panel, I don't think you can see anything. The strength of panel is embodied in its sub-components: tabs, layout, window, dialog, messager. the tabs component allows you to manage content in a way similar to browser labels. Here, let's talk about the problems I 've encountered. It is best to add fit = true directly to the tabs component, because tabs occupies the entire parent container (at least I do), if your tabs occupies the entire body area, it is best not to add the easyui-tabs class directly on the body, because it may become some inexplicable bugs that I once encountered, and then create a div under the body, let it apply the easyui-tabs class. Next we will talk about layout, the second panel component. layout is a very important component and is very slow when content changes. Normally, layout is rarely used in the Middle-East, West, and North-South areas, the upper and lower type directly writes the div. By default, the div is the top-down, left-right type, and uses the div to build the skeleton, and then put these div float: left on the line, there was a colleague, layout or table is used as long as the layout is used. It is a headache for me to view its code. If you want to use the layout component, make sure that all of your region is correctly written. Otherwise, it will be difficult for you. In addition, layout needs to be controlled during browser window scaling, otherwise, it may not become smaller along with the browser window. Next, let's talk about windows and dialog. These two components are similar. If you are not picky about them, you can use them at will. By default, if you move the window component, even if you move it out of the browser's viewport area, it is also allowed, but in this way, if you move the title part to a position you cannot see and release the mouse, you will be miserable and you will find that you cannot move it again, I encountered this problem at the beginning, and then solved it with restrictions in the onMove event. Here it is necessary to say that onMove is an event inherited from the Panel, if you want to restrict all the window components, it will overwrite the onMove method of the window component. The onMove method that overwrites the panel or dialog has no effect.

 

Next we will talk about the form control set. This form control set is good, and some components provided are very useful, especially validatebox. You can write a lot of verification methods based on your own needs. Don't expect it to provide it by yourself, by default, the easyui value Provides email, url, length, and is not very practical. The controls in form all have the following features: <input id = "ttt" type = "text" name = "username" class = "easyui-datebox"/>. After you select a date, if you use $ ("# ttt "). val () gets the selected time, so you are wrong. You cannot get it at all. To get it, you must $ ("# ttt "). datebox ('getvalue'), why? You can use tools such as firebug to open the page. You will find that all the inputs you have written have been hidden. Instead, jquery easyui components are used for display, interact with you.

 

Let's talk about the button. Actually, the button is very simple. It should be noted that the button provides the disable method, but this disable has its table, but it has no god. When you disable a button, click the button, the onclick event is still triggered, so you need to make your own judgment in event processing. Also, the button does not need to be placed in js separately $ (selector ). linkbutton ({...}), because there are very few button configurations, I just wrote an iconCls and put it in html,

 

In the end, grid is commonly used as the datagrid, which is very powerful. More than 50% of the interfaces in my project are it. When using the datagrid, it is best to do it directly in js, because when writing in html, you must write thead and th, otherwise jquery eaysui does not recognize it. The most important thing in the datagrid is the toolbar. All operations are concentrated here. If you only need a simple toolbar, the official example is enough. If you want to customize the toolbar, when there are coombox, datebox, linkbutton, etc, it is best to write a toolbar separately. Writing a toolbar has a place to note. You need to write the height of the toolbar, otherwise you will not see any effect, the default toolbar height is 0, but it is troublesome to change the height of a fixed toolbar. In this case, you can add the style: height: auto; min-height: 28px to the toolbar; in this way, the height of the toolbar is the automatic height, and the 28px behind it is the default height of the toolbar. You can modify it as needed. Another problem is that the element of the toolbar can be div or form. I used form before, and then some inexplicable problems occur (the problem itself cannot be investigated, forgot ). The toolbar problem is fixed, and the rest is the data. You can modify the data in loadFilter, but the modified value must be returned after the modification is completed. When the cell data is displayed, you can change the display effect by adding the formmater function attribute to the column. It is best to add fit = true to the datagrid, so that the browser can zoom in and out when it is changed.

 

All of the above are based on experience and I didn't know how to write the code. If you have any questions, leave a message and I will reply to you as soon as possible.