index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- jqGrid组件基础样式包-必要 --> <link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css"/> <!-- jqGrid主题包-非必要 --> <!-- 在jqgrid/css/css这个目录下还有其他的主题包,可以尝试更换看效果 --> <link rel="stylesheet" href="jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css"/> <!-- jquery插件包-必要 --> <!-- 这个是所有jquery插件的基础,首先第一个引入 --> <script type="text/javascript" src="js/jquery-1.7.1.js"></script> <!-- jqGrid插件包-必要 --> <script type="text/javascript" src="jqgrid/js/jquery.jqGrid.src.js"></script> <!-- jqGrid插件的多语言包-非必要 --> <!-- 在jqgrid/js/i18n下还有其他的多语言包,可以尝试更换看效果 --> <script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script> <title>http://blog.mn886.net/jqGrid</title> <!-- 本页面初始化用到的js包,创建jqGrid的代码就在里面 --> <script type="text/javascript" src="js/index.js"></script> </head> <body> <!--<table id="list2"></table> <div id="pager2"></div> <br> 以上为创建jqGrid的简单例子。想了解全功能api,请移步<a href="http://blog.mn886.net/jqGrid">http://blog.mn886.net/jqGrid</a>--> <table id="list5"></table> <div id="pager5"></div><br/> <a href="#" id="a1">Get data from selected row</a><br/> <a href="#" id="a2">Delete row 2</a> <br/> <a href="#" id="a3">Update amounts in row 1</a><br/> <a href="#" id="a4">Add row with id 99</a> </body> </html>
index.js
/* $(function(){ //页面加载完成之后执行 pageInit(); }); function pageInit(){ //创建jqGrid组件 jQuery("#list2").jqGrid( { url : 'data/JSONData.json',//组件创建完成之后请求数据的url datatype : "json",//请求数据返回的类型。可选json,xml,txt colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Notes' ],//jqGrid的列显示名字 colModel : [ //jqGrid每一列的配置信息。包括名字,索引,宽度,对齐方式..... {name : 'id',index : 'id',width : 55}, {name : 'invdate',index : 'invdate',width : 90}, {name : 'name',index : 'name asc, invdate',width : 100}, {name : 'aaaa',index : 'aaaa',width : 80,align : "right"}, {name : '1432413',index : '1432413',width : 80,align : "right"}, {name : 'total',index : 'total',width : 80,align : "right"}, {name : 'note',index : 'note',width : 150,sortable : false} ], rowNum : 10,//一页显示多少条 rowList : [ 10, 20, 30 ],//可供用户选择一页显示多少条 pager : '#pager2',//表格页脚的占位符(一般是div)的id sortname : 'id',//初始化的时候排序的字段 sortorder : "desc",//排序方式,可选desc,asc mtype : "post",//向后台请求数据的ajax的类型。可选post,get viewrecords : true, caption : "JSON Example"//表格的标题名字 }); /!*创建jqGrid的操作按钮容器*!/ /!*可以控制界面上增删改查的按钮是否显示*!/ jQuery("#list2").jqGrid('navGrid', '#pager2', {edit : true,add : true,del : true}); }*/ $(function () { pageInit(); }); function pageInit() { jQuery("#list5").jqGrid({ url: 'data/JSONData.json', datatype: "json", colNames: ['Inv No', 'Date1234', 'Client', 'Amount', 'Tax', 'Total', 'Notes'], colModel: [ {name: 'id', index: 'id', width: 55}, {name: 'invdate', index: 'invdate', width: 90}, { name: 'name', index: 'name', width: 100 }, {name: 'amount', index: 'amount', width: 80, align: "right"}, { name: 'tax', index: 'tax', width: 80, align: "right" }, {name: 'total', index: 'total', width: 80, align: "right"}, { name: 'note', index: 'note', width: 150, sortable: false }], rowNum: 10, rowList: [10, 20, 30], pager: '#pager5', sortname: 'id', viewrecords: true, sortorder: "desc", caption: "Simple data manipulation", editurl: "someurl.php" }).navGrid("#pager5", {edit: false, add: false, del: false}); jQuery("#a1").click(function () { var id = jQuery("#list5").jqGrid('getGridParam', 'selrow');//JSONData中的id主键 console.log("id: " + id); if (id) { var ret = jQuery("#list5").jqGrid('getRowData', id); console.log("ret: " + ret); console.log(ret); console.log("id=" + ret.id + " invdate=" + ret.invdate + "..."); } else { console.log("Please select row"); } }); jQuery("#a2").click(function () { var id = jQuery('#list5').jqGrid('getGridParam', 'selrow'); var su = jQuery("#list5").jqGrid('delRowData', id); if (su) { console.log("Succes. Write custom code to delete row from server"); } else { console.log("Allready deleted or not in list"); } }); jQuery("#a3").click(function () { var id = jQuery('#list5').jqGrid('getGridParam', 'selrow'); var su = jQuery("#list5").jqGrid('setRowData', id, { amount: "333.00", tax: "33.00", total: "366.00", note: "<img src='images/user1.gif'/>" }); if (su) { console.log("Succes. Write custom code to update row in server"); }else { console.log("Can not update"); } }); jQuery("#a4").click(function () { var datarow = { id: "99", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }; var su = jQuery("#list5").jqGrid('addRowData', 99, datarow); if (su) { console.log("Succes. Write custom code to add data in server"); } else { console.log("Can not update"); } }); }
JSONData.json
{ "page": "1", "total": 2, "records": "13", "rows": [ { "id": "13", "cell": [ "13", "2007-10-06", "Client 3", "1000.00", "0.00", "1000.00", null ] }, { "id": "12", "cell": [ "12", "2007-10-06", "Client 2", "700.00", "140.00", "840.00", null ] }, { "id": "11", "cell": [ "11", "2007-10-06", "Client 1", "600.00", "120.00", "720.00", null ] }, { "id": "10", "cell": [ "10", "2007-10-06", "Client 2", "100.00", "20.00", "120.00", null ] }, { "id": "9", "cell": [ "9", "2007-10-06", "Client 1", "200.00", "40.00", "240.00", null ] }, { "id": "8", "cell": [ "8", "2007-10-06", "Client 3", "200.00", "0.00", "200.00", null ] }, { "id": "7", "cell": [ "7", "2007-10-05", "Client 2", "120.00", "12.00", "134.00", null ] }, { "id": "6", "cell": [ "6", "2007-10-05", "Client 1", "50.00", "10.00", "60.00", "" ] }, { "id": "5", "cell": [ "5", "2007-10-05", "Client 3", "100.00", "0.00", "100.00", "no tax at all" ] }, { "id": "4", "cell": [ "4", "2007-10-04", "Client 3", "150.00", "0.00", "150.00", "no tax" ] } ], "userdata": { "amount": 3220, "tax": 342, "total": 3564, "name": "Totals:" } }
http://blog.mn886.net/jqGrid/