Open pietera99 opened 11 years ago
Thank you very much. I'll examine your code when I have time to do.
It's the least I can do in return for your wonderfull jtable plug-in :)
cool, do you have a demo we could view? I am looking for to replace the add record with a search records and have the same style popup with search options
Here are some screenshots:
The default view
When clicking on the search-icon
After typing two or more chars
When ENTER is pressed the final search results
BTW, I have it working now on jTable2.2.1 now
In jquery.jtable.js
FIND:
/* Creates a header cell for given field.
* Returns th jQuery object.
*************************************************************************/
_createHeaderCellForField: function (fieldName, field) {
field.width = field.width || '10%'; //default column width: 10%.
var $headerTextSpan = $('<span />')
.addClass('jtable-column-header-text')
.html(field.title);
var $headerContainerDiv = $('<div />')
.addClass('jtable-column-header-container')
.append($headerTextSpan);
var $th = $('<th></th>')
.addClass('jtable-column-header')
.css('width', field.width)
.data('fieldName', fieldName)
.append($headerContainerDiv);
return $th;
},
REPLACE WITH:
/* Creates a header cell for given field.
* Returns th jQuery object.
*************************************************************************/
_createHeaderCellForField: function (fieldName, field) {
field.width = field.width || '10%'; //default column width: 10%.
var ss = '';
if (field.sorting == false && field.search == true) {
ss = ' <img src="img/icons/magnifier_zoom_in.png" onclick="tlg(this)"><span class="findbox"><input onKeyUp="ac(this)" onkeydown="menter(event, this)" type="text" size="7" name="' + fieldName +
'" id="' + fieldName + '" value="" /></span>';
}
var $headerTextSpan = $('<span />')
.addClass('jtable-column-header-text')
.html(field.title + ss);
var $headerContainerDiv = $('<div />')
.addClass('jtable-column-header-container')
.append($headerTextSpan);
var $th = $('<th></th>')
.addClass('jtable-column-header')
.css('width', field.width)
.data('fieldName', fieldName)
.append($headerContainerDiv);
return $th;
},
FIND:
options: {
sorting: false,
defaultSorting: ''
},
REPLACE WITH:
options: {
search: false,
sorting: false,
defaultSorting: ''
},
In your icon-image directory put a nice small looking-glass icon and point to above: img src="img/icons/magnifier_zoom_in.png" or change the img filename accordingly.
Cheers :)
woaaah, sweet man!!! good work! do you think its easy to implement operators such as "greater than or equal to" or less than.. etc.. ?
That's actually quite easy. You can change the mySQL queries into what you need:
change:
x LIKE ". quote_smart( chr(37) . $_GET["term"] . chr(37) )
into:
x ". $_GET["term"]
and then you can enter in the search-box your greater/lessthan/equal signs like this: ">123" or "<123" or "=123" etc
(do remember to protect against SQL-injections)
I'd like to see this brought in as a standard plugin. Text fields need some styling. See ExtJS for some ideas.
Hello,
How to wrap the listAction: on button click event. I mean i wanna to load my jTable when someone click a button on ASPX page.
See API documentation: http://jtable.org/ApiReference#met-load
Just call $('#MyTableContainer').jtable('load'); on button's click event.
Thnx, didn't know that :)
Could you add this feature to the Add a Record menu? I am trying to add stock tickers to my table and I would like the user to search for a company name or ticker before adding it the table. (I can't use a pull down menu, because I have 7,000 tickers/company names. They can't scroll through that size list.)
yeup..i hope this is included in standard release
@wallscheater: YES you can, it's actually quite easy to do so. What you need to do is all the stuff as described above, and then add a tiny bit of code (example below) to every field you want the autocomplete/suggest to popup within the form:
client-side code jTable:
assignedto: {
title: 'Assigned to',
create: false,
edit: true,
list: false,
input: function (data) {
return '<div class="ui-widget"><input onkeyup="ac(this)" type="text" name="assignedto" id="assignedto" value="' + data.record.assignedto + '" /></div>';
}
},
server-side code: in de php-code above find the autocomplete function switch statement and add your query here: something like:
case 'assignedto' : $what = 'uname'; $items = fetchSqlArray("SELECT uname FROM users WHERE enabled = 1 AND uname LIKE '%".$val."%' GROUP BY uname LIMIT 10 ;"); break;
That's all :) have fun!
@pietera99
Thank you very much for this!
So, will this be included one day? It is a good addition.
Upvoted feature
This is exactly what I'm looking for! Any chance someone has tried this in ASP.NET MVC?
We all agree jtable is an amazing plug-in. The only thing that lacked for me is a column search and autosuggest/complete, so I decided to add this myself.
WARNING: the code below acts as an example, if you don't have a good portion of experience with programming in jquery, php and mySQL, then do not proceed, I won't provide support on the example code below, you're on your own, use at your own risk.
Here's what I've done to modify jtable to have a fully functional autocomplete+search option for listview columns. jq-UI provides an autocomplete for your input boxes. I've used this as the base for creating a nice working autocomplete+search function for jtable. Programming is somewhat quick and dirty, but what the hack, it works!
This one is for jtable 1.7.2. Scroll down and you'll find one for jtable 2.2.1.
In jquery.jtable.js
FIND:
REPLACE WITH:
FIND:
REPLACE WITH:
In your icon-image directory put a nice small looking-glass icon and point to above: img src="img/icons/magnifier_zoom_in.png" or change the img filename accordingly.
All you have to do, is modify your list-actions according to the example above. There's no need for modifying your Create, Update en Delete actions.
Have fun!