JqGrid Search with multiple text boxes for field
I am wondering if it is possible with JqGrid advanced search to display multiple text boxes for some of the fields I want to search on. For example, if I have a 'Phone Number' field, I want to be able to visualize 2 boxes, one for area code and the other for the rest of the phone number. Then after pressing 'Find' I want to able to get the two values and merge them or do somethin开发者_开发知识库g else.
Any help would be appreciated,
Thanks,
fromano2802
You have an interesting question, but I suggest you to make input of the phone number more nice and user friendly. There are a nice jQuery "Masked Input" Plugin. It allow you display a mask inside a input field, something like "(_) _-____" and allow only input of numbers. To see life what I mean open the page http://digitalbush.com/projects/masked-input-plugin/#demo, set focus to the Phone field and try to type something. Is it not nice!
To do this inside of JqGrid advanced search dialog you should do following
- Download jquery.maskedinput-1.2.2.js or/and jquery.maskedinput-1.2.2.min.js from http://digitalbush.com/projects/masked-input-plugin/.
- Insert one from this JavaScript files in you web page.
Add to the definition of your 'Phone Number' column in
colModel
searchoptions block like following{ name: 'PhoneNumber', width: 83, index: 'PhoneNumber', align: 'center', searchoptions: { dataInit: function (elem) { $(elem).mask("(999) 999-9999"); } } }
It's all. Now just open "Advanced Search dialog", choose 'Phone Number' field and set focus in the input field. The function dataInit
described in the jqGrid documentation under http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config&s[]=datainita and in http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules&s[]=datainit.
By the way you can receive the same masked input during data editing (both form edit and inline edit). Just define the same editoption
like searchoption
s:
{ name: 'PhoneNumber', width: 83, index: 'PhoneNumber', align: 'center',
editoptions: {
dataInit: function (elem) {
$(elem).mask("(999) 999-9999");
}
},
searchoptions: {
dataInit: function (elem) {
$(elem).mask("(999) 999-9999");
}
}
}
精彩评论