1, in <script>, if you need to open the page to load the part, you need to write first
$ (function () {
});
Then write the ID of the input or div that needs to be easyui, or they won't become the plugin you want. Of course, other functions, such as the onclick (), should be written out.
2, $.get ()
$.get () is a simplified $.ajax (). Usage such as
$ ("button"). Click (function () {
$.get ("Demo_ajax_load.txt", function (Result) {
$ ("div"). html (result);
});
});
Here are 2 points of knowledge:
A, if you want to get the value returned by the server, you must use the method that adds the function later. The reason is: it is an asynchronous call, JS will not get the value of the remote server before it executes, it will cause the following value is not what you want. Like what:
var str= "";
$.get ("Index/sertime", function (data) {str=data;});
alert (str);
You will find that the last Str is not the result from the server. Because the server has not got the value before, it is already alert. But if you execute the statement the second time, you'll get the last thing you returned from the server.
The solution to this problem can be rewritten as follows:
$.get ("Index/sertime", function (data) {alert (data);});
Alternatively, you can use the following method.
b, replace the simplified version of the $.get with $.ajax
$.get equivalent to:
$.ajax ({
Url:url,
Data:data,
Success:success,
Datatype:datatype
});
$.get the use of transport parameters:
$.get ("test.php", {name: "John", Time: "2pm"});
Usage of $.ajax:
$ ("#ButAjax"). Click (function () {
$.ajax ({
Type: "POST",//default is get
URL: "/test/getperson",
Data: "Id=1&firstname=c&lastname=hy",
Async:true,//Async
Cache:false,//Do not load cache
Success:function (obj) {
Alert (obj.id + obj. FirstName + obj. LastName + obj. Man);
},
Error:function () {
Alert ("Request Failed");
}
});
});
Visible, $.get and $.ajax, are called asynchronously by default. So if you want the JS statement to execute the next statement after this sentence is executed, you can set Async to False, that is, do not invoke asynchronously. So, the same:
var str= "";
$.ajax ({url: "Index/sertime", async:false,success:function (data) {str=data;});
alert (str);
In this way, the result is what you want. That is, if the page is in the open state, and then click the button, you want to assign a value to what control, you will change async to false.
3, javascript:void (0) and javascript: Meaning
In the <a> tab, the original link is abolished, and there are 3 ways to use the JS function.
A, <a href= "#" onclick= "Myclick ()" > Link </a>, this is generally not recommended because it will appear in the Address bar # or cause other issues that affect the user experience.
B, <a href= "javascript:void (0)" id= "a1″> link </a> In this way, set its click events in the JS script
$ (function () {
$ ("#a1 ″)." Click (function () {alert ("link A1″);});
});
C, <a href= "javascript:;" id= "a2″> link </a> this way is similar to the previous one, also set its Click event in the JS script, but for the time being use this more, It is said that the second type, although it does not have a return value, does not execute any code if it is written.
$ (function () {
$ ("#a2 ″)." Click (function () {alert ("link A2″);});
});
Easyui Summary Section
1. Wording
Easyui can be written in 2 ways. One is to write the label directly, by adding: class= "easyui-type", such as class= "Easyui-tabs" in the label. Another way of writing is to write a simple input or div with the tag, and then write the code in the JS file, such as:
$ ("P"). Panel ()
2. Easyui properties, methods, events, constructors
A, in the JS write UI constructor, it seems that can only write JS properties or events, such as:
$ (' #tt '). Tabs ({
Border:false,
Onselect:function (title) {Alert (title+ ' is selected ');}
});
b, the value of the attribute, and the wording of the assignment
$ (' P '). Panel (). Title
The above notation is only a notation of values. If you need to assign a value, you still need to write the constructor again
$ (' P '). Panel ({title: "This is the post-change title"});
In this way, you can change only one property, and the other property will not change.
C, the method of writing
How to do without parameters:
$ (' TT '). Tabs (' getselected ');
The notation of the parameter method:
$ (' P '). Panel (' move ', {left:100,top:100});
3. Tabs Plug-in
Tabs is a combination of multiple panel. In practice, the method of adding tabs is as follows:
function AddTab (tit) {
if (!$ (' #tt '). Tabs (' exists ', tit)} {//See if this title exists
$ (' #tt '). Tabs (' Add ', {title:tit, content: ' Tab Body '});
}}
4. DataGrid Edit
A, paging statements
SELECT * FROM (
Select RowNum r, field1,field2 from table_name where rownum > = page* rows) where R < (page-1) * rows
B, double-click the row, do the operation
Write in the constructor:
Ondblclickrow:function () {
var selected = $ (' #test '). DataGrid (' getselected ');
if (selected) {
window.open ("Dataview.action? Id= "+selected.id);
}}
C, delete
function Delaff () {
$.messager.confirm (' Confirm ', ' Is it really deleted? ', function (r) {
if (r) {
var selected = $ (' #test '). DataGrid (' getselected ');
if (selected) {
var index = $ (' #test '). DataGrid (' Getrowindex ', selected);
$ (' #test '). DataGrid (' DeleteRow ', index);
Deletesubmit (selected);
}
}
});
}
function Deletesubmit (selected)
{
var url= "Datadelete.action? Id= "+selected.id;
$.post (
Url
);
}
The deletion of the page and the deletion in the database are implemented.