最近要用Jqgrid做項(xiàng)目，之前都沒(méi)怎么接觸過(guò)，看了看官網(wǎng)有一個(gè)小demo，于是下下來(lái)后，發(fā)現(xiàn)這個(gè)demo有點(diǎn)問(wèn)題，度娘了一下，發(fā)現(xiàn)有的博主直接貼官網(wǎng)的代碼，截了個(gè)圖，我真是***，還是得靠自己。。。
基本配置配好之后，自己的第一個(gè)表格，樣式及功能如下：
效果.png
增.png
刪.png
改.png
查.png
整個(gè)頁(yè)面代碼：
<!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組件基礎(chǔ)樣式包-必要 -->
<link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css" />
<!-- jqGrid主題包-非必要 -->
<!-- 在jqgrid/css/css這個(gè)目錄下還有其他的主題包，可以嘗試更換看效果 -->
<link rel="stylesheet" href="jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />
<!-- jquery插件包-必要 -->
<!-- 這個(gè)是所有jquery插件的基礎(chǔ)，首先第一個(gè)引入 -->
<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插件的多語(yǔ)言包-非必要 -->
<!-- 在jqgrid/js/i18n下還有其他的多語(yǔ)言包，可以嘗試更換看效果 -->
<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
<title></title>
<!-- 本頁(yè)面初始化用到的js包，創(chuàng)建jqGrid的代碼就在里面 -->
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<table id="list4"></table>
<div id="pager" ></div>
<script>
$(function () {
jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames: ['序號(hào)', '時(shí)間', '顧客', '金額', '數(shù)量', '總計(jì)', '備注'],
colModel: [
{ name: 'id', index: 'id', width: 60, sorttype: "int", editable: true },
{ name: 'invdate', index: '時(shí)間', width: 90, sorttype: "date", editable: true },
{ name: 'name', index: 'name', width: 100, editable: true },
{ name: '金額', index: '金額', width: 80, align: "right", sorttype: "float", editable: true },
{ name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float", editable: true },
{ name: 'total', index: 'total', width: 80, align: "right", sorttype: "float", editable: true },
{ name: 'note', index: 'note', width: 150, sortable: false, editable: true }
],
pager: 'pager', //分頁(yè)工具欄
rowNum: 10, //每頁(yè)顯示記錄數(shù)
viewrecords: true, //是否顯示行數(shù)
rowList: [10, 20, 30], //可調(diào)整每頁(yè)顯示的記錄數(shù)
multiselect: true,
caption: "操作數(shù)組數(shù)據(jù)"http://相當(dāng)于標(biāo)題
});
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "張三", note: "note", 金額: "200.00", tax: "10.00", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "李四", note: "note2", 金額: "300.00", tax: "20.00", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "李飛", note: "note3", 金額: "400.00", tax: "30.00", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "鳴人", note: "note", 金額: "200.00", tax: "10.00", total: "210.00" },
{ id: "5", invdate: "2007-10-05", name: "路飛", note: "note2", 金額: "300.00", tax: "20.00", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "佐助", note: "note3", 金額: "400.00", tax: "30.00", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "路人甲", note: "note", 金額: "200.00", tax: "10.00", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "路人甲", note: "note2", 金額: "300.00", tax: "20.00", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "路人甲", note: "note3", 金額: "400.00", tax: "30.00", total: "430.00" },
{ id: "10", invdate: "2007-10-01", name: "路人甲", note: "note", 金額: "200.00", tax: "10.00", total: "210.00" },
{ id: "11", invdate: "2007-10-02", name: "路人甲", note: "note2", 金額: "300.00", tax: "20.00", total: "320.00" },
{ id: "12", invdate: "2007-09-01", name: "路人甲", note: "note3", 金額: "400.00", tax: "30.00", total: "430.00" },
{ id: "13", invdate: "2007-10-04", name: "路人甲", note: "note", 金額: "200.00", tax: "10.00", total: "210.00" },
{ id: "14", invdate: "2007-10-05", name: "路人甲", note: "note2", 金額: "300.00", tax: "20.00", total: "320.00" },
{ id: "15", invdate: "2007-09-06", name: "路人甲", note: "note3", 金額: "400.00", tax: "30.00", total: "430.00" },
{ id: "16", invdate: "2007-10-04", name: "路人甲", note: "note", 金額: "200.00", tax: "10.00", total: "210.00" },
{ id: "17", invdate: "2007-10-03", name: "路人甲", note: "note2", 金額: "300.00", tax: "20.00", total: "320.00" },
{ id: "18", invdate: "2007-09-01", name: "路人甲", note: "note3", 金額: "400.00", tax: "30.00", total: "430.00" }
];
for (var i = 0; i <= mydata.length; i++)
jQuery("#list4").jqGrid('addRowData', i + 1, mydata[i]);
jQuery("#list4").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: true, refresh: true });
});
</script>
</body>
</html>
這當(dāng)中還有很多參數(shù)還沒(méi)有接觸過(guò)，大家可以詳細(xì)參考官網(wǎng)，總之遇到新東西（對(duì)于我來(lái)說(shuō)）要靜下心來(lái)學(xué)，學(xué)到老，活到老~
