Jqgrid入門 - 簡書

最近要用Jqgrid做項目窖贤，之前都沒怎么接觸過，看了看官網有一個小demo诫惭，于是下下來后佩番，發(fā)現(xiàn)這個demo有點問題，度娘了一下踱侣，發(fā)現(xiàn)有的博主直接貼官網的代碼粪小，截了個圖，我真是***抡句，還是得靠自己探膊。。待榔。

基本配置配好之后逞壁，自己的第一個表格，樣式及功能如下：

效果.png

增.png

刪.png

改.png

查.png

整個頁面代碼：

<!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></title>
        
        <!-- 本頁面初始化用到的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: ['序號', '時間', '顧客', '金額', '數(shù)量', '總計', '備注'],
            colModel: [
                { name: 'id', index: 'id', width: 60, sorttype: "int", editable: true },
                { name: 'invdate', index: '時間', 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', //分頁工具欄  
            rowNum: 10, //每頁顯示記錄數(shù) 
            viewrecords: true, //是否顯示行數(shù) 
            rowList: [10, 20, 30], //可調整每頁顯示的記錄數(shù) 
            multiselect: true,
            caption: "操作數(shù)組數(shù)據(jù)"http://相當于標題
        });
        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>

這當中還有很多參數(shù)還沒有接觸過绑嘹，大家可以詳細參考官網，總之遇到新東西（對于我來說）要靜下心來學橘茉，學到老工腋，活到老~