jqGrid 是一個用來顯示網格資料的jQuery外掛，用jqgrid可以輕鬆方便得實現前端頁面和後臺資料的ajax非同步資料操作

1. 自行下載所需要的包或者檔案，放在相應的根目錄下面。

• 頁面中的程式碼：

1. head中的引用：（css和js檔案的引入只是寫了方法，因為我也不知道具體該引入哪些檔案，在後續的學習中再新增）

• css檔案引入：

<link type="text/css" href="/resources/ueditor/themes/default/css/ueditor.css" /（所需要引入包或者檔案的詳細目錄）>" rel="stylesheet" />

• js檔案引入：

<script type="text/javascript" src="<c:url value="/resources/ueditor/ueditor.config.js" />" ></script>
 

• js中的程式碼：

$userGrid = $("#userGrid(document)").jqGrid({
        url: "<c:url value="/exam/manage/notifyinfo/query" />",
        prmNames: {
            id: "nid"
        }, 
        mtype: "POST",     //提交方式
        datatype: "json",   //資料的獲取方式
        colNames: ["nid","內容","更新時間"],     //列表中要顯示的資料，和表頭
        colModel: [ {name: "nid", index: "nid", editable: false, edittype: "text",hidden:true,
            editrules: {
                required: true
            },
            formoptions: {
                elmprefix: "(*)"
            }
        }, {name: "content", index: "content", editable: false, edittype: "text",//formatter: function (v) { return v.replace(/<[^>]+>/g,'') },//formatter:contentFormater,
                        editrules: {
                            required: true
                        },
                        formoptions: {
                            elmprefix: "(*)"
                        }
                    }, {name: "creatDate", index: "creatDate", editable: true, edittype: "text",
                        editrules: {
                            required: true
                        },
                        formoptions: {
                            elmprefix: "(*)"
                        }
                    }
                  ],
        jsonReader: {
            repeatitems: false, //Important! enable json row like {key1: value1, key2: value2, ...}
            id: "userPid"
        },

        rowNum: 10,    //每頁顯示的資料條數
        rowList: [10,20,30], //改變每頁顯示的條數

        pager: "#userPager",
        viewrecords: true, //在瀏覽導航欄顯示記錄總數
        sortable:true,  //是否排序
        sortname: "creatDate", //要排序的列
        sortorder: "desc",    //排序方式
    
        autowidth: true,
        height: "auto", // 100%
        rownumbers: true,
        caption: "通知公告列表",
        loadError: function(xhr, status, error) {
            alert(xhr.status + " - " + status + " - " + error);
        },
        beforeProcessing: function(data, status, xhr) {
            if(data.processResult && data.processResult.success != undefined && !data.processResult.success) {
                alert(data.processResult.statusText);
            }
        }
    });

• body中的程式碼:

<div class="datablock">

    <button id="createButton" type="button">增加</button>
    <button id="updateButton" type="button">修改</button>
    <button id="deleteButton" type="button">刪除</button>
    
    <table id="userGrid"></table>
    <div id="userPager"></div>

</div>

補充：

如果在資料庫中儲存的文字資料是html格式的，想在頁面上顯示text可以使用

formatter: function (v) { return v.replace(/<[^>]+>/g,'') } 放在colModel中的對應列中

剛剛接觸這個東西，所以對formatter不是很瞭解，之後再學習中再補