526互联

jqgrid 示例 ，加载js中的json数据

发布时间 2023-08-25 16:32:00作者: zno2

 

<!DOCTYPE html>

<html lang="en">
<head>
<script type="text/ecmascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/ecmascript" src="js/i18n/grid.locale-en.js"></script>
<script type="text/ecmascript" src="js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<meta charset="utf-8" />
<title>jqGrid Loading local Data</title>
</head>
<body>
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#jqGrid").jqGrid({
                datatype : "local",
                colModel : [ { label : 'aL', name : 'aN', width : 51 }, { label : 'bL', name : 'bN', width : 52 } ],
                viewrecords : true,
                width : 780,
                height : 200,
                rowNum : 2,
                pager : "#jqGridPager"
            });
            $("#jqGrid").jqGrid('setGridParam', { data : [ { "aN" : "aN1", "bN" : "bN1" }, { "aN" : "aN2", "bN" : "bN2" }, { "aN" : "aN3", "bN" : "bN3" } ] });
            $("#jqGrid").trigger('reloadGrid');
        });
    </script>
</body>
</html>

 

页面显示如下： 

 

 

 

区别与网络加载：

①无 url

②datatype 为 local

③需要setGridPager 设置行数据

④需要reloadGrid 刷新分页信息