当loadState函数调用时,jqGrid不是函数 - 使用spring thymeleaf和jqGrid

时间:2018-02-21 15:27:37

标签: java spring spring-boot jqgrid thymeleaf

我在我的应用程序中使用了Spring boot thymeleaf和jqGrid。一切正常,直到我从jqGrid插件调用loadState函数来加载cols顺序,过滤等状态。 Columng命令加载但数据没有加载,我在浏览器的控制台中看到 TypeError:table.jqGrid不是函数

 $.jgrid.saveState("table"); 

工作正常并保存列的状态,但

$.jgrid.loadState("table");

不起作用。有没有人有同样的问题?

P.S。我的资源代码按此顺序加载:

css for jqgrid

<script type="text/javascript" th:src="@{/js/lib/jquery-1.11.3.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/lib/grid.locale-ru.js}"></script>
<script type="text/javascript" th:src="@{/js/lib/jquery-ui.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/lib/ui.multiselect.js}"></script>
    <script type="text/javascript" th:src="@{/js/lib/jquery.jqGrid.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/lib/chosen.jquery.min.js}"></script>

my js file with jqgrid table

这里有一些来自我的项目的例子很好:

var options = {
    datastr: grid_data,
    datatype: 'jsonstring',
    jsonReader: {
        root: 'gridModel',
        repeatitems: false
    },
    height: 'auto',
    editurl: URL,
    colNames: collnames,
    colModel: [
        {
            name: 'myac', index: '', width: 100, fixed: true, sortable: false, resize: false,
            formatter: 'actions',
            formatoptions: {
                keys: true,
                delbutton: false,//disable delete button
                editformbutton: true,
                editOptions: editOpt
            }
        },
        {
            name: 'id',
            label: 'ID',
            index: 'id',
            formatter: 'integer',
            width: 40,
            hidden: true,
            editable: true,
            editoptions: {disabled: true, size: 5}
        },

        {
            name: 'history',
            label: 'history',
            index: 'history',
            hidden: true,
            editable: true
        },
        {
            name: 'name',
            stype: 'text',
            label: 'name',
            index: 'name',
            editable: true,
            editOptions: {disabled: true},
            align: 'center'
        },
        {
            name: 'value',
            stype: 'text',
            index: 'value',
            editable: true,
            align: 'center'
        },
        {
            name: 'description',
            label: 'description',
            index: 'description',
            stype: 'text',
            align: 'center',
            editable: true
        }
    ],

    pager: pager,
    storeNavOptions : true,
    toppager: true,
    ignoreCase: true,
    rowNum: 15,
    rowList: [5, 10, 15, 20, 25, 30],
    altRows: true,
    viewrecords: true,
    subGrid: true,
    loadComplete: function () {

    },
};

工作不正确:

table.jqGrid({
    datatype: "json",
    jsonReader: {
        repeatitems: true
    },
    height: 'auto',
    colNames: colNames,
    colModel: colModel,
    url: URL_DATA,
    shrinkToFit: false,
    forceFit: true,
    pager: pager,
    toppager: true,
    rowNum: 10,
    rowList: [5, 10, 15, 20, 25, 30],
    loadonce: true,
    navOptions: {reloadGridOptions: {fromServer: true}},
    loadComplete: function () {
        var table = this;
        setTimeout(function () {
            updatePagerIcons(table);
            enableTooltips(table);
        }, 0);
    },
    gridComplete: function () {
        var idarray = table.jqGrid('getDataIDs');
        if (idarray.length > 0) {
            var firstid = table.jqGrid('getDataIDs')[0];
            table.setSelection(firstid);
        }
    }
});

$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size

1 个答案:

答案 0 :(得分:0)

如果你准备一个例子,那将是一件好事。

如果无法找到本地存储中的数据字符串,则无法加载 loadState ,或者在您调用loadState的位置找不到表ID。确保id =&#39; table&#39;的表格存在于您调用loadState的位置。