jquery - 如何使搜索工具栏中的 html5 日期字段尊重列宽

Question

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

如何解决这个问题，使工具栏搜索中的日期字段宽度不比其列宽，并且在调整大小时不会变得比列宽？

测试用例在 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>

请注意，测试用例中的第二列的行为符合预期:它的宽度不超过其列宽。

Answer 1

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

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而存在的问题

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

更新:可以在调整列大小后调整input[type=date] 的大小。参见 http://jsfiddle.net/OlegKi/10qwgejj/8/额外使用

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