如何在自动resize上设置日期搜索工具栏字段宽度
我正在寻找一种在autoresize上设置日期工具栏搜索字段宽度的方法。
我试过代码
如何使搜索工具栏中的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: "Ymd", 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：
见小提琴http://jsfiddle.net/10qwgejj/13/
双击活动列标题搜索元素中的列分隔线后，搜索工具栏中的列边框太大而列边框消失。
要在自动resize上设置搜索字段宽度？
安德鲁斯。
我实现了（参见提交 ）新的回调afterResizeDblClick和新事件jqGridAfterResizeDblClick，这使得解决方案非常容易。
它使用以下代码
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/