使用requireJS的jqGrid-网格加载但不起作用

jqGrid using requireJS - grid loads but does not work

本文关键字：加载 不起作用 网格 jqGrid- requireJS 使用      更新时间：2023-09-26

我正在通过requireJS将数据加载到jqGrid中，数据加载、格式化和显示，但之后什么都不起作用，排序、行选择、分页等。如果我在没有requireJS的情况下初始化jqGrid，那么网格工作得非常好。

RequireJS配置片段：

"jqGrid": "jqGrid/jquery.jqGrid.min",
"grid-locale": "jqGrid/i18n/grid.locale-en", ...
shim: {
  "jqGrid": ["grid-locale", "jquery-ui"]
}

JavaScript片段：

define(["jquery", "httpUtils", "jqGrid"],
function ($, httpUtils, jqGrid) {
    window.jqGrid = jqGrid;
    var myViewModel = function () {
        var data = httpUtils.httpSyncGet('xxx');
        var grid = $('#index').jqGrid({
            colNames: ['ClientIdentifier'],
            colModel: [
                { name: 'ClientIdentifier', width: "150pt" }
            ],
            datastr: data,
            datatype: 'jsonstring',
            rowNum: 25,
            rownumbers: true,
            height: 500,
            viewrecords: true,
            width: 1100,
            shrinkToFit: false
        });
    };
    return myViewModel;
});

很抱歉，如果代码不是很全面，我不得不从一个大项目中提取一些片段。我只是好奇是什么原因导致jqGrid完成加载，但不知何故"卸载"了它的所有函数。控制台中也没有javascript错误。

我认为您缺少一些模块和依赖项。以下是对我有效的方法（也是从一个更大的项目中删除的）：

require.config({
    baseUrl: "Scripts/TypeScript",
    paths: {
        jquerygrid: "../jquery.jqGrid.src",
        jqueryui: "../jquery-ui-1.11.4",
        jqgridlocale: "../i18n/grid.locale-en",
        jqgrid: "../jquery.jqGrid.min"
    },
    shim: {
        jqueryui: {
            deps: ["jquery"]
        },
        uigrid: {
            deps: ["jqueryui"]
        },
        jqgrid: {
            deps: ['jqueryui', 'jqgridlocale']
        },
        jqgridlocale: {
            deps: ['jqueryui']
        }
    }
});

我根据这个答案改编了上面的代码：requirejs-jquery多个依赖的非模块jquery插件，如jquery ui和jqGrid，它解决了一个更复杂的场景，但我也对您有用。

相关文章：