jqGrid устанавливает ширину сетки на 100% - PullRequest
Новая
       11

jqGrid устанавливает ширину сетки на 100%

0 голосов
/ 26 февраля 2020

Я использую jqGrid для отображения данных в сетке на странице aspx. Я установил ширину для столбцов в colModel и autowidth: true, shrinkToFit: true и forceFit: true в параметрах jqGrid. В Chrome сетка имеет горизонтальную полосу прокрутки, но я хочу, чтобы сетка помещалась в пространство контейнера. Это мой код разметки: 

<div id="mainContainerDocument" style="width:100%;" >
  <div id="divErrorDocument" runat="server" class="ui-state-error" visible="false"><asp:Literal ID="EsitoTransazioneContact" runat="server"></asp:Literal></div>
  <div id="gridContentDocumentVerification">
    <table id="gridDocumentVerification"></table>
    <div id="pagerGridDocument"></div>
    <div id="emptyGridContentDocument" class="ui-state-highlight" visible="false"></div>                           
  </div>
</div>

Это моя конфигурация jqGrid: 

function initializeGridDocument('#gridContentDocumentVerification', '#gridDocumentVerification', '#pagerGridDocument', '#emptyGridContentDocument') {

var gridId = gridSelector;
var pager_top = gridSelector + '_toppager';
jQuery(gridSelector).jqGrid("GridUnload");
jQuery(gridSelector).jqGrid({
    loadui: "block",
    mtype: 'POST',
    ajaxGridOptions: {
        contentType: 'application/json; charset=utf-8'
    },
    ajaxEditOptions: {
        contentType: 'application/json; charset=utf-8',
        datatype: "json"
    },
    ajaxRowOptions: {
        contentType: 'application/json; charset=utf-8'
    },
    datatype: "json",
    serializeGridData: function (postData) {
        if (postData.searchField === undefined) postData.searchField = null;
        if (postData.searchString === undefined) postData.searchString = null;
        if (postData.searchOper === undefined) postData.searchOper = null;
        if (postData.columnList === undefined) {
            postData.columnList = $.map($(gridSelector).jqGrid('getGridParam', 'colModel'), function (value, index) {
                if (value.fetched)
                    return value.index;
            }).join(';');
        }
        if ((postData.searchField != undefined) && (postData.searchField != "")) {
            if (postData.searchField.indexOf('DATE_') > -1) {
                if (postData.searchString.match(/Z$/) == null)
                    postData.searchString = mLoc2UTC(postData.searchString, 'L').toISOString();
            }
        }
        postData = $.extend(postData, {
            _search: true,
            userId: $('#hfCODE_USERID').val(),
            siteId: pageParams.siteid,

            custid: pageParams.customerId,
            custtypeid: pageParams.customerTypeId,
            contractid: pageParams.contractId
        });

        return JSON.stringify(postData);
    },
    url: 'CustomerIdentityVerification.aspx/getDocumentList',
    editurl: '',
    colNames: ['', '', '', '', '', '', '', '', t('label.documentid'), t('label.documentstate'), t('label.type'), '', t('label.uploaddate'), t('label.ticketid'), '', t('label.assignedto'), '', t('label.documentstate'), '', t('label.validationresult'), '', '', t('label.verification'), t('label.delete')],
    colModel: [
    {
        name: 'CODE_DOCUMENT_MODEL_ID',
        index: 'CODE_DOCUMENT_MODEL_ID',
        jsonmap: 'OGGETTO.CODE_DOCUMENT_MODEL_ID',
        sortable: false,
        width: 15,
        fixed: true,
        formatter: function (cellvalue, options, rowObject) {
            $.extend(options, {
                idGridReload: gridSelector,
            });

            $.extend(rowObject.OGGETTO, {
                CODE_SITEID: $('#ddl_site_Options').val(),
            });
            return FormatterViewAction(cellvalue, options, rowObject);
        },
    },
    {
        name: 'CODE_DOCUMENT_MODEL_ID',
        index: 'CODE_DOCUMENT_MODEL_ID',
        jsonmap: 'OGGETTO.CODE_DOCUMENT_MODEL_ID',
        sortable: false,
        hidden: true
    },
    {
        name: 'CODE_CUSTOMER_ID',
        index: 'CODE_CUSTOMERID',
        jsonmap: 'OGGETTO.CODE_CUSTOMER_ID',
        sortable: false,
        hidden: true
    },
    {
        name: 'CODE_SITEID',
        index: 'CODE_SITEID',
        jsonmap: 'OGGETTO.CODE_SITEID',
        sortable: false,
        hidden: true
    },
    {
        name: 'CODE_CUSTOMERTYPEID',
        index: 'CODE_CUSTOMERTYPEID',
        jsonmap: 'OGGETTO.CODE_CUSTOMERTYPEID',
        sortable: false,
        hidden: true
    },
    {
        name: 'CODE_CONTRACT_ID',
        index: 'CODE_CONTRACT_ID',
        jsonmap: 'OGGETTO.CODE_CONTRACT_ID',
        sortable: false,
        hidden: true
    },

    {
        name: 'CODE_DOCUMENT_MODEL_STATE_ID',
        index: 'CODE_DOCUMENT_MODEL_STATE_ID',
        jsonmap: 'OGGETTO.CODE_DOCUMENT_MODEL_STATE_ID',
        sortable: false,
        hidden: true
    },
    {
        name: 'FlagState',
        index: 'FlagState',
        jsonmap: 'OGGETTO.CODE_DOCUMENT_MODEL_ID',
        sortable: false,
        formatter: function (cellvalue, options, rowObject) {
            return FormatterDocumentStateImg(cellvalue, options, rowObject);
        },
        width: 15,
        fixed: true
    },


    {
        name: 'VALO_DOCUMENT_MODEL_ID',
        index: 'VALO_DOCUMENT_MODEL_ID',
        jsonmap: 'OGGETTO.VALO_DOCUMENT_MODEL_ID',
        sortable: true, group: true, label: t('label.documentid'), search: true, searchoptions: { sopt: ['eq', 'ne', 'cn'] },
        width: 130
    },
    {
        name: 'DESC_DOCUMENT_MODEL_STATE',
        index: 'DESC_DOCUMENT_MODEL_STATE',
        jsonmap: 'OGGETTO.documentModelState.DESC_DOCUMENT_MODEL_STATE', label: t('label.documentstate'),
        formatter: 'formatTranslate', search: false,
        stype: 'select', searchoptions: {
            sopt: ['eq'],
            value: "-1:All;1:Active;0:Inactive",

        },
        width: 130,
        sortable: true, group: true
    },

    {
        name: 'DESC_DOCUMENT_MODEL_TYPE',
        index: 'DESC_DOCUMENT_MODEL_TYPE',
        jsonmap: 'OGGETTO.documentModelType.DESC_DOCUMENT_MODEL_TYPE',
        sortable: true,
        width: 150,
        formatter: 'formatTranslate', search: false, group: true, label: t('label.type')
    },

    {
        name: 'CODE_DOCUMENT_MODEL_FOLDER_ID',
        index: 'CODE_DOCUMENT_MODEL_FOLDER_ID',
        jsonmap: 'OGGETTO.CODE_DOCUMENT_MODEL_FOLDER_ID',
        sortable: false,
        hidden: true
    },

    {
        name: 'DATE_DOCUMENT_MODEL_UPLOAD',
        index: 'DATE_DOCUMENT_MODEL_UPLOAD',
        jsonmap: 'OGGETTO.DATE_DOCUMENT_MODEL_UPLOAD',
        formatter: function (cellvalue, options, rowObject) { if (cellvalue != null) return dateUTCToUserTimeZoneLocale(cellvalue); else return ''; },
        sortable: true, search: false, stype: 'text', searchoptions: {
            sopt: ['lt', 'le', 'gt', 'ge'],
            dataInit: function (elem) {
                $(elem).datepicker({
                    duration: '',
                    constrainInput: true,
                    changeYear: true,
                    changeMonth: true
                });

            }
        },
        width: 150
    },

    {
        name: 'TICKET_ID',
        index: 'TICKETNUMBER',
        jsonmap: 'OGGETTO.TICKETNUMBER',
        editable: true,
        sortable: true,
        width: 130,
        formatter: function (cellvalue, options, rowObject) {
            return FormatterTicketLink(rowObject, cellvalue);
        },
    },
    {
        name: 'RequestId',
        jsonmap: 'OGGETTO.ticketId',
        editable: true,
        sortable: false,
        hidden: true
    },

    {
        name: 'QUEUENAME',
        jsonmap: 'OGGETTO.QUEUENAME',
        sortable: true,
        width: 150
    },

    {
        name: 'FLAG_VALIDATING',
        index: 'FLAG_VALIDATING',
        jsonmap: 'OGGETTO.FLAG_VALIDATING',
        sortable: true,
        hidden: true
    },

    {
        name: 'ValidateState',
        editable: true,
        sortable: false,
        formatter: function (cellvalue, options, rowObject) {
            return FormatterStateSelect(rowObject);
        },
        width: 130
    },

    {
        name: 'verificationResults',
        jsonmap: 'OGGETTO.customerVerification',
        editable: true,
        sortable: false,
        hidden: true,
        formatter: function (cellvalue, options, rowObject) {
            var vResults = "";
            if (cellvalue) {
                if (cellvalue.XMemo.length > 0) {
                    vResults = cellvalue.XMemo[0].VerificationResults
                }
            }
            return vResults;
        },
    },

    {
        name: 'ValidateResult',
        editable: true,
        sortable: false,
        formatter: function (cellvalue, options, rowObject) {
            return FormatterValidationResult(rowObject);
        },
        width: 150
    },

    {
        name: 'CustomerValidationHistory',
        jsonmap: 'OGGETTO.customerVerification',
        editable: true,
        sortable: false,
        hidden: true,
        formatter: function (cellvalue, options, rowObject) {
            return JSON.stringify(cellvalue);
        },
    },
    {
        name: 'CustomerValidationId',
        jsonmap: 'OGGETTO.customerVerificationId',
        editable: true,
        sortable: false,
        hidden: true
    },

    {
        name: 'History',
        editable: true,
        sortable: false,
        formatter: function (cellvalue, options, rowObject) {
            return FormatterHistoryLink(rowObject);
        },
        width: 100
    },

    {
        name: 'CheckDelete', index: 'CheckDelete',
        editable: true, edittype: 'checkbox', editoptions: { value: "True:False" },
        formatter: "checkbox", formatoptions: { disabled: false },
        width: 80,
        cellEdit: true,
        sortable: false
    }],
    pager: '',
    pgbuttons: false,
    pginput: false,
    pgtext: '',
    sortname: "CODE_DOCUMENT_MODEL_ID",
    sortable: true,
    sortorder: 'desc',
    shrinkToFit: true,
    scrollerbar: true,
    viewrecords: true,
    imgpath: '../JS/jqGrid/themes/basic/images',
    autowidth: true,
    forceFit: true,
    grouping: false,
    groupingView: false,
    multiselect: false,
    toppager: false,
    grouping: vl != 'clear' && vl != '',
    groupingView:
    {
        groupField: [vl],
        groupText: ['<b>{0}</b>&nbsp;<font color=\'blue\'>({1})</font>'],
        groupCollapse: false,
        groupOrder: ['asc'],
        groupDataSorted: true
    },
    footerrow: false,
    userDataOnFooter: false,
    autoencode: false,
    recreateFilter: true,
    jsonReader: {
        root: function (obj) {

            if (obj.d != undefined) obj = obj.d;
            var d = null;
            if (typeof (obj) == "object")
                d = obj;
            else
                d = eval("(" + obj + ")");

            return d.rows;
        },
        repeatitems: false,
        page: function (obj) {
            if (obj.d != undefined) obj = obj.d;
            var d = null;
            if (typeof (obj) == "object")
                d = obj;
            else
                d = eval("(" + obj + ")");
            return d.page;
        },
        total: function (obj) {
            if (obj.d != undefined) obj = obj.d;
            var d = null;
            if (typeof (obj) == "object")
                d = obj;
            else
                d = eval("(" + obj + ")");
            return d.total;
        },
        records: function (obj) {
            if (obj.d != undefined) obj = obj.d;
            var d = null;
            if (typeof (obj) == "object")
                d = obj;
            else
                d = eval("(" + obj + ")");

            return d.records;
        },
        cell: function (obj) {

            if (obj.d != undefined) obj = obj.d;
            var d = null;
            if (typeof (obj) == "object")
                d = obj;
            else
                d = eval("(" + obj + ")");
            return d.OGGETTO;
        } 
    },
    ondblClickRow: function (rowid, iRow, iCol, e) { },
    beforeRequest: function () {
        var gridid = $(this).attr('id');
        $('#' + gridid + '_toppager_center').remove();
        $('#' + gridid + '_toppager_right').remove();
        return true;
    },
    gridComplete: function () {
        var grid = $(this), recs = grid.jqGrid('getGridParam', 'records');
        if (recs > 0) {
            $('#gbox_' + gridId).show();
            $(div_empty).hide();
        } else {
            $('#gbox_' + gridId).hide();
            $(div_empty).show();
        }

        $(gridSelector + '_toppager_center').remove();
        $(gridSelector + '_toppager_right').remove();

        jQuery('.ui-icon-refresh').click(function () {
            var searchIsOpen = $('#fbox_' + gridId).is(':visible');
            if (searchIsOpen) {
                $('#fbox_' + gridId + ' .ui-closer').click();
            }
        });

        var ids = $(gridSelector).jqGrid('getDataIDs');
        for (var i = 0; i < ids.length; i++) {
            var rowId = ids[i];
            var vResults = $('#gridDocumentVerification').jqGrid('getCell', rowId, 'verificationResults');
            var verificationResults = getVerificationResults(vResults);
            var documentModelStateId = $("#stato_" + rowId).val();
            getDocumentModelValidationResults('#ddl_validationResult_' + rowId, pageParams.siteid, documentModelStateId, pageParams.customerTypeId, verificationResults);
        }

        $('.ddl_documentmodelState').bind('change', function () {
            var documentModelStateId = $(this).val();
            var id = $(this).attr('id').split('_')[1];
            var vResults = $('#gridDocumentVerification').jqGrid('getCell', id, 'verificationResults');
            var verificationResults = getVerificationResults(vResults);
            getDocumentModelValidationResults('#ddl_validationResult_' + id, pageParams.siteid, documentModelStateId, pageParams.customerTypeId, verificationResults);
        });
    }
}).jqGrid('setGridWidth', $('#validation').width(), true);

jQuery(gridSelector).jqGrid('navGrid', div_pager, { edit: false, add: false, del: false, search: false, refresh: true }, {}, {}, {}, { recreateFilter: true }, {}, {});
jQuery(gridSelector).jqGrid('navGrid',
    pager_top,
    {
        edit: false,
        add: false,
        del: false,
        search: false
    },

);
}

Я заметил в инструментах разработки браузера, что заголовок и текст больше, чем контейнер grid screen last columns, и если я наведу указатель мыши на заголовок или текст, ширина выделенного элемента будет больше, чем встроенный стиль: width of the thead element greater than the inline style. Почему это происходит? Стол имеет фиксированную ширину. Есть ли способ установить ширину 100% контейнера?

Ответы [ 2 ]

0 голосов
/ 28 февраля 2020

Я думаю, что я решил установить ширину для каждого столбца таким образом, чтобы сумма ширин была немного меньше, чем общая ширина сетки, установить autowidth: true и shrinkToFit: false, и с помощью пользовательской функции, которая пропорционально изменяет размер столбцов к общей ширине сетки: 

autowidth: true,
width: null,
shrintToFit: false

gridComplete: function () {
  ...
  resizeGrid(gridSelector);
  ...
}

function resizeGrid(div_grid) {
  $(div_grid).jqGrid('setGridWidth', $('#mainContainerDocument').width());
  var width_col = ($('#mainContainerDocument').width() * 10.5) / 100;
  $(div_grid).jqGrid('setColProp', 'VALO_DOCUMENT_MODEL_ID', { width: width_col });
  $(div_grid).jqGrid('setColProp', 'DATE_DOCUMENT_MODEL_UPLOAD', { width: width_col });
  $(div_grid).jqGrid('setColProp', 'TICKET_ID', { width: width_col });
  $(div_grid).jqGrid('setColProp', 'QUEUENAME', { width: width_col });
  $(div_grid).jqGrid('setColProp', 'ValidateState', { width: width_col });
  $(div_grid).jqGrid('setColProp', 'ValidateResult', { width: width_col });

  width_col = ($('#mainContainerDocument').width() * 9) / 100;
  $(div_grid).jqGrid('setColProp', 'DESC_DOCUMENT_MODEL_STATE', { width: width_col });

  width_col = ($('#mainContainerDocument').width() * 12.5) / 100;
  $(div_grid).jqGrid('setColProp', 'DESC_DOCUMENT_MODEL_TYPE', { width: width_col });

  $('.ui-jqgrid-htable').width($('#mainContainerDocument').width());
  $('.ui-jqgrid-btable').width($('#mainContainerDocument').width());
}
0 голосов
/ 27 февраля 2020

Я пытался с помощью пользовательского метода изменения размера, в котором я делаю следующее: 

 $(div_grid).jqGrid('setGridWidth', $('#mainContainerDocument').width());

Но это не работает, .ui-jqgrid-htable и ui-jqgrid-btable больше, чем контейнер.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...