如何使html5日期字段在搜索工具栏中尊重列宽 [英] How to make html5 date field in search toolbar to respect column width

问题描述

免费jqgrid与Bootstrap 3一起使用。
工具栏搜索包含html5日期字段。
日期字段宽度大于列宽度。
如果调整列大小，日期字段宽度仍然更大。

Free jqgrid is used with Bootstrap 3. Toolbar search contains html5 date field. Date field width is bigger than column width. If column is resized, date field width is still bigger.

如何解决此问题，以便工具栏搜索中的日期字段宽度不会超过其列，将不会比调整大小栏宽？

How to fix this so that date field width in toolbar search is not wider than its column and will not become wider than column on resize ?

测试用例位于 http ：//jsfiddle.net/yt6L6p61/

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' }
        ]
    },
initDateHtmlSearch = function (elem){
  $(elem).attr("type", "date");
},

DateTemplate = {
    sorttype: 'date',
    formatter: 'date',
    formatoptions: {
        srcformat: "Y-m-d",
        reformatAfterEdit: true
    },
    editoptions: {
        maxlength: 10,
        size: 10,
//        dataInit: initDateEdit
    },
    editable: true,
    searchoptions: {
        sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
        dataInit: initDateHtmlSearch,
        size: 10,
        attr: { size: 10 }
    }
},

    $grid = $("#categorysummary");

$grid.jqGrid({
    url: "/echo/json/",
    datatype: "json",
    mtype: "POST",
    postData: {
        json: JSON.stringify(serverResponse)
    },
    colNames: ["Id", "Active", 'Second'],
    colModel: [
        { name: 'Id', hidden: true },
        { name: 'IsActive', template: DateTemplate, width:90
        },
        { name: 'Second', width:85
        }

        ],
    jsonReader: {
        id: 'Id',
        repeatitems: false
    },
    viewrecords: true
}).jqGrid("filterToolbar");

html：

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

请注意，testcase中的第二列的行为与预期的一样： p>

Note that second column in testcase behaves as expected: it is not wider than its column width.

推荐答案

检查修改的演示 http://jsfiddle.net/OlegKi/10qwgejj/4/ 其中包含以下代码

Examine the modified demo http://jsfiddle.net/OlegKi/10qwgejj/4/ which have the following code

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
        },
        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, width: 125 },
        { name: "Second", width: 85 }
    ],
    jsonReader: {
        id: "Id",
        repeatitems: false
    },
    viewrecords: true
}).jqGrid("filterToolbar");

和额外的CSS规则，它修复了由于使用Bootstrap CSS而存在的问题

and additional CSS rule, which fix the problem existing because of the usage of Bootstrap CSS

.ui-search-table input[type=date] {
    line-height: normal;
}

UPDATE： $ c> input [type = date] 。请参阅 http://jsfiddle.net/OlegKi/10qwgejj/8/ ， p>

UPDATE: One can resize the input[type=date] after resizing the column. See http://jsfiddle.net/OlegKi/10qwgejj/8/ which use additionally

resizeStop: function (newWidth, iCol) {
    var colModel = $(this).jqGrid("getGridParam", "colModel");
    if (colModel[iCol].name === "IsActive") {
        $("#gs_IsActive").width(newWidth - 7); // - padding
    }
}

这篇关于如何使html5日期字段在搜索工具栏中尊重列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！