色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jqgrid php json

PHP基礎
洪振霞1年前7瀏覽0評論

隨著互聯網技術的不斷發展，越來越多的網站需要借助于一些JS框架來豐富網站的交互效果，而JQGrid就是其中之一。本文將簡要介紹JQGrid的用法及其與PHP、JSON的關系。

何謂JQGrid？JQGrid是一款基于jQuery的表格插件，非常適用于各種類型的數據呈現。JQGrid支持本地數據或遠程數據，可以將數據通過ajax請求或預加載在本地進行呈現，同時還支持數據篩選、排序、分頁等基本功能。JQGrid可以幫助我們快速創建交互式表格，同時顯示數據的同時，還可以對表格進行快速的搜索、排序和翻頁，使得數據的展示更加的友好和直觀，應用范圍十分廣泛。

JQGrid除了可用于ajax請求后端接口的方式獲取數據，還可以直接利用PHP將數據轉化為JSON格式，通過JQGrid實現數據的展示。如下是一個簡單的代碼示例：

<html>
	<head>
<title>JQGrid Demo</title>
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" media="screen" /><script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.jqGrid.min.js"></script>
<script src="js/grid.locale-cn.js"></script>
	</head>
	<body>
<table id="myGrid"></table>
<div id="myGridPager"></div>
<script>
jQuery("#myGrid").jqGrid({
url:'griddata.php',
datatype: "json",
mtype: 'GET',
colNames:['序號','姓名','年齡','班級'],
colModel:[
{name:'ID',index:'ID', width:55},
{name:'Name',index:'Name', width:90},
{name:'Age',index:'Age', width:70},
{name:'Class',index:'Class', width:80}
],
rowNum:10,
loadonce:true,
rowList:[10,20,30],
pager: '#myGridPager',
sortname: 'ID',
viewrecords: true,
sortorder: "desc",
caption:"My First JQGrid"
});
</script>
	</body>
</html>

當然，上述示例中的griddata.php代碼也很重要。該腳本需要返回一個JSON字符串以供JQGrid進行解析。我們來看一下示例中的griddata.php：

<?php
header("Content-type: application/json;charset=utf-8");
$result = array();
for($i=0;$i<10;$i++){
	$row['ID'] = $i+1;
	$row['Name'] = "Student".$i;
	$row['Age'] = 18+$i;
	$row['Class'] = "Class".($i%3+1);
	$result[] = $row;
}
echo json_encode($result);
?>

這里，我們得到的JSON字符串如下：

[
	{"ID":"1","Name":"Student0","Age":"18","Class":"Class1"},
	{"ID":"2","Name":"Student1","Age":"19","Class":"Class2"},
	{"ID":"3","Name":"Student2","Age":"20","Class":"Class3"},
	{"ID":"4","Name":"Student3","Age":"21","Class":"Class1"},
	{"ID":"5","Name":"Student4","Age":"22","Class":"Class2"},
	{"ID":"6","Name":"Student5","Age":"23","Class":"Class3"},
	{"ID":"7","Name":"Student6","Age":"24","Class":"Class1"},
	{"ID":"8","Name":"Student7","Age":"25","Class":"Class2"},
	{"ID":"9","Name":"Student8","Age":"26","Class":"Class3"},
	{"ID":"10","Name":"Student9","Age":"27","Class":"Class1"}
]

代碼解釋：

  • JQGrid表格：
    • url

      • 獲取數據的url地址。在后端進行數據處理的時候需要將數據返回JSON格式。

    • datatype

      • 請求數據的格式，常用選項為json、xml等，默認為xml。

    • mtype

      • ajax提交方式。GET或POST。

    • colNames

      • 表頭。在這里，我們定義了4列，分別是序號、姓名、年齡和班級。

    • colModel

      • 定義了每一列的相關參數。

    • pager

      • 指示分頁欄所使用的元素ID值。

    • rowNum

      • 每頁初始顯示數據量。

    • rowList

      • 設置每頁顯示數據量的下拉列表選項。

    • sortname、sortorder

      • 設置默認的數據排序方式。在這里我們設置了“ID”倒序排列。

    • loadonce

      • 設為True時，一次性從服務器加載所有數據并在本地進行排序、過濾、分頁等操作；設為False時，從服務器逐次請求數據并進行操作。

  • griddata.php：
    • echo json_encode($result);

      • 將結果數據轉換為json格式并輸出。

綜上所述，使用JQGrid、PHP、JSON相互配合，我們可以迅速構建出易用且自適應的交互式表格。當然，在使用過程中還有很多需要注意的地方，例如當擁有大量數據時，需要使用分頁功能等等，需要開發者自行在實際情況下進行調整。但是無論怎樣，JQGrid作為前端數據呈現的首選之一，是十分重要而且強大的一個工具。期待您使用JQGrid創造出更加精美的交互體驗。