This lesson focuses on how the DataGrid (data table) component is used in Easyui, which relies on
Panel, resizeable (resizing), LinkButton (button), pageination (pagination) components.
A Background interaction
Deleting records
$.ajax ({
Type: ' POST ',
URL: ' delete.php ',
Data: {
Ids:ids.join (', '),
},
Beforesend:function (JQXHR, settings) {
$ (' #box '). DataGrid (' loading ');
},
Success:function (data, Textstatus, JQXHR) {
if (data) {
$ (' #box '). DataGrid (' Load ');
$ (' #box '). DataGrid (' loaded ');
$ (' #box '). DataGrid (' Unselectall ');
$.messager.show ({
Title: ' Hints ',
Msg:data + ' user was deleted successfully! ',
});
}
},
});
//Remove PHP code
<?php
require ' config.php ';
$ids = $_post[' IDs '];
$query = mysql_query ("DELETE from Think_user WHERE ID in ($ids)")
or Die (' SQL Error! ‘);
Echo mysql_affected_rows ();
Mysql_close ();
?
//Add and modify User
Onafteredit:function (rowIndex, RowData, changes) {
var inserted = $ (' #box '). DataGrid (' GetChanges ', ' inserted ');
var updated = $ (' #box '). DataGrid (' GetChanges ', ' updated ');
var url = info = ';
//What's new
if (Inserted.length > 0) {
url = ' add.php ';
info = ' User was added successfully! ‘;
}
//Modify the Contents
if (Updated.length > 0) {
url = ' update.php ';
info = ' User was modified successfully! ‘;
}
$.ajax ({
Type: ' POST ',
Url:url,
Data: {
Row:rowdata,
},
Beforesend:function (JQXHR, Settings) {
$ (' #box '). DataGrid (' loading ');
},
Success:function (data, Textstatus, JQXHR) {
if (data) {
$ (' #box '). DataGrid (' Load ');
$ (' #box '). DataGrid (' loaded ');
$ (' #box '). DataGrid (' Unselectall ');
$.messager.show ({
title: ' Hint ',
Msg:data + info,
});
Obj.editrow = undefined;
}
},
});
},
//Add server code
<?php
require ' config.php ';
$row = $_post[' row '][0];
$user = $row [' user '];
$email = $row [' email '];
$date = $row [' Date '];
$query = mysql_query ("INSERT into Think_user (user, e-mail, date)
VALUES (' $user ', ' $email ', ' $date ') ') or Die (' SQL Error! ‘);
Echo mysql_affected_rows ();
Mysql_close ();
?
//Modify server code
<?php
require ' config.php ';
$row = $_post[' row '][0];
$id = $row [' id '];
$user = $row [' user '];
$email = $row [' email '];
$date = $row [' Date '];
$query = mysql_query ("UPDATE think_user SET
User= ' $user ', email= ' $email ', date= ' $date ' WHERE id= ' $id ' ") or Die (' SQL error
Miss! ‘);
Echo Mysql_affected_rows ();
Mysql_close ();
?>
DataGrid (data table) component [7]