jqgrid快速入门之二：不用url，自己构造表格数据源

来源：互联网发布：广电网络三网融合wifi 编辑：程序博客网时间：2024/06/07 06:00
<!DOCTYPE html><html lang="en"><head>    <!--jqueryui--><link href="//cdn.bootcss.com/jqueryui/1.12.0-rc.2/jquery-ui.min.css" rel="stylesheet"><!--jqgrid的css-->    <link href="//cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet">    <!--jquery--><script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script><!--locale-->    <script src="//cdn.bootcss.com/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script><!--jqgrid的js-->    <script src="//cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>    <meta charset="utf-8" />    <title>jqGrid Loading Data - JSON Live</title></head><body>    <table id="jqGrid"></table>    <div id="jqGridPager"></div>    <script type="text/javascript">             $(document).ready(function () {            $("#jqGrid").jqGrid({                colModel: [                    {label: 'Title',                        name: 'Title',                        width: 150,                        formatter: formatTitle                    },                    {label: 'Link',                        name: 'Link',                        width: 80,                        formatter: formatLink                    },                    {label: 'View Count',                        name: 'ViewCount',                        width: 35,sorttype:'integer',formatter: 'number',align: 'right'                    },                    {label: 'Answer Count',                        name: 'AnswerCount',                        width: 25                    }                ],                viewrecords: true, // show the current page, data rang and total records on the toolbar                width: 780,                height: 200,                rowNum: 15,datatype: 'local',                pager: "#jqGridPager",caption: "Load live data from stackoverflow"            });            fetchGridData();            function fetchGridData() {                                var gridArrayData = [];// show loading message$("#jqGrid")[0].grid.beginReq();                $.ajax({                    url: "http://api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jqgrid&site=stackoverflow",                    success: function (result) {                        for (var i = 0; i < result.items.length; i++) {                            var item = result.items[i];                            gridArrayData.push({                                Title: item.title,                                Link: item.link,                                CreationDate: item.creation_date,                                ViewCount: item.view_count,                                AnswerCount: item.answer_count                            });                                                    }// set the new data$("#jqGrid").jqGrid('setGridParam', { data: gridArrayData});// hide the show message$("#jqGrid")[0].grid.endReq();// refresh the grid$("#jqGrid").trigger('reloadGrid');                    }                });            }            function formatTitle(cellValue, options, rowObject) {                return cellValue.substring(0, 50) + "...";            };            function formatLink(cellValue, options, rowObject) {                return "<a href='" + cellValue + "'>" + cellValue.substring(0, 25) + "..." + "</a>";            };                    });    </script>    </body></html>
参考官网：http://www.guriddo.net/demo/guriddojs/
0 0