如何在自动调整大小上设置日期搜索工具栏字段宽度 [英] How to set date search toolbar field width on autoresize

问题描述

我正在寻找一种在autoresize上设置日期工具栏搜索字段宽度的方法。

我尝试了代码来自

在autoresize上设置搜索字段宽度？

Andrus。

解决方案

我实施了（参见提交）新回调 afterResizeDblClick 和新事件jqGridAfterResizeDblClick ，这使解决方案变得非常简单。

它使用以下代码

  var adjustSearchingDateField = function（cmName，newWid th）{
 var $ searchingField = $（＃gs_+ $ .jgrid.jqID（cmName））; 
 if（$ searchingField.attr（type）===date）{
 $ searchingField.width（newWidth  -  7）; //  - 填充
} 
}; 
 
 ... 
 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/

I*m looking for a way to set date toolbar search field width on autoresize.

I tried code from

How to make html5 date field in search toolbar to respect column width

comment:

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>

See fiddle http://jsfiddle.net/10qwgejj/13/

After double clicking in column separator line in Active column header search element with is too big and column border disappears from search toolbar.

To set search field width on autoresize ?

Andrus.

解决方案

I implemented (see the commit) new callback afterResizeDblClick and new event jqGridAfterResizeDblClick, which makes the solution very easy.

It uses the following code

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);
},
...

See the demo http://jsfiddle.net/OlegKi/10qwgejj/14/

这篇关于如何在自动调整大小上设置日期搜索工具栏字段宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！