Question

我是jqGrid的新手，我想以动态方式生成groupHeaders，但它确实有效，getValues（'department'）语句分析用户输入的部门，例如'a，b，c'。代码为forrow：

function search() {
        var startDate = $('#startDate').val();
        var endDate = $('#endDate').val();
        var department = getValues('department');

        var colName = new Array();
        var colAttr = new Array();
        colName[0] = "日期";
        colAttr[0] = "{name:'" + colName[0] + "',sortable:false,align:'center'}"

        var length = getLength(department);
        for (var i = 1; i < length + 1; i++) {
            colName[2 * i - 1] = "咨询" + i;
            colName[2 * i] = "投诉" + i;
            colAttr[2 * i - 1] = "{name:'" + colName[2 * i - 1] + "'index:'" + i + "',sortable:false,align:'center'}";
            colAttr[2 * i] = "{name:'" + colName[2 * i] + "',sortable:false,align:'center'}";
        }
        var header = mySplitter(department);

        var urlStr = '<%=jspName%>?startDate=' + startDate + '&endDate=' + endDate + '&action=query&department=' + department;
        urlStr = encodeURI(urlStr);
        jQuery("#dataGrid").clearGridData();
        jQuery("#dataGrid").GridUnload();
        jQuery("#dataGrid").jqGrid({
            url: urlStr,
            datatype: "json",
            colNames: colName,
            colModel: colAttr,
            height: 450,
            rowNum: 20000,                    //默认每页记录数
            rowList: [10, 20, 30],          //可选择的每页记录数
            pager: '#dataPager',
            shrinkToFit: true,
            hidegrid: false,
            emptyrecords: "暂无数据",
            viewrecords: true,
            loadonce: true, //自动翻页
            caption: "<%=title%>"
        });
        jQuery("#dataGrid").jqGrid('navGrid', '#dataPager', {edit: false, add: false, del: false, autowidth: true});
        $("#dataGrid").setGridWidth($(window).width() * 0.90);
        jQuery("#dataGrid").jqGrid('setGroupHeaders', {
            useColSpanStyle: true,
            groupHeaders: header
        });
    }

function mySplitter(str) {
        if (str === null) {
            return null;
        }
        var temp;
        temp = str.split(",");
        var result = new Array();
        for (var i = 0; i < temp.length - 1; i++) {
            result[i] = "{startColumnName: '" + (i + 1) + "', numberOfColumns: 2, titleText: '" + temp[i] + "'}";
        }
        return result;
    }

    function getLength(str) {
        if (str === null) {
            return 0;
        }
        var temp = str.split(",");
        return temp.length - 1;

    }

代码未生成groupHeaders。有人可以帮助我吗？

Answer 1

colModel数组的元素必须是具有属性name等的对象。而不是将字符串设置为colAttr的元素。

在JavaScript中，您绝不应该使用new Array()而不是[]：

var colName = ["日期"],
    colAttr = [{name: colName[0], sortable:false, align: 'center'}],
    i;

如果您需要使用新项目附加数组，最好使用push方法。

另外你应该

从所有index项中删除colModel属性。您使用loadonce: true。因此，您可以在删除index属性后使用本地排序。
如果您需要为所有列定义某些属性，则最好从colModel项中删除重复项（删除sortable:false,align:'center'）并使用设置添加jqGrid选项cmTemplate。例如，您可以使用cmTemplate: { sortable: false, align: "center" }。
我建议您添加gridview: true和autoencode: true选项。此外，您应该考虑使用height: "auto"代替height: 450。
我建议您将postData功能用作属性，而不是手动构建urlStr（有关详细信息，请参阅the answer）。如果选项可以是

url: '<%=jspName%>',
postData: {
    startDate: function () { return $("#startDate").val(); },
    endDate: function () { return $("#endDate").val(); },
    action: "query",
    department: function () { return getValues('department'); }
}

jqGrid groupHeaders问题

1 个答案: