JqG​​rid,在工具栏搜索列中添加清除按钮

时间:2012-01-18 09:59:07

标签: jqgrid datepicker

我有一个带工具栏搜索功能的JqGrid。我的一个列是datetime列,搜索字段是jquery datepicker。 datepicker的问题是你不能有一个空值,但由于这个字段是一个过滤器,它可以是空的。所以id'喜欢做的是在datepicker附近添加一个小按钮来清除该字段。 有没有办法做到这一点,或者能够从客户端清除日期选择器。

enter image description here

以下是列

的代码
{ name: 'Period', index: 'Period', align: 'center', formatter: 'date', formatoptions: { newformat: 'F, Y' }, width: '70px', search: true,
                        searchoptions: {
                            dataInit: function (el) {
                                $(el).datepicker({
                                    yearRange: "-5:+1",
                                    changeMonth: true,
                                    changeYear: true,
                                    showButtonPanel: true,
                                    dateFormat: 'MM, yy',
                                    onClose: function (dateText, inst) {
                                        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                                        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                                        $(this).datepicker('disable');
                                        $(this).datepicker('setDate', new Date(year, month, 1));
                                        $(this).datepicker('enable');
                                        $("#jqgCompLine")[0].triggerToolbar();
                                    },
                                    beforeShow: function (input, inst) {
                                        if ((datestr = $(this).val()).length > 0) {
                                            year = datestr.substring(datestr.length - 4, datestr.length);
                                            month = jQuery.inArray(datestr.substring(0, datestr.length - 6), $(this).datepicker('option', 'monthNames'));
                                            $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                                            $(this).datepicker('setDate', new Date(year, month, 1));
                                        }
                                    }
                                });
                            }
                        },

提前感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

datepicker对空字段没有问题。我想这是您的自定义问题。

我不知道您拥有哪些数据作为网格中的日期值。格式'F, Y'(以及日期选择器的'MM, yy')似乎有点奇怪,因为搜索将按完整日期完成,但您只显示口和年。可能所有数据都可能与您的数据一致。

我创建了the demo来演示使用datepicker进行搜索。在创建演示期间,我使用'j, F, Y'格式(对于datepicker 'd, MM, yy'格式),并在jqGrid内部使用的parseDate方法中发现了两个错误。

第一个问题出在the lines,其中date[k]值将正确计算,但未分配给tsp.m。应该在if个语句中插入作业tsp.m = date[k];。所以'F'和'M'格式在jqGrid的当前代码中都不正确。因为你使用'F'格式对你来说很重要。

下一个问题是当天的'j'格式将以错误的方式处理。在解析日期期间,tsp.j将被正确分配,但tsp.d将在the line中使用,将不会被修改并保持等于1.修复代码我建议添加一行

if(tsp.j !== undefined) { tsp.d = tsp.j; }
在for循环之后的某个地方。 The demo使用了jqGrid 4.3.1 jquery.jqGrid.src.js的修改版jquery.jqGrid.src-parseDate.js

我稍后会报告错误和我对trirand的修复。