Jqueryeasyui Study Notes

What is JQuery Easyui?

The jquery Easyui is a set of jquery-based UI plug-ins, and the goal of jquery Easyui is to make it easier for web developers to create a feature-rich and beautiful UI interface. Developers do not need to write complex JavaScript, and do not need to have a deep understanding of CSS styles, developers need to understand only a few simple HTML tags.

Plainly is for our back-end developers to build the front-end artifact, we do not have to write complex JavaScript code, and do not have a deep understanding of CSS, as long as the ability to understand and modify the HTML can make beautiful pages, is not feeling very good.

Definition: jquery-based UI plug-in collection

Features: Create a feature-rich and beautiful UI interface

What are the benefits of JQuery Easyui?

　　1, based on the jquery user interface plug-in collection

2. Provide necessary functions for some JS applications that are currently used for interaction

3. Easyui supports two ways of rendering, namely JavaScript and HTML tags (e.g. class= "Easyui-textbox")

4. Support HTML5 (via data-option attribute)

5, developers can save a lot of time

6, support extension, can be based on their own needs to expand the control

Spit Groove: Just graduated from the time I remember that the company let me do style, write CSS, I was blindfolded, this is my job. NET development, you this is what let me write css brain let donkey to kiss, after all, just graduated, let dry what do Bai, marry, marry dog with the dog Bai. Don't mention how painful it is. All tears ~ ~ Luckily I was a beautiful woman across the street, and I was crying to her ~~~~~~~~~~~~

　　

Jquereasyui English Website: http://www.jeasyui.com/

Jquereasyui Chinese Website: http://www.jeasyui.net/

I organize jquery easyui 1.4.1 offline Simplified Chinese API documentation with full development Kit + Skins + Extensions + Demo: http://pan.baidu.com/s/1bn6SKZ9

Next, we'll practice a DataGridView data Control

1: Import the required package into the project, one is themes content, and JS file

　　　　

2: Introduce the file (the path is copied after the change to their own, do not forget to change the path)

<Linkhref= "~/content/easyui/themes/default/easyui.css"rel= "stylesheet" />    <Linkhref= "~/content/easyui/themes/icon.css"rel= "stylesheet" />    <Scriptsrc= "~/scripts/jquery.min.js"></Script>    <Scriptsrc= "~/scripts/jquery.easyui.min.js"></Script>

3: Add script code (handler)

<Scripttype= "Text/javascript">        $(function(){            varPager= $('#dg'). DataGrid (). DataGrid ('Getpager'); //get the pager of the DataGridpager.pagination ({buttons:[{iconcls:'Icon-search', Handler:function() {alert ('Search'); }},{iconcls:'Icon-add', Handler:function() {alert ('Add'); }},{iconcls:'Icon-edit', Handler:function() {alert ('Edit');                    }                }]            }); })    </Script>

4: Then modify the body code (here is the URL, where the current page is loaded Easyui will asynchronously load the JSON data, the URL address is the address of the asynchronous loading of data)

<Body>    <!------------------------------dataGrid Start id=dg-------------------------------------------- -    <Div>        <TableID= "DG"title= "User Management"style= "width:700px; height:250px"data-options= "Rownumbers:true,singleselect:true,pagination:true,url: '/home/getlistdata ', method: ' Get '">            <thead>                <TR>                    <thdata-options= "field: ' ID ', width:80">Id</th>                    <thdata-options= "field: ' UName ', width:100">User name</th>                    <thdata-options= "field: ' Upwd ', width:80,align: ' Right '">Password</th>                    <thdata-options= "field: ' Remark ', width:80,align: ' Right '">Note</th>                </TR>            </thead>        </Table>    </Div>  </Body>

5: The page is displayed, and then we need to change the code according to their own needs;

If there are errors in the place please point out that I hope to communicate with you a lot, what problems can also contact me, thank you;

Jqueryeasyui Study Notes