直接從json檔案中讀取資料

html檔案

 <div class="table_grid">
    <table id="gridtable"></table>
    <div id="pagelist"></div>
  </div>

json檔案

[{
  "sno": "20160801",
  "sname": "張三",
  "ssex": "女",
  "age": "21",
  "profession": "軟體工程",
  "mailbox": "[email protected]",
  "phonenumber": "13434343342"
}, {
  "sno": "20160802",
  "sname": "李四",
  "ssex": "男",
  "age": "20",
  "profession": "通訊工程",
  "mailbox": "
 
[email protected]",
  "phonenumber": "18440403030"
}, {
  "sno": "20160803",
  "sname": "王五",
  "ssex": "女",
  "age": "23",
  "profession": "網路工程",
  "mailbox": "33333[email protected]",
  "phonenumber": "17637373737"
},{
  "sno": "20160804",
  "sname": "趙六",
  "ssex": "男",
  "age": "19",
  "profession": "經濟專業",
  "mailbox": "
 
[email protected]",
  "phonenumber": "13434343342"
},{
  "sno": "20160805",
  "sname": "周七",
  "ssex": "女",
  "age": "22",
  "profession": "金融專業",
  "mailbox": "[email protected]",
  "phonenumber": "13434343342"
},{
  "sno": "20160806",
  "sname": "劉八",
  "ssex": "女",
  "age": "22",
  "profession": "金融專業",
  "mailbox": "
 
[email protected]",
  "phonenumber": "13434343342"
}]

$(function () {
            $("#gridtable").jqGrid({
                url: "./grid_data.json",
                datatype: "json",
                mtype: "POST",
                colNames: ["學號", "姓名", "性別", "年齡", "專業", "郵箱", "電話號碼"],
                colModel: [
                    {name: 'sno', index: 'sno', align: 'center'},
                    {name: 'sname', index: 'sname', align: 'center'},
                    {name: 'ssex', index: 'ssex', align: 'center'},
                    {name: 'age', index: 'age', align: 'center'},
                    {name: 'profession', index: 'profession', align: 'center'},
                    {name: 'mailbox', index: 'mailbox', align: 'center'},
                    {name: 'phonenumber', index: 'phonenumber', align: 'center'}
                ],
                altRows: true,//單雙行樣式不同
                altclass: 'differ',
                viewrecords: true,//顯示總記錄數
                rowNum: 5,//每頁顯示記錄數
                altRows: true,//分頁選項，可以下拉選擇每頁顯示記錄數
                rowList: [5, 10, 20],//用於改變顯示行數的下拉列表框的元素陣列
                autowidth: true,//自動匹配寬度
                loadonce: true,
                gridview: true, //加速顯示
                rownumbers: true,//新增左側行號
                sortable: true,  //可以排序
                sortname: 'sno',  //排序欄位名
                sortorder: "asc",//排序方式：正序，本例中設定預設按sno倒序排序
                pagerpos: "center",
                pager: '#pagelist'//表格資料關聯的分頁條，html元素

            });
             jQuery("#gridtable").jqGrid('setLabel',0, '序號','labelstyle');