增删改查(弹窗)
<html>
<head>
<title>jqGrid PHP Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.multiselect.css"/>
<style type="text">
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 75%;
}
</style>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
$.jgrid.defaults.width = "700";
</script>
</head>
<body>
<div>
<table id='grid'></table>
<div id='pager'></div>
<script type='text/javascript'>jQuery(document).ready(function ($) {
jQuery('#grid').jqGrid({
"hoverrows": false,
"viewrecords": true,
"jsonReader": {"repeatitems": false, "subgrid": {"repeatitems": false}},
"xmlReader": {"repeatitems": false, "subgrid": {"repeatitems": false}},
"gridview": true,
"url": "ajax.php",
"editurl": "ajax.php",
"cellurl": "ajax.php",
"rowNum": 10,
"rowList": [10, 20, 30],
"sortname": "CustomerID",
"datatype": "json",
"colModel": [{
"name": "OrderID",
"index": "OrderID",
"sorttype": "string", //用在当datatype为local时，定义搜索列的类型，可选值：int/integer - 对integer排序float/number/currency - 排序数字date - 排序日期text - 排序文本
"key": true, // 当从服务器端返回的数据中没有id时，将此作为唯一rowid使用只有一个列可以做这项设置。如果设置多于一个，那么只选取第一个，其他被忽略
"editrules": {"required": true},
"editable": false
},
{
"name": "OrderDate",
"index": "OrderDate",
"sorttype": "string",
"editable": true
},
{
"name": "Freight",
"index": "Freight",
"sorttype": "string",
"editable": true
},
{
"name": "ShipName",
"index": "ShipName",
"sorttype": "string",
"editable": true
},
{
"name": "PostalCode",
"index": "PostalCode",
"sorttype": "string",
"editable": true
},
{
"name": "ShipName", "index": "ShipName", "sorttype": "string", "editable": true
}
],
"postData": {"oper": "grid"},
"prmNames": { // Default valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 当参数为null时不会被发到服务器端
"page": "page",
"rows": "rows",
"sort": "sidx",
"order": "sord",
"search": "_search",
"nd": "nd",
"id": "CustomerID",
"filter": "filters",
"searchField": "searchField",
"searchOper": "searchOper",
"searchString": "searchString",
"oper": "oper",
"query": "grid",
"addoper": "add",
"editoper": "edit",
"deloper": "del",
"excel": "excel",
"subgrid": "subgrid",
"totalrows": "totalrows",
"autocomplete": "autocmpl"
},
"loadError": function (xhr, status, err) { //如果请求服务器失败则调用此方法。xhr：XMLHttpRequest 对象；satus：错误类型，字符串类型；error：exception对象
try {
jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap, '<div class="ui-state-error">' + xhr.responseText + '</div>', jQuery.jgrid.edit.bClose, {buttonalign: 'right'});
} catch (e) {
alert(xhr.responseText);
}
},
"pager": "#pager"
});
jQuery('#grid').jqGrid('navGrid', '#pager',
{
"edit": true,
"add": true,
"del": true,
"search": false,
"refresh": true,
"view": false,
"excel": false,
"pdf": false,
"csv": false,
"columns": false
},
{
"drag": true,
"resize": true,
"closeOnEscape": true,
"dataheight": 150,
"errorTextFormat": function (r) {
return r.responseText;
}
},
{
"drag": true,
"resize": true,
"closeOnEscape": true,
"dataheight": 150,
"errorTextFormat": function (r) {
return r.responseText;
}
},
{
"errorTextFormat": function (r) {
return r.responseText;
}
},
{"drag": true, "closeAfterSearch": true, "multipleSearch": true}, {
"drag": true,
"resize": true,
"closeOnEscape": true,
"dataheight": 150
});
$("#grid").bind('jqGridAddEditBeforeShowForm', function (event, form, oper) {
alert('The operation is:123123' + oper);
});
});</script>
</div>
<br/>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
try {
var pageTracker = _gat._getTracker("UA-5463047-4");
pageTracker._trackPageview();
} catch (err) {
}
</script>
</body>
</html>
数据ajax.php
//$arr = array("sEcho"=>1,"iTotalRecords"=>"57","iTotalDisplayRecords"=>"57","aaData"=>array(array("Gecko","Firefox 1.0","Win 98+ \/ OSX.2+","1.7","A"),array("Gecko","Firefox 1.5","Win 98+ \/ OSX.2+","1.8","A"),array("Gecko","Firefox 2.0","Win 98+ \/ OSX.2+","1.8","A"),array("Gecko","Firefox 3.0","Win 2k+ \/ OSX.3+","1.9","A"),array("Gecko","Camino 1.0","OSX.2+","1.8","A"),array("Gecko","Camino 1.5","OSX.3+","1.8","A"),array("Gecko","Netscape 7.2","Win 95+ \/ Mac OS 8.6-9.2","1.7","A"),array("Gecko","Netscape Browser 8","Win 98SE+","1.7","A"),array("Gecko","Netscape Navigator 9","Win 98+ \/ OSX.2+","1.8","A"),array("Gecko","Mozilla 1.0","Win 95+ \/ OSX.1+","1","A")));
//
//$arr = array(
// "draw"=>1,
// "recordsTotal"=>57,
// "recordsFiltered"=>57,
// "get"=>$_GET,
// "data"=>array(
// array(
// "Airi",
// "Satou",
// "Accountant",
// "Tokyo",
// "28th Nov 08",
// "$162,700"
// ),
// array(
// "Angelica",
// "Ramos",
// "Chief Executive Officer (CEO)",
// "London",
// "9th Oct 09",
// "$1,200,000"
// ),
// array(
// "Ashton",
// "Cox",
// "Junior Technical Author",
// "San Francisco",
// "12th Jan 09",
// "$86,000"
// ),
// array(
// "Bradley",
// "Greer",
// "Software Engineer",
// "London",
// "13th Oct 12",
// "$132,000"
// ),
// array(
// "Brenden",
// "Wagner",
// "Software Engineer",
// "San Francisco",
// "7th Jun 11",
// "$206,850"
// ),
// array(
// "Brielle",
// "Williamson",
// "Integration Specialist",
// "New York",
// "2nd Dec 12",
// "$372,000"
// ),
// array(
// "Bruno",
// "Nash",
// "Software Engineer",
// "London",
// "3rd May 11",
// "$163,500"
// ),
// array(
// "Caesar",
// "Vance",
// "Pre-Sales Support",
// "New York",
// "12th Dec 11",
// "$106,450"
// ),
// array(
// "Cara",
// "Stevens",
// "Sales Assistant",
// "New York",
// "6th Dec 11",
// "$145,600"
// ),
// array(
// "Cedric",
// "Kelly",
// "Senior Javascript Developer",
// "Edinburgh",
// "29th Mar 12",
// "$433,060"
// )
// )
//);
$arr = array(
"rows"=>array(
array("OrderID"=>"10248","OrderDate"=>"1996-07-04","CustomerID"=>"WILMK","ShipName"=>"Vins et alcools Chevalier","Freight"=>"32.3800"),
array("OrderID"=>"10249","OrderDate"=>"1996-07-05","CustomerID"=>"TRADH","ShipName"=>"Toms Spezialit\u00e4ten","Freight"=>"11.6100"),
array("OrderID"=>"10250","OrderDate"=>"1996-07-08","CustomerID"=>"HANAR","ShipName"=>"Hanari Carnes","Freight"=>"65.8300"),
array("OrderID"=>"10251","OrderDate"=>"1996-07-08","CustomerID"=>"VICTE","ShipName"=>"Victuailles en stock","Freight"=>"41.3400"),
array("OrderID"=>"10252","OrderDate"=>"1996-07-09","CustomerID"=>"SUPRD","ShipName"=>"Supr\u00eames d\u00e9lices","Freight"=>"51.3000"),
array("OrderID"=>"10253","OrderDate"=>"1996-07-10","CustomerID"=>"HANAR","ShipName"=>"Hanari Carnes","Freight"=>"58.1700"),
array("OrderID"=>"10254","OrderDate"=>"1996-07-11","CustomerID"=>"CHOPS","ShipName"=>"Chop-suey Chinese","Freight"=>"22.9800"),
array("OrderID"=>"10255","OrderDate"=>"1996-07-12","CustomerID"=>"RICSU","ShipName"=>"Richter Supermarkt","Freight"=>"148.3300"),
array("OrderID"=>"10256","OrderDate"=>"1996-07-15","CustomerID"=>"WELLI","ShipName"=>"Wellington Importadora","Freight"=>"13.9700"),
array("OrderID"=>"10257","OrderDate"=>"1996-07-16","CustomerID"=>"HILAA","ShipName"=>"HILARI\u00d3N-Abastos","Freight"=>"81.9100"),
array("OrderID"=>"10258","OrderDate"=>"1996-07-17","CustomerID"=>"ERNSH","ShipName"=>"Ernst Handel","Freight"=>"140.5100"),
array("OrderID"=>"10259","OrderDate"=>"1996-07-18","CustomerID"=>"CENTC","ShipName"=>"Centro comercial Moctezuma","Freight"=>"3.2500"),
array("OrderID"=>"10260","OrderDate"=>"1996-07-19","CustomerID"=>"OLDWO","ShipName"=>"Ottilies K\u00e4seladen","Freight"=>"55.0900"),
array("OrderID"=>"10261","OrderDate"=>"1996-07-19","CustomerID"=>"QUEDE","ShipName"=>"Que Del\u00edcia","Freight"=>"3.0500"),
array("OrderID"=>"10262","OrderDate"=>"1996-07-22","CustomerID"=>"RATTC","ShipName"=>"Rattlesnake Canyon Grocery","Freight"=>"48.2900"),
array("OrderID"=>"10263","OrderDate"=>"1996-07-23","CustomerID"=>"ERNSH","ShipName"=>"Ernst Handel","Freight"=>"146.0600"),
array("OrderID"=>"10264","OrderDate"=>"1996-07-24","CustomerID"=>"FOLKO","ShipName"=>"Folk och f\u00e4 HB","Freight"=>"3.6700"),
array("OrderID"=>"10265","OrderDate"=>"1996-07-25","CustomerID"=>"BLONP","ShipName"=>"Blondel p\u00e8re et fils","Freight"=>"55.2800"),
array("OrderID"=>"10266","OrderDate"=>"1996-07-26","CustomerID"=>"WARTH","ShipName"=>"Wartian Herkku","Freight"=>"25.7300"),
array("OrderID"=>"10267","OrderDate"=>"1996-07-29","CustomerID"=>"FRANK","ShipName"=>"Frankenversand","Freight"=>"208.5800"),
array("OrderID"=>"10268","OrderDate"=>"1996-07-30","CustomerID"=>"GROSR","ShipName"=>"GROSELLA-Restaurante","Freight"=>"66.2900"),
array("OrderID"=>"10269","OrderDate"=>"1996-07-31","CustomerID"=>"WHITC","ShipName"=>"White Clover Markets","Freight"=>"4.5600"),
array("OrderID"=>"10270","OrderDate"=>"1996-08-01","CustomerID"=>"WARTH","ShipName"=>"Wartian Herkku","Freight"=>"136.5400"),
array("OrderID"=>"10271","OrderDate"=>"1996-08-01","CustomerID"=>"SPLIR","ShipName"=>"Split Rail Beer & Ale","Freight"=>"4.5400"),
array("OrderID"=>"10272","OrderDate"=>"1996-08-02","CustomerID"=>"RATTC","ShipName"=>"Rattlesnake Canyon Grocery","Freight"=>"98.0300"),
array("OrderID"=>"10273","OrderDate"=>"1996-08-05","CustomerID"=>"QUICK","ShipName"=>"QUICK-Stop","Freight"=>"76.0700"),
array("OrderID"=>"10274","OrderDate"=>"1996-08-06","CustomerID"=>"VINET","ShipName"=>"Vins et alcools Chevalier","Freight"=>"6.0100"),
array("OrderID"=>"10275","OrderDate"=>"1996-08-07","CustomerID"=>"MAGAA","ShipName"=>"Magazzini Alimentari Riuniti","Freight"=>"26.9300"),
array("OrderID"=>"10276","OrderDate"=>"1996-08-08","CustomerID"=>"TORTU","ShipName"=>"Tortuga Restaurante","Freight"=>"13.8400"),
array("OrderID"=>"10277","OrderDate"=>"1996-08-09","CustomerID"=>"MORGK","ShipName"=>"Morgenstern Gesundkost","Freight"=>"125.7700")
),
"get"=>$_GET
);
echo(json_encode ( $arr));
?>