文档

如何使用Grid

根据官方文档显示
1、插件的基础css、js，依赖的jq必须引入
2、可选文件（css表格主题包、js语言包）
3、若要直接上手学习、使用grid，建议都引用（不引用css表格主题包，功能显示会混乱；不使用语言包，界面会出现很多undefined）
4、若已深入了解，可以熟练改写插件，忽略第三条。

<style>
    .red{
        color: red
    }
</style>
<body>
    <table id="table"></table>
    <div id="footer"></div>
</body>
<!-- 基础css -->
<link rel="stylesheet" href="css/ui.jqgrid.css">
<!-- css主题包-->
<link rel="stylesheet" href="css/css/redmond/jquery-ui-1.8.16.custom.css" />
<!-- 依赖的jQuery -->
<script src="js/jquery-1.7.1.js"></script>
<!-- jQuery Grid -->
<script src="js/jquery.jqGrid.src.js"></script>
<!-- jQuery Grid 语言包 -->
<script src="js/i18n/grid.locale-cn.js"></script>
<!-- 页面js -->
<script src="js/index.js"></script>
</html>

开始使用!

依照官方demo（含本地data文件）仿写，可以非常便捷得使用表格，并初始化

$(function(){
    pageInit()
})

function pageInit(){
    $("#table").jqGrid({
        url:'data/data.json',
        datatype:'json',
        colNames:['id','name','age'],
        colModel:[  {"name":"id","index":"id","width":100,"align":"center","sortable":true},
            {"name":"name","index":"name","width":500,"align":"center","sortable":true},
            {"name":"age","index":"age","width":100,"align":"center","sortable":true}
        ],
        rowNum:10,
        rowList:[10,20,30,40],
        pager:"#footer",
        sortname:"id",
        mtype:'get',
        viewrecords:true,
        caption:"student",        
    })

    $("#table").jqGrid('navGrid', '#footer', {edit : true,add : true,del : true});
}

下面我主要进行记录的是demo之外的属性。

Grid 参数初探

jqGrid|初始化|参数：

[a1] -object-对ajax参数进行全局设置，可以覆盖ajax事件

ok，我照着写~
然后？？？
在这里插入图片描述

好像不太对？？？
我去瞅一瞅源码…搜索jqGrid，找到这个函数初始化

有很多很多的属性，大致锁定在这个ajaxGridOptions
来让我们实验一下(url获取不一样的data文件)
ajaxGridOptions:{url:'data/data0.json'},
（发现没有数据，data0.json是空数据文件）
在这里插入图片描述
再去看源码

ajaxGridOptions是ajax的回调函数，意味着此项可能覆盖所有当前的ajax设置。