关于使用 jgGrid 创建动态列的问题

Question

我制作了一个使用 jqGrid table 创建动态列的演示，但遇到了一些问题。这是 jqGrid 代码片段：

$.ajax(
    {
        type: "get",
        url: "reports/providerList",
        dataType: "json",
        success: function(result)
        {
            var colNames = result.rows.colNames;
            var colModels = result.rows.colModels;
            $(grid_selector).jqGrid('GridUnload');

            jQuery(grid_selector).jqGrid({
                url: 'reports/getData',
                datatype: 'json',
                mtype: 'get',
                colNames: colNames,
                colModel: colModels,
                viewrecords : true,
                rownumbers:true,
                rowNum:15,
                rowList:[15,30],
                pager : pager_selector,
                altRows: true,
                loadComplete : function() {
                    var table = this;
                    setTimeout(function(){
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },
            });
        },
        error: function(x, e)
        {
            alert(x.readyState + " "+ x.status +" "+ e.msg);
        }
    });

我的后端控制器：

    @GetMapping("/providerList")
    @ResponseBody
    public Map<String, Object> providerList(@RequestParam(value = "rows", required = false) Integer pageSize, @RequestParam(value = "page", required = false) Integer pageNumber){
        JQGridModel jqGridModel = new JQGridModel();
        Map<String, Object> map = new HashedMap();
        map.put("total", 4);
        map.put("rows", jqGridModel);
        map.put("records", 6);
        return map;
    }

    @GetMapping("/getData")
    @ResponseBody
    public Map<String, Object> getData(){
        List<ColData> colDatas = new ArrayList<>();
        ColData colData1 = new ColData(2, "hello", new Date().toString(), "true", "admin");
        ColData colData2 = new ColData(5, "say", new Date().toString(), "false", "pechen");
        colDatas.add(colData1);
        colDatas.add(colData2);
        colDatas.add(colData2);

        Map<String, Object> map = new HashedMap();
        map.put("total", 4);
        map.put("rows", colDatas);
        map.put("records", 6);
        return map;
    }

后台数据格式：

public class JQGridModel {
    private List<String> colNames;
    private List<ColModel> colModels;

    public JQGridModel() {
        colNames = new ArrayList<>();
        colNames.add("id");
        colNames.add("name");
        colNames.add("createTime");
        colNames.add("status");
        colNames.add("updateBy");

        colModels = new ArrayList<>();
        ColModel colModel1 = new ColModel("id", "id", 60f, false, false);
        ColModel colModel2 = new ColModel("name", "index", 60f, false, false);
        colModels.add(colModel1);
        colModels.add(colModel2);
        colModels.add(colModel2);
        colModels.add(colModel2);
        colModels.add(colModel2);
    }
}

但是我只得到这个结果，有些列没有显示数据：

我注意到 /reports/providerList 和 /reports/getData 在调试模式下被命中。出了什么问题，有人可以帮忙吗？

Answer 1

在我看来，错误的根源似乎是 JQGridModel 构造函数的最后几行。您多次使用 colModels.add(colModel2)。这是不对的。 colNames 包含标签：显示在列 headers 中的文本。一个允许在 colNames 中使用重复字符串或空字符串。另一方面，colModel 必须包含 unique name 值，不能为空，不能包含空格。

您必须更改 JQGridModel 构造函数 colModels 的代码以使用您当前用于填充 colNames.

的名称填充它

关于使用 jgGrid 创建动态列的问题

Problems about create dynamic columns with jgGrid

spring-mvc

jqgrid

thymeleaf