jqGrid boleh membaca dan memuatkan data luaran secara dinamik Artikel ini akan menggabungkan PHP dan Mysql untuk menerangkan cara menggunakan jqGrid untuk membaca dan memaparkan data, serta proses interaksi ajax untuk menanyakan data dengan memasukkan kata kunci.
Saya akan tunjukkan rendering di bawah Kawan-kawan yang suka boleh baca teks penuh.

jqGrid sendiri mempunyai modul jadual carian dan edit, tetapi modul ini akan menjadikan keseluruhan pemalam ini agak besar, dan saya rasa pertanyaan carian jqGrid dan fungsi edit/tambah tidak mudah digunakan, jadi saya berhenti mencari jqGrid sendiri dan fungsi edit. Modul jadual edit menggunakan alat jquery untuk melengkapkan fungsi berkaitan, yang selaras dengan aplikasi sebenar projek.
XHTML
1 2 3 4 5 6 7 8 9 10 11 | <div id= "opt" >
<div id= "query" >
<label>编号:</label><input type= "text" class = "input" id= "sn" />
<label>名称:</label><input type= "text" class = "input" id= "title" />
<input type= "submit" class = "btn" id= "find_btn" value= "查 询" />
</div>
<input type= "button" class = "btn" id= "add_btn" value= "新 增" />
<input type= "button" class = "btn" id= "del_btn" value= "删 除" />
</div>
<table id= "list" ></table>
<div id= "pager" ></div>
|
Salin selepas log masuk
Kami sedang mencipta dua kotak input untuk menanyakan nombor dan nama, serta butang "Tambah" dan "Padam" Fungsi tambah dan padam akan diterangkan secara khusus dalam artikel berikut. Selain itu, terdapat #senarai untuk meletakkan jadual (jqGrid menjana jadual) dan bar paging #pager dalam xhtml.
Javascript
Panggilan pertama jqGrid Kami mengambil data dalam artikel jqGrid: Aplikasi Powerful Table Plug-in di laman web ini sebagai contoh untuk memanggil jqGrid untuk menjana jadual.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | $( "#list" ).jqGrid({
url: 'do.php?action=list' ,
datatype: "json" ,
colNames:[ '编号' , '名称' , '主屏尺寸' , '操作系统' , '电池容量' , '价格(¥)' , '操作' ],
colModel:[
{name: 'sn' ,index: 'sn' , editable:true, width:80,align: 'center' , title:false},
{name: 'title' ,index: 'title' , width:180, title:false},
{name: 'size' ,index: 'size' , width:120},
{name: 'os' ,index: 'os' , width:120},
{name: 'charge' ,index: 'charge' , width:100,align: 'center' },
{name: 'price' ,index: 'price' , width:80,align: 'center' },
{name: 'opt' ,index: 'opt' , width:80, sortable:false, align: 'center' }
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager' ,
autowidth: true,
height:275,
gridview:true,
viewrecords: true,
multiselect: true,
multiselectWidth: 25,
sortable:true,
sortname: 'id' ,
sortorder: "desc" ,
loadComplete: function (data){
if (data.records==0){
$( "p" ).appendTo($( "#list" )).addClass( "nodata" ).html( '找不到相关数据!' );
$( "#del_btn" ).attr( "disabled" ,true);
} else {
$( "p.nodata" ).remove();
$( "#del_btn" ).removeAttr( "disabled" );
}
}
});
|
Salin selepas log masuk
Untuk tetapan pilihan berkaitan jqGrid, sila rujuk: dokumentasi Cina jqGrid - tetapan pilihan .
Selain itu, apabila kami mengklik butang "Pertanyaan", permintaan kata kunci pertanyaan dihantar ke program PHP latar belakang, dan jqGrid bertindak balas berdasarkan hasil yang dikembalikan oleh pelayan Sila lihat kod.
1 2 3 4 5 6 7 8 9 10 11 | $( function (){
$( "#find_btn" ).click( function (){
var title = escape($( "#title" ).val());
var sn = escape($( "#sn" ).val());
$( "#list" ).jqGrid( 'setGridParam' ,{
url: "do.php?action=list" ,
postData:{ 'title' :title, 'sn' :sn},
page:1
}).trigger( "reloadGrid" );
});
});
|
Salin selepas log masuk
PHP
Dalam dua keping kod JS sebelumnya, anda boleh melihat bahawa alamat url latar belakang untuk senarai bacaan dan pertanyaan permintaan perniagaan adalah do.php?action=list. Kod php latar belakang bertanggungjawab untuk menanyakan data dalam data mysql jadual mengikut syarat Dan kembalikan data ke jqGrid bahagian hadapan dalam format JSON, sila lihat kod php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | include_once ( "connect.php" );
$action = $_GET [ 'action' ];
switch ( $action ) {
case 'list' :
$page = $_GET [ 'page' ];
$limit = $_GET [ 'rows' ];
$sidx = $_GET [ 'sidx' ];
$sord = $_GET [ 'sord' ];
if (! $sidx )
$sidx = 1;
$where = '' ;
$title = uniDecode( $_GET [ 'title' ], 'utf-8' );
if (! empty ( $title ))
$where .= " and title like '%" . $title . "%'" ;
$sn = uniDecode( $_GET [ 'sn' ], 'utf-8' );
if (! empty ( $sn ))
$where .= " and sn='$sn'" ;
$result = mysql_query( "SELECT COUNT(*) AS count FROM products where deleted=0" . $where );
$row = mysql_fetch_array( $result , MYSQL_ASSOC);
$count = $row [ 'count' ];
if ( $count > 0) {
$total_pages = ceil ( $count / $limit );
} else {
$total_pages = 0;
}
if ( $page > $total_pages )
$page = $total_pages ;
$start = $limit * $page - $limit ;
if ( $start < 0 ) $start = 0;
$SQL = "SELECT * FROM products WHERE deleted=0" . $where ." ORDER BY $sidx $sord
LIMIT $start , $limit ";
$result = mysql_query( $SQL ) or die ( "Couldn t execute query." . mysql_error());
$responce ->page = $page ;
$responce ->total = $total_pages ;
$responce ->records = $count ;
$i = 0;
while ( $row = mysql_fetch_array( $result , MYSQL_ASSOC)) {
$responce ->rows[ $i ][ 'id' ] = $row [id];
$opt = "<a href='edit.php'>修改</a>" ;
$responce ->rows[ $i ][ 'cell' ] = array (
$row [ 'sn' ],
$row [ 'title' ],
$row [ 'size' ],
$row [ 'os' ],
$row [ 'charge' ],
$row [ 'price' ],
$opt
);
$i ++;
}
echo json_encode( $responce );
break ;
case '' :
echo 'Bad request.' ;
break ;
}
|
Salin selepas log masuk
Perlu dinyatakan bahawa apabila kami melakukan pertanyaan bahasa Cina, iaitu, apabila memasukkan kata kunci bahasa Cina untuk pertanyaan, kami perlu menggunakan js untuk pengekodan melarikan diri, dan kemudian php akan menyahkod dengan sewajarnya apabila menerima kata kunci bahasa Cina, jika tidak, bahasa Cina tidak akan dikenali fenomena rentetan, dalam contoh ini, fungsi uniDecode digunakan untuk menyahkod dan kod disediakan bersama:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | /处理接收jqGrid提交查询的中文字符串
function uniDecode( $str , $charcode ) {
$text = preg_replace_callback( "/%u[0-9A-Za-z]{4}/" , toUtf8, $str );
return mb_convert_encoding( $text , $charcode , 'utf-8' );
}
function toUtf8( $ar ) {
foreach ( $ar as $val ) {
$val = intval ( substr ( $val , 2), 16);
if ( $val < 0x7F) {
$c .= chr ( $val );
}
elseif ( $val < 0x800) {
$c .= chr (0xC0 | ( $val / 64));
$c .= chr (0x80 | ( $val % 64));
} else {
$c .= chr (0xE0 | (( $val / 64) / 64));
$c .= chr (0x80 | (( $val / 64) % 64));
$c .= chr (0x80 | ( $val % 64));
}
}
return $c ;
}
|
Salin selepas log masuk
Yang di atas ialah perkara yang diperkenalkan oleh artikel ini kepada anda menggunakan jqGrid untuk membaca dan memaparkan data berdasarkan gabungan PHP dan Mysql Kami akan terus memperkenalkan aplikasi berkaitan jadual jqgrid kepada anda, jadi nantikan.