Question

我正在使用jqGrid来显示带有子网格的数据。数据采用xml格式。

$("#UDFs").jqGrid({
    ajaxGridOptions: { contentType: 'application/xml; charset=utf-8' },
    datatype: 'xmlstring',
    datastr: data,
    xmlReader: { root: "Response", row: "Data>UDFS>row", repeatitems: false, id: "FieldID" },
    subGrid: true,
    subgridtype: 'xml',

    subGridOptions: { "plusicon": "ui-icon-triangle-1-e", "minusicon": "ui-icon-triangle-1-s", "openicon": "ui-icon-arrowreturn-1-e" },
    subGridRowExpanded: function (subgrid_id, row_id) {
        var subgrid_table_id, pager_id;
        subgrid_table_id = subgrid_id + "_t";
        pager_id = "p_" + subgrid_table_id; $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
        jQuery("#" + subgrid_table_id).jqGrid(
        {
            datastr: $($.parseXML(data)).find('Response>Data>UDFS>row:has(FieldID:contains('+ row_id+'))').XmlToString(),
            datatype: "xmlstring",
            colNames: [  'Code', 'Name'],
            colModel: [
                            { name: "Code", index: "Code", width: 130 },
                            { name: "Name", index: "Name", width: 70 }
                      ],
            xmlReader: { root: "row", row: "ValidValues>row", repeatitems: false, id: "FieldID" },
            rowNum: 20,
            pager: pager_id,
            height: '100%'
        });
        jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: false, add: false, del: false })
    },
    colNames: ['#', 'TableID', 'SAPType', 'SAPSubType', 'SAPValidation', 'FieldID', 'AliasID', 'Descr', 'TypeID', 'SizeID', 'EditSize', 'Dflt', 'NotNull', 'RTable', 'RelUDO', 'ValidValues'],
    colModel: [

                   {
                       index: 'Tick',
                       name: 'Tick',
                       width: 50,
                       resizable: false,
                       editable: true,
                       align: 'center',
                       edittype: 'checkbox',
                       formatter: "checkbox",
                       formatoptions: { disabled: false },
                       classes: 'check',
                       editrules: { required: false }, editoptions: { size: 39, value: "True:False" }
                   },
                            { name: 'TableID', index: 'TableID', align: "left", width: 40, hidden: true },
                             { name: 'SAPType', index: 'SAPType', align: "left", width: 80 },
                            { name: 'SAPSubType', index: 'SAPSubType', align: "left", width: 80 },
                            { name: 'SAPValidation', index: 'SAPValidation', align: "left", width: 80 },
                          { name: 'FieldID', index: 'FieldID', align: "left", width: 40, hidden: false },
                            { name: 'AliasID', index: 'AliasID', align: "left", width: 180 },
                            { name: 'Descr', index: 'Descr', align: "left", width: 180 },
                             { name: 'TypeID', index: 'TypeID', align: "left", width: 80 },
                             { name: 'SizeID', index: 'SizeID', align: "left", width: 80 },
                             { name: 'EditSize', index: 'EditSize', align: "left", width: 80 },

                            { name: 'Dflt', index: 'Dflt', align: "left", width: 80 },
                            { name: 'NotNull', index: 'NotNull', align: "left", width: 80 },
                            { name: 'RTable', index: 'RTable', align: "left", width: 80 },
                            { name: 'RelUDO', index: 'RelUDO', align: "left", width: 80, hidden: false },
                            { name: 'ValidValues', index: 'ValidValues', align: "left", width: 80, formatter: formatToLink, unformat: UnformatFromLink }
                        ],



    rowNum: 15,
    mtype: 'POST',
    pager: "#UDFsMap",
    gridview: true,
    rownumbers: true,
    loadonce: true,
    forceFit: true,
    width: 1100,
    height: 250,
    caption: 'Select UDF from the below list.',
    multiselect: false,
    loadComplete: function () {
        $(this).HideBusy();
    },
    ondblClickRow: function (rowid, iRow, iCol, e) {
        selectedRowId = $("#ObjType").jqGrid('getGridParam', 'selrow');
        ObjectTypeID = $("#ObjType").jqGrid('getCell', selectedRowId, 'ObjectTypeID');
        //            $("#SelectCustomer").dialog('close');
        //            xmlDoc1 = $.parseXML(xmlString);
        //            $xml1 = $(xmlDoc1);
        //            $(this).SetValuesToControl("Landscape", $xml1);
        //            $("#uxTask").attr("binding", "true");
    }
}).jqGrid('navGrid', '#UDFsMap', { edit: false, add: false, del: false, search: true });

当网格显示在页面上时，即使子网格没有数据，它也会显示加号（+）符号/箭头。

当子网格中没有数据时，是否可以隐藏/删除此Plus（+）符号/箭头？

已更新：

我尝试了你提出的解决方案并看了样本，从第2页开始它适用于我。它不适用于第一页。

loadComplete: function (data) {
    var grid = $("#UDFs");
    var $self = $(this), rowIds = $self.jqGrid("getDataIDs"), item, i, l = rowIds.length;
    for (i = 0; i < l; i++) {
        item = $self.jqGrid("getLocalRow", rowIds[i]);
        debugger;
        if (item.ValidValues == null || item.ValidValues.length === 0) {
            // subggrid is empty
            $("#" + rowIds[i]).find(">.ui-sgcollapsed").unbind("click").html("");
        }
    }
    $(this).HideBusy();
},

当网格加载时，它从第2页开始工作。请看屏幕截图。在最后一列（ValidValues）中，如果存在则显示subgrid / plus sign否则隐藏。 enter image description here

在下面的屏幕截图中它正在工作。 enter image description here

enter image description here

Answer 1

我建议你隐藏＆＃34; +＆＃34;在loadComplete回调中没有子网格的行的图标。回调loadComplete的第一个参数包含用于填充网格的所有已解析的XML数据（datastr: data）。请参阅the old answer，其中描述了隐藏行的主要思想。您可以通过使用getDataIDs来获取当前页面行的ID，并通过id在XML数据中查找相应的项目。然后，您可以检查有关子网格的信息并隐藏图标。

The demo演示了使用JSON数据的方法。您也可以对XML数据执行相同的操作。您只需要更改测试输入数据的标准，以确定是否存在子网格。

更新：您在 UDPATED 中提出的代码仅适用于第二部分，因为您使用datatype: 'xmlstring'。在第一次加载时，data中的loadComplete是XML数据，您应该更加小心如何解析它。我的演示使用JSON而不是XML数据。因此，您应该使用我发布的模板作为模板，但您必须根据您使用的数据格式对其进行修改。

即使在子网格没有使用xml的数据之后，jqGrid也会显示+符号

1 个答案: