Jquery 如何在搜索工具栏中设置html5日期字段以尊重列宽

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

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

测试用例正在运行

html:

请注意，testcase中的第二列的行为与预期的一样：它不超过它的列宽。

请检查修改后的演示，其中包含以下代码

var serverResponse={
“第页”：“1”，
“记录”：“3”，
“行”：[
{“Id”：“1”，i活动：“2015-01-09”}，
{“Id”：“2”，i活动：“2015-01-05”}，
{“Id”：“3”，i活动：“2015-01-21”}
]
},    
日期模板={
sorttype:“日期”，
格式化程序：“日期”，
格式选项：{
SRC格式：“Y-m-d”，
ReformataAfterEdit:true
},
编辑选项：{
最大长度：10，
尺码：10
},
是的，
搜索选项：{
sopt:[“eq”、“ne”、“lt”、“le”、“gt”、“ge”]，
尺寸：10，
clearSearch：错，
属性：{大小：10，类型：“日期”，样式：“宽度：11em；”}
}
},
$grid=$（“#分类摘要”）；
$grid.jqGrid({
url:“/echo/json/”，
数据类型：“json”，
mtype:“POST”，
postData:{
json:json.stringify（serverResponse）
},
colNames:[“活动”、“第二个”]，
colModel：[
{名称：“IsActive”，模板：dateTemplate，宽度：125}，
{名称：“第二”，宽度：85}
],
jsonReader：{
id:“id”，
重复项：false
},
viewrecords：正确
}).jqGrid（“filterToolbar”）；

以及附加的CSS规则，它修复了由于使用引导CSS而存在的问题

.ui搜索表输入[类型=日期]{
线高：正常；
}

更新：在调整列的大小后，可以调整

输入[type=date]

的大小。另外看看哪个用法

resizeStop:函数（newWidth，iCol）{
var colModel=$（this）.jqGrid（“getGridParam”，“colModel”）；
if（colModel[iCol].name==“IsActive”）{
$（“#gs_IsActive”）.width（newWidth-7）；/-填充
}
}

检查修改后的演示，其中包含以下代码

var serverResponse={
“第页”：“1”，
“记录”：“3”，
“行”：[
{“Id”：“1”，i活动：“2015-01-09”}，
{“Id”：“2”，i活动：“2015-01-05”}，
{“Id”：“3”，i活动：“2015-01-21”}
]
},    
日期模板={
sorttype:“日期”，
格式化程序：“日期”，
格式选项：{
SRC格式：“Y-m-d”，
ReformataAfterEdit:true
},
编辑选项：{
最大长度：10，
尺码：10
},
是的，
搜索选项：{
sopt:[“eq”、“ne”、“lt”、“le”、“gt”、“ge”]，
尺寸：10，
clearSearch：错，
属性：{大小：10，类型：“日期”，样式：“宽度：11em；”}
}
},
$grid=$（“#分类摘要”）；
$grid.jqGrid({
url:“/echo/json/”，
数据类型：“json”，
mtype:“POST”，
postData:{
json:json.stringify（serverResponse）
},
colNames:[“活动”、“第二个”]，
colModel：[
{名称：“IsActive”，模板：dateTemplate，宽度：125}，
{名称：“第二”，宽度：85}
],
jsonReader：{
id:“id”，
重复项：false
},
viewrecords：正确
}).jqGrid（“filterToolbar”）；

以及附加的CSS规则，它修复了由于使用引导CSS而存在的问题

.ui搜索表输入[类型=日期]{
线高：正常；
}

更新：在调整列的大小后，可以调整

输入[type=date]

的大小。另外看看哪个用法

resizeStop:函数（newWidth，iCol）{
var colModel=$（this）.jqGrid（“getGridParam”，“colModel”）；
if（colModel[iCol].name==“IsActive”）{
$（“#gs_IsActive”）.width（newWidth-7）；/-填充
}
}

如果将第一列的大小调整为较小的宽度，则工具栏中的日期搜索字段仍与下一列工具栏搜索字段重叠。如何解决此问题，使日期搜索字段不会与下一列搜索字段重叠？在回答

$（elem）中，删除了attr（“type”，“date”）

。这会导致日期元素在高级搜索表单中消失。@安德鲁斯：演示不使用高级搜索。这只是一个用法示例

filterToolbar

。如果您在更常见的情况下（编辑、高级搜索等）使用代码，您当然应该修改代码。要减小最小列宽，可以在列中指定

自动调整大小：{minColWidth:125}

。看见使用免费jqGrid的最新代码很重要。

minColwidth:125

禁用调整到较小宽度的功能。如何允许调整到较小的宽度，并剪裁日期输入元素的右侧部分，或在列宽较小时减小其宽度？@Andrus：我认为不能这样做。只需减小列的最小宽度即可。如果将第一列的大小调整为较小的宽度，则工具栏中的日期搜索字段仍与下一列工具栏搜索字段重叠。如何解决此问题，使日期搜索字段不会与下一列搜索字段重叠？在回答

$（elem）中，删除了attr（“type”，“date”）

。这会导致日期元素在高级搜索表单中消失。@安德鲁斯：演示不使用高级搜索。这只是一个用法示例

filterToolbar

。如果您在更常见的情况下（编辑、高级搜索等）使用代码，您当然应该修改代码。要减小最小列宽，可以在列中指定

自动调整大小：{minColWidth:125}

。看见使用最新的co是很重要的

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");

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