魚乾的筆記本: jqgrid 3.5 需配合jquery ui

星期二, 9月 22, 2009

jqgrid 3.5 需配合jquery ui

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>