我将介绍如何通过链接PHP程序和igGrid来实现CRUD功能。
实施以下项目。
使用PHP从数据库中获取用于网格显示的数据，并将其转换为JSON数据。用ajax把对应的数据绑定到grid上。
单击保存按钮，将添加、更新和删除行的所有更改发布到 PHP。PHP程序接收post值并存入数据库
*本文目的是讲解如何使用ajax在grid和PHP之间传递数据，数据库处理部分省略。
准备 igGrid
我准备了一个 igGrid，其行为与使用下面的 ASP.NET 框架的示例相同。我们将实现在本地临时存储行编辑设置和更改到网格并立即反映所有更新的行为。
https://jp.igniteui.com/grid/basic-editing
$ (函数( ) {
getData ( ) . done (函数(结果) {
变量数据=结果；
var next_id = getAutoIncrement ( ) [ "responseText" ] ;
var grid = $ ( "#grid" ) . igGrid ( {
主键：“id” ，
宽度：'100%' ，
专栏：[
{ headerText: "ID" , key: "id" , dataType: "number" , width: "15%" } ,
{ headerText: "First Name" , key: "first_name" , dataType: "string" , width: "25%" } ,
{ headerText: "Last Name" , key: "last_name" , dataType: "string" , width: "25%" } ,
{ headerText: "Birthday" , key: "birthdate" , dataType: "date" , width: "35%" }
] ,
autofitLastColumn: false ,
autoGenerateColumns: false ,
数据源：数据，
updateUrl : 'DataTransaction.php' ,
特点：[
{
名称：'更新' ，
generatePrimaryKeyValue:函数( evt, ui ) {
ui.value = next_id ;
} ,
添加行：函数（evt，ui ）{
next_id++;
} ,
列设置：[ {
columnKey: "id" ,
只读：真，
} , {
columnKey: "first_name" ,
editorType: 'string' ,
验证：真，
} , {
columnKey: "last_name" ,
editorType: 'string' ,
验证：真，
} , {
columnKey: "生日" ,
editorType: '日期' ,
验证：真，
} ]
}
]
} ) ;
$ ( "#saveChanges" ) .igButton ( { labelText : $ ( "#saveChanges" ) . val ( ) , disabled: true } ) ;
$ ( "#undo" ) . igButton ( { labelText: $ ( "#undo" ) . val ( ) , disabled: true } ) ;
$ ( "#redo" ) . igButton ( { labelText: $ ( "#redo" ) . val ( ) , disabled: true } ) ;
loadingIndicator = new GridModalLoadingIndicator ( grid ) ;
grid.on ( " iggriddatabinding" , function ( e, args ) {
loadingIndicator.show ( ) ; _
} ) ;
grid.on ( " iggriddatabound" , function ( e, args ) {
loadingIndicator.hide ( ) ; _
} ) ;
grid.on ( "iggridupdatingrowdeleted" , function ( e , args ) {
$ ( " #undo" ) .igButton ( "选项" , "禁用" , false ) ;
$ （“#saveChanges” ）. igButton （“选项” ，“禁用” ，假）；
} ) ;
grid.on ( "iggridupdatingrowadded" , function ( e , args ) {
$ ( " #undo" ) .igButton ( "选项" , "禁用" , false ) ;
$ （“#saveChanges” ）. igButton （“选项” ，“禁用” ，假）；
} ) ;
grid.on ( "iggridupdatingeditrowended" , function ( e , args ) {
如果（参数。更新）{
$ ( " #undo" ) .igButton ( "选项" , "禁用" , false ) ;
$ （“#saveChanges” ）. igButton （“选项” ，“禁用” ，假）；
}
} ) ;
$ ( "#undo" ) . on ( 'igbuttonclick' ,
函数（e，参数）{
updates = $ .extend ( { } , grid.data ( ' igGrid' ) . pendingTransactions ( ) ) ;
$ .each （更新，函数（索引，事务）{
grid.igGrid ( " rollback" , transaction.rowId , true ) ;
} ) ;
$ （“#redo” ）. igButton （“选项” ，“禁用” ，假）；
$ ( "#undo" ) . igButton ( "禁用" ) ;
$ （“#saveChanges” ）. igButton （“禁用” ）；
返回假；
}
) ;
$ ( "#redo" ) . on ( 'igbuttonclick' ,
函数（e ）{
$ .each （更新，函数（索引，事务）{
开关（交易。类型）{
案例“行” ：
grid.igGridUpdating ( ' updateRow ' , transaction.rowId , transaction.row , null , false ) ;
打破;
案例“新行” ：
grid.igGridUpdating ( 'addRow ' , transaction.row , false ) ;
打破;
案例“删除行” ：
grid.igGridUpdating ( 'deleteRow ' , transaction.rowId , false ) ;
打破;
}
} ) ;
$ ( this ) .igButton ( "禁用" ) ;
$ ( " #undo" ) .igButton ( "选项" , "禁用" , false ) ;
$ （“#saveChanges” ）. igButton （“选项” ，“禁用” ，假）；
}
) ;
$ ( "#saveChanges" ) . on ( 'igbuttonclick' ,
函数（e ）{
loadingIndicator.show ( ) ; _
尝试{
grid.igGrid ( " saveChanges " ,
函数（数据）{
控制台日志（数据）；_ _
loadingIndicator.hide ( ) ; _
$ ( "#undo" ) . igButton ( "禁用" ) ;
$ （“#saveChanges” ）. igButton （“禁用” ）；
} ,
功能（jqXHR，textStatus，errorThrown ）{
警报（JSON.stringify （jqXHR ））；_
警报（错误抛出）；
alert ( JSON.stringify ( textStatus ) ) ; _
} ) ;
}赶上( e ) {
警报（“错误” ）；
}
}
) ;
} ) . fail (函数(结果) {
控制台日志（结果）；_ _
} ) ;
} ) ;
使用 ajax 访问 PHP，获取数据库信息，并绑定到网格。
我创建了一个 getData() 函数，如下所示。
函数getData ( ) {
返回$ .ajax ( {
类型：“获取” ，
网址：“DataTransaction.php” ，
数据类型：'json' ，
成功：功能（数据，状态，xhr ）{
// 成功处理
返回数据；
} ,
错误：函数（XMLHttpRequest、状态、errorThrown ）{
//失败处理
console.log （“失败：” +状态）；
}
} ) ;
}
PHP端获取数据库信息如下，转成JSON返回。此外，当使用 PHP 返回 JSON 时，设置标头。
// 头部设置
header ( "Content-Type: application/json; charset=utf-8" ) ;
$sql = "SELECT * FROM authors" ;
如果（$result = $mysqli ->查询（$sql ））{
$数据= [] ;
while ( $row = $result -> fetch_assoc ()) {
array_push ( $data, $row ) ;
}
$结果->关闭() ;
}
$mysqli ->关闭() ;
// 转换为 JSON 并返回
echo json_encode ( $data ) ;
退出；
将网格中的变化反映到数据库中
在updateUrl属性中指定一个PHP文件，将igGrid中的变化反映到数据库中。当您按下保存按钮时，更改信息将发布到指定的 URL。
updateUrl : 'DataTransaction.php' ,
在接收到POST的PHP端，将接收到的JSON数据转换为数组，并根据数据类型（newrow、deleterow、row）循环处理对数据库的增删改查。
它还返回 json_encode(array(“Success”=>true)) 让 igGrid 知道它已完成。
header ( "Content-Type: application/json; charset=utf-8" ) ;
$post_data = $_POST [ "ig_transactions" ] ;
$post_data_array = json_decode ( $post_data, true ) ;
$sql = "" ;
foreach ( $post_data_array 作为 $row_data ) {
如果（$row_data [ “类型” ] == “新行” ）{
$id = $row_data [ "rowId" ] ;
$first_name = $row_data [ "row" ][ "first_name" ] ;
$last_name = $row_data [ "行" ][ "last_name" ] ;
$birthdate = $row_data [ "row" ][ "birthdate" ] ;
$sql .= "INSERT INTO `authors`(`id`, `first_name`, `last_name`, `birthdate`) VALUES ($id,'$first_name','$last_name','$birthdate');" ;
}
如果（$row_data [ “类型” ] == “删除行” ）{
$id = $row_data [ "rowId" ] ;
$sql .= "从 `authors` 中删除 `id` = $id;" ;
}
如果（$row_data [ “类型” ] == “行” ）{
$id = $row_data [ "rowId" ] ;
$first_name = $row_data [ "row" ][ "first_name" ] ;
$last_name = $row_data [ "行" ][ "last_name" ] ;
$birthdate = $row_data [ "row" ][ "birthdate" ] ;
$sql .= "UPDATE `authors` SET `id` = $id,`first_name` = '$first_name',`last_name` = '$last_name',`birthdate` = '$birthdate' WHERE `id` = $id ; " ;
}
}
$result = $mysqli- > multi_query ( $sql ) ;
$mysqli- >关闭() ;
echo json_encode ( array ( "成功" = > true )) ;
出口;
对主键值的自动递增支持
添加新行时需要注意一点。我认为有很多规范是在数据库表中使用id作为主键，并在使用Auto Increment添加新记录时添加新的id。另一方面，网格端只是根据网格端持有的信息来确定下一个PrimaryKey的值，所以需要调整这个差异。在这个例子中，下一个ID值是在第一次绘制网格时从mysql中获取的，每发生一次rowAdded事件，ID值就加一。此外，在 igGrid 中添加新行时分配的 ID 可以通过更改 generatePrimaryKeyValue 事件的返回值 ui 的 ui.value 设置为任意值。
getData ( ) . done (函数(结果) {
变量数据=结果；
var next_id = getAutoIncrement ( ) [ "responseText" ] ;
var grid = $ ( "#grid" ) . igGrid ( {
主键：“id” ，
宽度：'100%' ，
专栏：[
{ headerText: "ID" , key: "id" , dataType: "number" , width: "15%" } ,
{ headerText: "First Name" , key: "first_name" , dataType: "string" , width: "25%" } ,
{ headerText: "Last Name" , key: "last_name" , dataType: "string" , width: "25%" } ,
{ headerText: "Birthday" , key: "birthdate" , dataType: "date" , width: "35%" }
] ,
autofitLastColumn: false ,
autoGenerateColumns: false ,
数据源：数据，
updateUrl : 'DataTransaction.php' ,
特点：[
{
名称：'更新' ，
generatePrimaryKeyValue:函数( evt, ui ) {
ui.value = next_id ;
} ,
添加行：函数（evt，ui ）{
next_id++;
} ,
列设置：[ {
columnKey: "id" ,
只读：真，
} , {
columnKey: "first_name" ,
editorType: 'string' ,
验证：真，
} , {
columnKey: "last_name" ,
editorType: 'string' ,
验证：真，
} , {
columnKey: "生日" ,
editorType: '日期' ,
验证：真，
} ]
}
]
} ) ;
} ) . fail (函数(结果) {
控制台日志（结果）；_ _
} ) ;
执行示例
我准备了一张这样的表：
当在示例中执行此操作时，网格可以显示如下。
接下来，让我们在网格上添加、更新和删除。
更改一起提交到数据库。按保存按钮提交您的更改。
更改已反映在网格和数据库中。
就是这样。虽然这次我们没有提到安全性，但请注意，在向 mysql 发出查询之前，ajax 通信的 CSRF 对策和注入对策将是必需的。
售前咨询专员
