Search code examples
spring-mvcjqgridthymeleaf

Problems about create dynamic columns with jgGrid

I made a demo to create dynamic columns with jqGrid table, but faced with some problems. This is the jqGrid code snippet:

$.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);
        }
    });

my backend controller:

    @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;
    }

The data format at backend:

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);
    }
}

But I only to get this outcomes, no data shown in some columns: enter image description here

I noticed the /reports/providerList and /reports/getData was hit in debug mode. What's going wrong, can anyone help?

Solution

  • The origin of the error seems to me the last lines of your JQGridModel constructor. You use colModels.add(colModel2) multiple times. It's wrong. The colNames contains labels: the texts displayed in the column headers. One allow to use duplicates or empty strings in colNames. On the other side the colModel have to contains unique name values, which can't be empty, can't contains spaces.

    You have to change the code of JQGridModel constructor colModels to fill it with the names, which you use currently to fill colNames.