Question

$("#jqGrid").jqGrid({
    url: "getJsonData",
    async: true,
    mtype: "GET",   
    datatype: "json",
    colModel: [                      
        { label: 'TESTID', name: 'testID', width: 60, sorttype: 'integer' ,
          colmenu : true,
          coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
          searchoptions : {
              searchOperMenu : false,
              sopt : ['eq','gt','lt','ge','le']
          }
        },
        { label: 'SUBTESTID', name: 'subTestID', width:80, sorttype: 'string' ,
          colmenu : true,
          coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
          searchoptions : {
              searchOperMenu : false,
              sopt : ['eq','gt','lt','ge','le']
          }
        },
        { label: 'CLIENT', name: 'client', width: 60, sorttype: 'string',
          colmenu : true,
          coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
          searchoptions : {
              searchOperMenu : false,
              sopt : ['eq','gt','lt','ge','le']
          }
        },
        { label: 'RESULTS', name: 'testResults', width: 70, sorttype: 'string',
          colmenu : true,
          coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:true, freeze : true},
          searchoptions : {
              searchOperMenu : false,
              sopt : ['eq','gt','lt','ge','le']
          }
        },
        { lable:"Seq Id", hidden:true, name: 'seqId' }
    ],
    loadComplete: function () {
        var rowIds = $('#jqGrid').jqGrid('getDataIDs');
        for (i = 0; i < rowIds.length; i++) {//iterate over each row
            rowData = $('#jqGrid').jqGrid('getRowData', rowIds[i]);
            if (rowData['testResults'] === "Pass") {
                $('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass");
            }
            if (rowData['testResults'] == "Fail") {
                $('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass1");
            }
        }
    }, 
    onSelectRow:function(rowid){
        var rowData = jQuery('#jqGrid').jqGrid('getRowData', rowid);
        if (rowData['testResults'] == "Fail") {
            console.log("clicked");
            $(this).jqGrid("toggleSubGridRow", rowid);
        }
    },
    subGrid: true, 
    subgridtype:"json",
    subGridRowExpanded: function(subgrid_id, row_id) {
        var rowData = jQuery('#jqGrid').jqGrid('getRowData', row_id);
        console.log("rowData:::"+rowData);
        var seqId=rowData['seqId'];

        console.log(seqId)
        subgrid_table_id = subgrid_id+"_t";
        pager_id = "p_"+subgrid_table_id;
        $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class=' table2 scroll table-striped table' style='border: 1px solid #ccc;'></table>");
        jQuery("#"+subgrid_table_id).jqGrid({
            url:"getCommentsJsonData/"+seqId,
            datatype: "json",
            mtype: "GET",
            height:'auto',
            width: 1400,
            colNames: ['File Name','Field Name','Actual Field Value ','Excpected Field Value'],
            colModel: [
                {name:"fileName",index:"fileName"},
                {name:"fieldName",index:"fieldName"},
                {name:"actualFieldValue",index:"actualFieldValue"},
                {name:"excpectedFiledValue",index:"excpectedFiledValue"},
            ],
            loadonce:true,
            rowNum:20
        });
    },
    loadonce: true,
    //navOptions: { reloadGridOptions: { fromServer: true } },
    viewrecords: true,
    width: 1390,
    height: 300,
    rowNum: 3000,
    colMenu : true,
    shrinkToFit : true,     
    grouping: true,
    hoverrows:false,
    groupingView: {
        groupField: ["client"],
        groupColumnShow: [true],
        groupText: ["<b>{0}</b>"],
        groupOrder: ["asc"],
        groupSummary: [false],
        groupCollapse: false            
    },
    scroll: 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
    emptyrecords: 'Scroll to bottom to retrieve new page', // the message will be displayed at the bottom
    sortable: true,
    caption: "ART TEST CASES RESULTS",// set caption to any string you wish and it will appear on top of the grid
    pager: "#jqGridPager"
});

$("#jqGrid").jqGrid("hideCol", "subgrid");   

// activate the build in search with multiple option
$('#jqGrid').navGrid("#jqGridPager", {          
        search: true, // show search button on the toolbar
        add: false,
        edit: false,
        del: false,
        refresh: true,
    },
    {}, // edit options
    {}, // add options
    {}, // delete options
    { multipleSearch: true } // search options - define multiple search
);
$('.colmenu').on('click',function(event){
    event.preventDefault();
}) 
// on chang select value change grouping
jQuery("#chngroup").change(function(){
    var vl = $(this).val();
    if(vl) {
        if(vl === "clear") {
            jQuery("#jqGrid").jqGrid('groupingRemove',true);
        } else {
            jQuery("#jqGrid").jqGrid('groupingGroupBy',vl);
        }
    }
});

当我在子网格中设置loadonce = true时不工作但是当我将其更改为loadonce = false时，subgrid正在工作，但我的分页和搜索功能不起作用。

$(document).ready(function(){
    $.jgrid.styleUI.Bootstrap.base.rowTable = "  table1 table-bordered";
    var previousRowId = 0;
    $("#jqGrid").jqGrid({
        url: "getJsonData",
        async: true,
        mtype: "GET",   
        datatype: "json",
        colModel: [                      
            { label: 'TESTID', name: 'testID', width: 60, sorttype: 'integer' ,
              colmenu : true,
              coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
              searchoptions : {
                  searchOperMenu : false,
                  sopt : ['eq','gt','lt','ge','le']
              }
            },
            { label: 'SUBTESTID', name: 'subTestID', width:80, sorttype: 'string' ,
              colmenu : true,
              coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
              searchoptions : {
                  searchOperMenu : false,
                  sopt : ['eq','gt','lt','ge','le']
              }
            },
            { label: 'CLIENT', name: 'client', width: 60, sorttype: 'string' ,
              colmenu : true,
              coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
              searchoptions : {
                  searchOperMenu : false,
                  sopt : ['eq','gt','lt','ge','le']
              }
            },
            { label: 'RESULTS', name: 'testResults', width: 70, sorttype: 'string' ,
              colmenu : true,
              coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:true, freeze : true},
              searchoptions : {
                  searchOperMenu : false,
                  sopt : ['eq','gt','lt','ge','le']
              }
            },
            {
              lable:"Seq Id",
              hidden:true, 
              name: 'seqId'              
            }
        ],
        loadComplete: function () {
            var rowIds = $('#jqGrid').jqGrid('getDataIDs');
            for (i = 0; i < rowIds.length; i++) {//iterate over each row
                rowData = $('#jqGrid').jqGrid('getRowData', rowIds[i]);

                if (rowData['testResults'] === "Pass") {    
                    $('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass");
                } 
                if (rowData['testResults'] == "Fail") {
                    $('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass1");
                } 
            } 
        }, 
        onSelectRow:function(rowid){
            var rowData = jQuery('#jqGrid').jqGrid('getRowData', rowid);
            if (rowData['testResults'] == "Fail") {
                console.log("clicked");
                $(this).jqGrid("toggleSubGridRow", rowid);
            }
        },
        subGrid: true, 
        subgridtype:"json",
        subGridRowExpanded: function(subgrid_id, row_id) {
            var rowData = jQuery('#jqGrid').jqGrid('getRowData', row_id);
            console.log("rowData:::"+rowData);
            var seqId=rowData['seqId'];

            console.log(seqId)
            subgrid_table_id = subgrid_id+"_t";
            pager_id = "p_"+subgrid_table_id;
            $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class=' table2 scroll table-striped table' style='border: 1px solid #ccc;'></table>");
            jQuery("#"+subgrid_table_id).jqGrid({
                url:"getCommentsJsonData/"+seqId,
                datatype: "json",
                mtype: "GET",
                height:'auto',
                width: 1400,
                colNames: ['File Name','Field Name','Actual Field Value ','Excpected Field Value'],
                colModel: [
                    {name:"fileName",index:"fileName"},
                    {name:"fieldName",index:"fieldName"},
                    {name:"actualFieldValue",index:"actualFieldValue"},
                    {name:"excpectedFiledValue",index:"excpectedFiledValue"},
                ],
                loadonce:true,
                rowNum:20
            });
        },
        loadonce: true,
        //navOptions: { reloadGridOptions: { fromServer: true } },
        viewrecords: true,
        width: 1390,
        height: 300,
        rowNum: 3000,
        colMenu : true,
        shrinkToFit : true,     
        grouping: true,
        hoverrows:false,
        groupingView: {
            groupField: ["client"],
            groupColumnShow: [true],
            groupText: ["<b>{0}</b>"],
            groupOrder: ["asc"],
            groupSummary: [false],
            groupCollapse: false            
        },
        scroll: 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
        emptyrecords: 'Scroll to bottom to retrieve new page', // the message will be displayed at the bottom
        sortable: true,
        caption: "ART TEST CASES RESULTS",// set caption to any string you wish and it will appear on top of the grid
        pager: "#jqGridPager"
    });

    $("#jqGrid").jqGrid("hideCol", "subgrid");   

    // activate the build in search with multiple option
    $('#jqGrid').navGrid("#jqGridPager", {          
            search: true, // show search button on the toolbar
            add: false,
            edit: false,
            del: false,
            refresh: true,
        },
        {}, // edit options
        {}, // add options
        {}, // delete options
        { multipleSearch: true } // search options - define multiple search
    );
    $('.colmenu').on('click',function(event){
        event.preventDefault();
    }) 
    // on chang select value change grouping
    jQuery("#chngroup").change(function(){
        var vl = $(this).val();
        if(vl) {
            if(vl === "clear") {
                jQuery("#jqGrid").jqGrid('groupingRemove',true);
            } else {
                jQuery("#jqGrid").jqGrid('groupingGroupBy',vl);
            }
        }
    });     
});

Answer 1

我会说哇!!!您尝试在一个网格中快速使用网格的所有属性。

让我们从头开始。

网格选项

... 异步：是的， ......

出错并且没有效果。要使此选项生效，应将其放在ajaxGridOptions对象中。请参阅docs here，但说实话，ajax中的此选项默认为true，因此无需使用它。

网格完成中的代码完全无效。使用rowattr event同样成功，更优雅这意味着您不需要使用getRowData和setRowData方法，只需分析行并放入适当的类。
我不确定你在onSelectRow中尝试使用的是什么。我建议你先禁用此事件，这会导致你的问题并显示隐藏的子网格行
如果启用分组，则选项滚动：1将无效分组：true

我建议你首先在网格中解决这些问题如果有问题，请告诉我们。

加载一次为真时，jqgrid子网格无法正常工作

1 个答案: