Как установить ширину поля панели инструментов поиска по дате при автоматическом изменении размера

Я ищу способ установить ширину поля поиска панели инструментов даты при автоматическом изменении размера.

Я пробовал код из

Как создать поле даты html5 на панели инструментов поиска, чтобы соблюсти ширину столбца

комментарий:

var serverResponse = {
        "page": "1",
        "records": "3",
        "rows": [
            { "Id": "1", IsActive: "2015-01-09" },
            { "Id": "2", IsActive: "2015-01-05" },
            { "Id": "3", IsActive: "2015-01-21" }
        ]
    },    
    dateTemplate = {
        sorttype: "date",
        formatter: "date",
        formatoptions: {
            srcformat: "Y-m-d",
            reformatAfterEdit: true
        },
        autoResizing: { minColWidth: 50 },
        autoResizable: true,
        width: 100,
        editoptions: {
            maxlength: 10,
            size: 10
        },
        editable: true,
        searchoptions: {
            sopt: ["eq", "ne", "lt", "le", "gt", "ge"],
            size: 10,
            clearSearch: false,
            attr: { size: 10, type: "date", style: "width:11em;" }
        }
    },
    $grid = $("#categorysummary");

$grid.jqGrid({
    url: "/echo/json/",
    datatype: "json",
    mtype: "POST",
    postData: {
        json: JSON.stringify(serverResponse)
    },
    colNames: ["Active", "Second"],
    colModel: [
        { name: "IsActive", template: dateTemplate },
        { name: "Second", width: 85 }
    ],
    resizeStop: function (newWidth, iCol) {
        var colModel = $(this).jqGrid("getGridParam", "colModel");
    if ($("#gs_" + $.jgrid.jqID(colModel[iCol].name)).attr("type") === "date") {

                $("#gs_IsActive").width(newWidth - 7); // - padding
        }
    },
    jsonReader: {
        id: "Id",
        repeatitems: false
    },
    viewrecords: true
}).jqGrid("filterToolbar");
$(".ui-search-table input[type=date]").each(function() {
    $(this).css("width", $(this).closest("th.ui-th-column").width() + "px");
});

css:

<div class="container">
    <table id="categorysummary"></table>
</div>

См. Скрипт http://jsfiddle.net/10qwgejj/13/

После двойного щелчка по разделительной строке столбца в активном заголовке столбца поисковый элемент с слишком большим и граница столбца исчезает с панели инструментов поиска.

overlap Чтобы установить ширину поля поиска при автоматическом изменении размера?

Андрус.


html jquery css jqgrid free-jqgrid
person Andrus    schedule 03.01.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я реализовал (см. фиксацию) новый обратный вызов afterResizeDblClick и новое событие jqGridAfter решение очень простое.

Он использует следующий код

var adjustSearchingDateField = function (cmName, newWidth) {
    var $searchingField = $("#gs_" + $.jgrid.jqID(cmName));
    if ($searchingField.attr("type") === "date") {
        $searchingField.width(newWidth - 7); // - padding
    }
};

...
resizeStop: function (newWidth, iCol) {
    var colModel = $(this).jqGrid("getGridParam", "colModel");
    adjustSearchingDateField(colModel[iCol].name, newWidth);
},
afterResizeDblClick: function (options) {
    adjustSearchingDateField(options.cmName, options.cm.width);
},
...

См. Демонстрацию http://jsfiddle.net/OlegKi/10qwgejj/14/

person Oleg    schedule 03.01.2016
comment
Последний jqgrid добавляет идентификатор jqgrid в поле идентификатора панели инструментов. Как исправить этот код, чтобы он работал с последней версией jqgrid, если idMode не указан? - person Andrus; 27.03.2016
comment
@Andrus: прочтите файл readme к новой версии. В разделе "ПРЕРЫВНЫЕ ИЗМЕНЕНИЯ" описан idMode вариант filterToolbar с 3 различными значениями. - person Oleg; 27.03.2016