JqGrid custom search toolbar event handlers

I have created a jqGrid grid with a drop down list, this list (due to dev restraints) needs to be loaded once, so that all data returned can be filtered, all this is cool so far,

The problem arrives when the drop down list is changed, though the majority of the filtering/searching is done client-side, I need the drop down list to trigger a call that will refresh the page using the newly added parameter from the drop down list.

I have enclosed the section of code that builds the toolbar search, but I have no idea how to add the functionality to catch the event handler when changing the select value, in this only instance I need a non-standard code to be executed - eg function callNewData()

colNames:["Rent Due Date ","Tenant","Description","Address","Payment Ref.","Rent     Amount","Outstanding","Amount     Received","Confirm?","tenancyID","tenantID","rentID","existingRent"],
    colModel :[{
        name:"rentDueDate", 
        index:"rentDueDate", 
        align:"center", 
        width:"130", 
        search:true, 
        stype:"select",
        searchoptions: {
            value: "all:All;due:Due;overdue:Overdue;future:+1 Week;" ,
            defaultValue:"due"
        }
    },

Where in the search options (or in the colModel) would I put the onChange event Handler?


Sorry, but it's unclear what your exact problem. If the user choose an option from the drop-down list then jqGrid automatically reload the grid with the filter which user have chosen. If you use local datatype then the filtering will done by jqGrid internally. If you use datatype: "json" or datatype: "xml" without usage loadonce: true then jqGrid send request to the server appending information about the filter to the list of standard parameters.

If you really need to handle onChange event in the <select> then you need define change event handler inside of dataEvents :

searchoptions: {
    value: "all:All;due:Due;overdue:Overdue;future:+1 Week;",
    defaultValue: "due",
    dataEvents: [ 
        {
            type: "change",
            fn: function (e) {
                // some code which will be executed onChange
            }
        }
    ]
}
链接地址: http://www.djcxy.com/p/25956.html

上一篇: 使用自定义排序类型进行分组

下一篇: JqG​​rid自定义搜索工具栏事件处理程序