JQGrid工具栏搜索Date列

时间:2012-10-17 05:37:37

标签: asp.net jqgrid

我是JQGrid的新手,我正在开发一个屏幕,我需要在JQ Grid中使用工具栏并相应地执行搜索操作。 我的JqGrid中有一个日期字段,我也在搜索选项中添加了DtPicker。 但是当我从DTPicker中选择日期时,不会搜索所选日期。 请让我知道如何搜索所选日期。

      <table id="test">
</table>
<div id="divtest">
</div>
<div>
    <asp:Label ID="count" runat="server" Text="Label"></asp:Label>
</div>

<script type="text/javascript">
  $(document).ready
 (
 function CreateGrid() 
 {

    var lastSel,lastSel1, Status = ["All", "Active", "InActive"],defaultStatus="Active";
    jQuery("#test").jqGrid
    ( 
        {
           url:'Test.aspx',
           datatype:'json',
           contentType: "application/json; charset=utf-8",
           jsonReader: {  
                            root: "rows",
                            page: "page", 
                            total: "total",
                            records: "records",
                            repeatitems: false
                       },  
            colNames:[  'EMPID',
                        'EMPName',
                        'DOB',
                        'Designation',
                        'Genders',
                        'Status',
                        'Remarks',
                        'EMPType',
                        ''
                    ],
            colModel:
                [
                    {
                        name:'EMPID',
                        index:'EMPID',
                        width:120,
                        sorttype:'int',
                        editable:false,
                        key:true,
                        sortable: true,
                        search:true,
                        editoptions:{readonly:true}
                    },
                    {
                        name:'EMPName',
                        index:'EMPName',
                        width:250, 
                        sortable: true,
                        align:"left",
                        editable:true,
                        size:100,
                        editrule:{custom:true,custom_func:checkName}
                    },
                    {
                        name:'DOB',
                        index:'DOB',
                        width:250, 
                        sortable: true,
                        align:"left",
                        size:100,
                        editable:true,
                        sorttype:"date",
                        formatter: "date",
                        formatoptions: {newformat:'m/d/Y'},
                        editrule:{custom:true,custom_func:checkName}
                        ,editoptions:
                                        {"dataInit":function(el)
                                            {setTimeout(function(){if(jQuery.ui){ 
                                                if(jQuery.ui.datepicker) 
                                                { 
                                                    jQuery(el).datepicker({"disabled":false,
                                                    "dateFormat":"mm/dd/yy"
                                                    ,changeMonth: true,
                                                    changeYear: true,
                                                    recreateForm: true});
                                                    jQuery('.ui-datepicker').css({'font-size':'69%'});
                                                } 
                                            }},100);}
                                        }
                        ,searchoptions:
                                    {"dataInit":function(el)
                                        {setTimeout(function(){if(jQuery.ui) {
                                            if(jQuery.ui.datepicker)
                                            { 
                                                jQuery(el).datepicker({"disabled":false,
                                                "dateFormat":"mm/dd/yy"
                                                ,changeMonth: true,
                                                changeYear: true,
                                                recreateForm: true});
                                                jQuery('.ui-datepicker').css({'font-size':'69%'});
                                            }
                                        }},100);}
                                    },
                        search:true
                    },
                    {
                        name:'Designation',
                        index:'Designation',
                        width:250,
                        align:"left",
                        editable:true,
                        size:100,
                        sortable: true,
                        formatter:'select',
                        edittype: 'select', 
                        editoptions: {value:"0:select;1:CEO;2:HR;3:Manager;4:Team Lead;5:Software Engineer; 6:Tester;7:Sales;8:Others"}
                        ,editrule:{custom:true,custom_func:checkDropDown}
                        ,stype:'select',
                        searchoptions:  {
                                            sopt:['eq'],value:":All;1:CEO;2:HR;3:Manager;4:Team Lead;5:Software Engineer;6:Tester;7:Sales;8:Others"
                                        }
                     },
                    {
                        name:'Gender',
                        index:'Gender',
                        width:150,
                        align: 'left',
                        editable:true,
                        size:100,
                        sortable: true,
                        formatter:'select',
                        edittype: 'select',
                        editoptions: {value: "0:select;1:Male;2:Female"},
                        editrule:{custom:true,custom_func:checkDropDown},
                        stype:'select',
                        searchoptions:  {
                                            sopt:['eq'],value:":All;1:Male;2:Female"
                                        }
                    },
                    {
                        name:'Status',
                        index:'Status',
                        width:150,
                        align: 'left',
                        editable:true,
                        size:100,
                        sortable: true,
                        formatter:'select',
                        edittype: 'select', 
                        editoptions: {value: "0:select;1:Active;2:InActive"}
                        ,editrule:{custom:true,custom_func:checkDropDown},
                        stype:'select'
                        ,searchoptions: {
                                           sopt:['eq'],value:":All;1:Active;2:InActive"
                                        }
                    },
                    {
                        name:'Remarks',
                        index:'Remarks',
                        width:150,
                        sortable: true,
                        align:"left",
                        editable:true,
                        edittype:"textarea",
                        editoptions:{rows:'3',cols:'10'},
                        size:100 
                    },
                    {
                        name:'Emptype',
                        index:'Emptype',
                        sortable: true,
                        formatter:'checkbox',
                        editable:true,
                        edittype:"checkbox",
                        stype:'select',
                        searchoptions:  {
                                            sopt:['eq','ne'],value:":All;true:In;false:Out"
                                        }
                    },
                    {
                        name:'action',
                        index: 'action',
                        sortable:false,
                        align:'center',
                        formatter:"actions",
                        formatoptions:{key:true},
                        search:false
                    }
                 ],
            rowNum:10,
            rowList:[2,5,10,15],
            pager:'#divtest',
            viewrecords:true,
            width:0.96*screen.width,height:0.42*screen.height,
            caption:'jqGrid',
            emptyrecords: "No Results Found",
            sortable:true,
            sortorder: "desc",
            search:true,
            ignoreCase:true,
            loadonce:true,
            multiselect: true,
            shrinkToFit:true,forceFit:true
            ,editurl:"Test4.aspx",
            onAfterSaveCell: 
                    function reload(result) 
                    {
                        $("#grid").trigger("reloadGrid"); 
                    } 
            ,onSelectRow: 
                        function (id) 
                        { var tr;
                            if (id && id !== lastSel) 
                            {
                                if (typeof lastSel !== "undefined") 
                                {
                                    $("#test").jqGrid('restoreRow', lastSel);
                                    $("#test").trigger("reloadGrid",[{current:true}]);

                                }
                                lastSel = id;
                            }
                        }
        }
    ).jqGrid('navGrid','#divtest',
                {   edit:false,
                    add:true,
                    del:false,
                    search:false
                },
                //for Edit
                {   
                },
                //for Add
                {  
                    top:0.20*screen.height,
                    left:(screen.width-(0.65*screen.width)),
                    width: 0.35*screen.width,
                    align:'Center',
                    resizeable: true,
                    closeAfterAdd:true,
                    reloadAfterSubmit:true,
                    serializeEditData: function(data)
                                        {
                                              return (data);
                                        },
                    beforeShowForm: function(form)
                                     {
                                        $("#DOB").datepicker
                                        ({
                                            changeMonth: true,
                                            recreateForm: true,
                                            changeYear: true
                                        });
                                     }
                },
                //for Delete
                {  

                },
                //for Search
                {   multipleSearch: true,
                    multipleGroup:true,
                    //showQuery: true,
                    closeOnEscape: true,
                    closeAfterSearch: true,
                    overlay: 0,
                    beforeShowSearch:function() 
                                        {
                                         $("#test")[0].toggleToolbar();
                                        },
                    onClose:        function() 
                                        {
                                         $("#test")[0].toggleToolbar();
                                        }
                }
            ).jqGrid('navButtonAdd','#divtest',
                {
                    caption:" ", 
                    width:'15',
                    buttonicon:"ui-icon-search", 
                    onClickButton: function()
                    { 
                        $("#test")[0].toggleToolbar();
                    }, 
                    position:"last"
                })
            //For displaying the blank tool bar on the grid
            .jqGrid('filterToolbar',
                {
                    stringResult: true,
                    searchOnEnter: false,
                    defaultSearch: "cn"
                }
            )
            .jqGrid('inlineNav',"#pager",{ 
                                            edit:false, 
                                            editicon: "ui-icon-pencil",
                                            add:true,
                                            addicon:"ui-icon-plus",
                                            cancel: true,
                                            cancelicon:"ui-icon-cancel",
                                            save: true,
                                            saveicon:"ui-icon-disk"
                                        }    
                    );
            //The Date DTPicker field in the Edit portion.
            var initDateEdit = 
                             function(elem)
                            {
                                setTimeout(function() 
                                {
                                    $(elem).datepicker(
                                    {
                                        dateFormat: 'mm/dd/yy',
                                        autoSize: true,
                                        //showOn: 'button', 
                                        changeYear: true,
                                        changeMonth: true,
                                        showButtonPanel: true,
                                        recreateForm: true,
                                        showWeek: true
                                    });
                                },100);
                            }
                            ,
                 //The Date DTPicker field in the Search portion.
                 //But not working in this.
                initDateSearch = 
                              function(elem)
                             {
                                setTimeout(function()
                                 {
                                    $(elem).datepicker(
                                    {
                                        dateFormat: 'mm/dd/yy',
                                        autoSize: true,
                                        //showOn: 'button', 
                                        changeYear: true,
                                        changeMonth: true,
                                        showButtonPanel: true,
                                        recreateForm: true,
                                        showWeek: true
                                    });
                                },100);
                              }
                ;
                //To hide the check box or select box in the Header of the JQGrid.
                var myGrid = $("#test");
                $("#cb_"+myGrid[0].id).hide();

                var grid = $("#test"),
                getColumnIndexByName = function (grid, columnName)
                 {
                    var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
                    for (i = 0; i < l; i++) 
                    {
                    if (cm[i].name === columnName) 
                        {return i;}
                    }
                    return -1;
                };
          }             
   );
</script>

谢谢和问候, NMB

1 个答案:

答案 0 :(得分:1)

您只需在过滤工具栏后添加此内容..

.change(函数(){$( “#的table_id”)[0] .toggleToolbar()})