website:
http://www.trirand.com/blog/
document:
wiki jqgrid 趕流行，3.5後也利用wiki編文件了
download:
jqgrid lastest
正要寫個新專案要用到jqGrid
看到jqGrid 3.5釋出了 就開心的拿來用
下載時發現 還「金熬」跟jquery ui一樣可自定要的功能再下載
青菜勾勾就按了下載...
解開壓縮檔 看到有install.txt
看都不看 照著過去的方法 就去設定了
結果搞了半天還沒出來
記得兩、三下就該用好的東西呀
還上網查了一下... 結果查到自己寫的設定 = ="
怪了... 最後認命的再打開install.txt看
才知道設定有改了，但是demo的內文還是用舊的
所以不能開心的全複製貼上...要小調一下
1.不用自定的theme,改用jquery-ui
download:
jquery-ui
問：什麼..鏈結只是網站...
答：自己勾要載什麼啦 啥... 不知要勾什麼...這...問goolge大神吧
所以囉，要再html裡加入這句
<link rel="stylesheet" type="text/css" media="screen" href="path_to_ui_css_file/jquery-ui-1.7.2.custom.css" />
2.指定jqgrid.css
雖然改用了jquery-ui，但本身還是有其css設定
<link rel="stylesheet" type="text/css" media="screen" href="path_to_jqgrid_css_file/ui.jqgrid.css" />
3.指定grid.locale-XX.js及jquery.jqGrid.min.js
grid.locale-XX.js是語系包，在js/i18n的資料夾裡
jquery.jqGrid.min.js當然就是jgGrid本身的js啦
<script src="path_to_js_files/grid.locale-en.js" type="text/javascript"/></script/>
<script src="path_to_js_files/jquery.jqGrid.min.js" type="text/javascript"/></script/>
而原本設定的"imgpath"就用不到了
jQuery("#list4").jqGrid(
...
imgpath: gridimgpath //這行就不用了，拿掉
});
完整的範例如下 (利用array完成)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery-1.3.2.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>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script type="text/javascript">
$(function(){
jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{
name: 'id',
index: 'id',
width: 60,
sorttype: "int"
}, {
name: 'invdate',
index: 'invdate',
width: 90,
sorttype: "date"
}, {
name: 'name',
index: 'name',
width: 100
}, {
name: 'amount',
index: 'amount',
width: 80,
align: "right",
sorttype: "float"
}, {
name: 'tax',
index: 'tax',
width: 80,
align: "right",
sorttype: "float"
}, {
name: 'total',
index: 'total',
width: 80,
align: "right",
sorttype: "float"
}, {
name: 'note',
index: 'note',
width: 150,
sortable: false
}],
multiselect: true,
caption: "Manipulating Array Data"
});
var mydata = [{
id: "1",
invdate: "2007-10-01",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
}, {
id: "2",
invdate: "2007-10-03",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
}, {
id: "3",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
}];
for (var i = 0; i <= mydata.length; i++)
jQuery("#list4").addRowData(i + 1, mydata[i]);
});
</script>
</head>
<body>
<table id="list4" class="scroll" cellpadding="0" cellspacing="0">
</table>
</body>
</html>
