The custom_search.html view contains the EASIER TO UNDERSTAND customization code.
Here is the technique:
1. Make the SQLFORM.grid's Standard Search Input hidden.
2. Define Custom Search Input elements with onchange events that send their values to the to the hidden Standard Search Input.
3. Insert the Custom Search Input elements after the Standard Search Input (“#w2p_keywords”) using jQuery .insertAfter().
- This prevents them from showing up on Edit or View pages.
- Insert them in reverse order of them appearing on the page.
# in default.py def custom_search(): ''' Implements SQLFORM.grid Custom Search WITHOUT specifying a custom search_widget, and so needing to read & understand the clever web2py implementation source code. The custom_search.html view contains the EASIER TO UNDERSTAND customization code. The technique: 1. Make the grid's Standard Search Input hidden. 2. Define Custom Search Input elements with onchange events that send their values to the to the hidden Standard Search Input. ''' query=((db.contact.id > 0)) fields = (db.contact.id, db.contact.l_name, db.contact.f_name, db.contact.prime_phone, db.contact.date_modified, ) headers = {'contact.id': 'ID', 'contact.l_name': 'Last Name', 'contact.f_name': 'First Name', 'contact.prime_phone': 'Primary Phone', 'contact.date_modified': 'Info Last Updated', } init_sort_order=[db.contact.l_name] grid = SQLFORM.grid(query=query, fields=fields, headers=headers, orderby=init_sort_order, searchable=True, user_signature=False, create=True, deletable=False, editable=True, maxtextlength=100, paginate=25) return dict(grid=grid)
<!-- In custom_search.html view --> {{extend 'layout.html'}} {{block head}} {{super}} <script> function phoneSrch(){ var srch ='contact.prime_phone contains '+'"'+jQuery('#joephone').val()+'"'; $("#w2p_keywords").val(srch); } function lnameSrch(){ var srch ='contact.l_name starts with '+'"'+jQuery('#joelname').val()+'"'; $("#w2p_keywords").val(srch); } $(document).ready(function(){ // Make the Grid Standard Search Input hidden $("#w2p_keywords").prop("type", "hidden"); // Insert the Custom Search Input elements after // the Standard Search Input ("#w2p_keywords") // This prevents them from showing up on Edit or View pages. // Insert them in reverse order of them appearing on the page. var input2Str = '<div class="joeinputclass" style="padding-bottom:10px;" >'; input2Str += '<span class="joelabelclass" >Primary Phone contains: '; input2Str += '</span><input name="joephone" id="joephone" type="text" '; input2Str += 'onchange="phoneSrch()" style="width:150px;" ><br/></div>'; $(input2Str).insertAfter("#w2p_keywords"); var input1Str = '<div class="joeinputclass" style="padding-bottom:10px;">'; input1Str += '<span class="joelabelclass" style="padding-right:18px;" >'; input1Str += 'Last Name starts with: </span><input name="joelname" '; input1Str += 'id="joelname" type="text" onchange="lnameSrch()" '; input1Str += 'style="width:150px;" ></div>'; $(input1Str).insertAfter("#w2p_keywords"); }); </script> {{end}} <h2>Contacts</h2> <div id="theweb2pygrid"> {{=grid}} </div>
Comments (0)