jQuery Grid 1.0 beta
jQuery Grid is my first jQuery plugin. It is based on grid developed by makoomba. I have rewrite the code (and add a lot of new features), so that the grid can work with jQuery 1.1.2. The grid is a Ajax-enabled JavaScript control that provides solution for representing tabular data on the web. Since the grid is client-side solution and loading data dynamically through Ajax callbacks, it can be integrated with any server side technology.
Features:
- Full control with JavaScript API
- Data returned from the server is XML
- Simple configuration
- Ability to load big datasets (paging)
- Resizable columns
- Server-side sorting
- Support of links, images, checkboxes
- You can add more than one grid on a sigle page (master-detail)
Licensing
The plugin is available under the the same double licensing scheme as jQuery itself is (MIT/GPL).
Documentation
The documentation can be found in the documentation page.
Hello, your jgrid is wonderful, but I can’t make it work. It keeps “loading” the content but never loads, the table keeps empty.
I’m sure that must be something wrong in my PHP, could you please publish the PHP you are using for generate de XML?
Thanks
Hi Andres,
here is the basic MySQL PHP example:
0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
$start = $limit*$page – $limit; // do not put $limit*($page – 1)
$SQL = “SELECT id, fld1, fld2, fld3 FROM myTable ORDER BY $sidx $sord LIMIT $start , $limit”;
$result = mysql_query( $SQL ) or die(“Couldn’t execute query.”.mysql_error());
if ( stristr($_SERVER[“HTTP_ACCEPT”],”application/xhtml+xml”) ) {
header(“Content-type: application/xhtml+xml”); } else {
header(“Content-type: text/xml”);
}
echo(“\n”);
echo “<rows>”;
echo “<page>”.$page.”</page>”;
echo “<total>”.$total_pages.”</total>”;
// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
echo “<row id='”. $row[id].”‘>”;
echo “<cell>”. $row[fld1].”</cell>”;
echo “<cell></cell>”;
echo “<cell>”. $row[fld3].”</cell>”;
echo “</row>”;
}
echo “</rows>”;
?>
i try to use your script,but the $page value can’t get ,return a object value,please check your script,ths!
and i want to put some chinese in ,but it can’t work, in XML file it can display
below is my php script,can you tell me where i wrong?
0 ) {
$total_pages = round($count/$limit,0);
} else {
$total_pages = 0;
}
$start = $limit*$page – $limit; // do not put $limit*($page – 1)
$query1=”SELECT * FROM f_ware”;
$cursor1=exequery($connection,$query1);
$dom = new DOMDocument(“1.0″,”utf-8”);
header(“Content-Type: text/xml”);
$root = $dom->createElement(“rows”);
$dom->appendChild($root);
$page = $dom->createElement(“page”);
$root->appendChild($page);
$text = $dom->createTextNode(“$page”);
$page->appendChild($text);
$total = $dom->createElement(“total”);
$root->appendChild($total);
$text = $dom->createTextNode(“$total_pages”);
$total->appendChild($text);
$LINKMAN_COUNT=1;
while($ROW=mysql_fetch_array($cursor1))
{
$PRODUCT_ID1=$ROW[“ware_id”];
$ware_name1=$ROW[“ware_name”];
$ware_code1=$ROW[“ware_code”];
$w_count=$ROW[“w_count”];
$w_q=$ROW[“w_q”];
$w_h=$ROW[“w_h”];
$w_l=$ROW[“w_l”];
$w_c=$ROW[“w_c”];
$setdate=$ROW[“setdate”];
$row = $dom->createElement(“row”);
$root->appendChild($row);
$id = $dom->createAttribute(“id”);
$row->appendChild($id);
$idvalue = $dom->createTextNode(“$LINKMAN_COUNT”);
$id->appendChild($idvalue);
$cell = $dom->createElement(“cell”);
$row->appendChild($cell);
$text = $dom->createTextNode(“$LINKMAN_COUNT”);
$cell->appendChild($text);
$cell = $dom->createElement(“cell”);
$row->appendChild($cell);
$text = $dom->createTextNode(“$ware_code1”);
$cell->appendChild($text);
$cell = $dom->createElement(“cell”);
$row->appendChild($cell);
$text = $dom->createTextNode(“$w_count”);
$cell->appendChild($text);
$cell = $dom->createElement(“cell”);
$row->appendChild($cell);
$text = $dom->createTextNode(“$setdate”);
$cell->appendChild($text);
$cell = $dom->createElement(“cell”);
$row->appendChild($cell);
$text = $dom->createTextNode(“$w_q”);
$cell->appendChild($text);
$cell = $dom->createElement(“cell”);
$row->appendChild($cell);
$text = $dom->createTextNode(“$w_c”);
$cell->appendChild($text);
$LINKMAN_COUNT++; }
echo $dom->saveXML();
?>
by the way,can you give a full examples( html file,mysql file,php file),because your Document is not clear ^_^ hehe ,thank you !!! but your plugins is powerful!!
Hi sam,
You can go to Examples page and download the working example.
I have configured two php files with Adodb and MySQL. Both work for me fine.
Regards
Hi Tony,
Thanks for your hard work on this. In my application I won’t know how many columns I have until I get the database response (depends on which table I instruct it to query). Am I likely to experience a lot of problems if I tried to modify your code to pass a column heading XML tag which contained the colNames and colModel rather than specifying them in the parameters?
Thanks
Hi phil,
Sorry for the late answer.
This can be done, but I never try this.
The main goal is to fill the colModel and colNames array with the data from the xml.
1. Comment the lines between 98 and 101. This condition check if the arrays of the colModel and colNames are not equall.
2. Write a custom function which read the header data from xml (the capitions and the real names.) and fill the arrays colNames and colModel with a apropriate data.
3. Call the function before constructing the grid – i.e before line 263.
Regards
Tony,
Thanks. I’ll probably give this a go and see how I get on.
Phil
Hi. Just let me say you did a great plugin.
I have problem only in FIREFOX I have problem at first data load
as you can see below
[ http://img521.imageshack.us/img521/9782/jgridzk9.gif ]
after a sort everything works fine
[ http://img224.imageshack.us/img224/1144/jgridafternu1.gif ]
It seems that with a low number of results/rows there are problems on the first firefox view, everything ok in FF with more data
Everyone has same problem and above all knows why and the solution…?
Everything works fine in IE
Hi Luca,
Thanks.
Yes I know about this problem. Currently I resolve the problem, but it seems that this is not good solution. Next week I will publish the corrected version with a another addition – subgrid.
Best regards
Tony
Hello
Is there a way to resize the grid’s witdth and height automatically to the window size when resized and the pager bar is allway at the bottom?
Thanks
Aldo
Hi Alodo,
Not sure, but when using dimensions plugin this can be done. Always I will make some tests
Regards
Hi there,
Nice job! But i’ve the same problem of Luca (every cell is on the left). Can you send me your solution, even if it’s not really good π I’d appreciate.
Thanks
PaPaReNT,
You can download the updated version 1.1beta
Regards
New version fixes the problem I had. Nice job.
Now a simple question, how to change grid width??? Tried giving the width to the table in html code (i.e. ), this enlarges the table but not the headers…
in the code I’ve seen something referring to the css style but I have only width value in this class to be changed
table.scroll th span {
cursor: e-resize;
border-right: 1px solid #D6D2C2;
width: 10px;
float: right;
display: block;
margin: -2px -1px -2px 0px;
height: 18px;
overflow: hidden;
}
Modifying this only changes header’s cells width but not the entire width…
see image for example
http://img179.imageshack.us/img179/8131/jqgrid11lb4.jpg
any hints???
Hi Luca,
Glad to help you.
The width of the grid is a sum of the width of the columns when you define the grid.
So, if you have a width of a table, the result will be unexpecetd.
Actually this is idea – maybe i can do that.
The idea is – if you specify a width of the table the width of the columns shuld be scaled accordind to that width
Let see if I can do that π
Regards
[QUOTE]
The idea is – if you specify a width of the table the width of the columns shuld be scaled accordind to that width
[/QUOTE]
That would be great. best would be the possibility to set the width in the parameters like height, and let the script calculate everything :-))))
thanks for prompt answer
Hi… first of all… thanks for an amazing plugin!!! The only question(s) that I have is/are as follows:
I noticed that the examples assume that rows will be returned and the table will display irrespective of whether or not their is data to display. Is there anyway to check before trying to present the table if there are rows to display, if so… present them?
Another area that this pops up is when one reaches the last page… you can continue moving through blank pages for infinity. Eg) If there were 5 pages to display, one can still move onto pages 6, 7, 8, etc… Is there a way to check if the user is on the last page, if so then disable/prevent them from moving further?
Thanks!!!
Okay… I am the weakest link!!! I got the grid to stop cycling past the allowed number of pages. My bad!!!
Yeah… it’s me again.
So far I’ve managed to integrate the plugin quite nicely into a page that I’m currently working on… but I was wondering if anyone has figured out how to set the table to adjust automatically yet? I’ve been running around in circles trying to use the dimensions plugin to set the height. The width is easy enough… but problems arise once the scrollbars pop up. Shouldn’t the height of the table be the sum of the height of all rows once they’ve been added to the table..? Does anyone have any idea how this can be solved?
Thanks a million…
Jason
Hi Jason,
Glad to see that you use jqGrid plugin.
Now about the width and height.
For the width is easy, since we set it.
For the height is a difficult. We should calculate a lot of parameters to obtain this feature. I’m not a CSS expert.
Since I I’m ?Β° follower of the simple things I can do something like this:
1. We can set the height of a single row as parameter.
2. When this parameter is set the common parameter of the table height should be omited.
3. As a result I know how many rows are returned from the server and then I can set the new height as multiplication from number of returned rows and the height of the single row.
Is that what you want?
Note that you will got a unexpected results in this case when you change the:
table.scroll tbody td {
….
overflow: hidden;
white-space: nowrap;
…
}
in the css
Regards
Tony
this resolves the problem of table width???
or only single cell’s width???
is it difficult to set table width as parameter?’?
Hi Luca,
The new version is ready and fixes the problem with a table width.
There are a lot of new features, but I need to make some additional tests.
I hope that the new version will be published in Saturday.
Regards
Tony
Great job tony.
I’ll wait for this next release, I’m sure it’ll be as good as other realeses.
Thanks for accepting our suggestions to create an improved version.
Counting the hours ’till next release π
luca
Tony,
Thanks for your work on jqGrid. This is a “killer” plugin with a huge amount of utility. IMO jQuery badly deserves a top-notch native grid plugin, and yours is fitting the bill. There is the awesome EXT2JS grid component, but for some reason it feels like jQuery is the redheaded stepchild of that project. It’s always nice to have alternatives…
Quick ?: Did you write the column sorting method(s)? I am thinking about “mashing in” Christian Bach’s modular/extendable methods from tablesorter2 (http://lovepeacenukes.com/tablesorter/2.0/)… but will wait until releases to do benchmarks.
Keep up the great work! I’m looking forward to the next version.
~ Brice
Brice,
Thank you for the good words. I think this plugin will be better.
I know about EXTJS and will not comment…
I think the idea of jQuery UI is great and hope that in the near future this will be one of the best UI.
Now about your question- This is possible and require a lot of logic. I will try…
That what I will try (and need) in the moment is to implement the grid as something like a autocomplete combobox. Yes, there are a lot of such plugins, but none of them do that I want and they have a strange behaviour in my project.
Thank you again
Regards
Hi Tony,
Didn’t know where to post this so i will just put it here.
I found a little bug whereby if a user chooses a row limit of say 50, and they are on the last page of table with a resultset of only 40 records then the table will freeze on loading.
I fixed this by altering the populate function associated with selbox change event. The function associated with the selbox change event now passes a reference to the populate function indicating that the ajax call should use page 1 instead of the current page.
If that didn’t make any sense please see the code below…
…
$(p.pager).find(“select”).bind(‘change’,function() {
p.rowNum = this.value>0 ? this.value : p.rowNum; populate(‘page’);
if(onSelectRow) {onSelectRow(p.selrow = null);} else {p.selrow = null;}
});
…
…
var populate = function (source) {
if(!grid.hDiv.loading) {
if(source == ‘page’){ p.page = 1; }
…
By the way your plugin is tops!
Rod,
Thank you very much for the correction. If possible can you send me a link to this problem, if not please write me the initial settings of the grid i.e $(“some”).jqGrid(..). I will simulate the problem.
Reason to do that is that the user must stay in the same settings and look more rows. I will investigate again the code and eventually make the needed (your) changes.
Regards
It’s really wonderful. But I am facing a problem while adding my requirement as In my case the total amount will be calculated automatically by adding the amount + tax. I think that this can be achieved using any method given below …
1. Reloading the entire row data (getting that row again from the server using ajax)
2. Reloading the complete grid, but in this case I have to take care of the current paging and sorting order.
3. Updating the row data in a callback function using setRowData() .. -> I have tried this BUT it is NOT working.It is working if I pass a static rowID in the 1st param but it is not working when I am passing dynamic rowID + its data which I am getting as a result in my callback function.
Can anyone help me in this !
Thanks
Ashish Sharma
Ashish Sharma,
Could you please describe in more detail what you try to do?
Which methods do you use?
If possible please post a code.
Hi there Tony, this is definitely the best ajax datagrid I have seen and I have tried a lot! My problem though is that I cannot figure out how to get the grid to update the table after inline edit.
I can see that inline editing works and that it updates the dataset fine – but how does it then perform an update query on the mysql table?
I really hope you can help. Thanks for your time.
Cheers
Aleonz
Hi Aleonz,
If you look in demo page Row Editing -> Basic Example
you should note two url – one for query data (parameter url)
and another for saving data to the server (editurl)
Let consider this example, and suppose that the editurl has another name
edit.php (not like in example page server.php)
If you call save row method the data is posted to the server via edit.php and you can
obtain the values and set it to the database
edit.php can look like this:
Note that you should perform additional checking of data before you update the database.
If you need help please let me known
Tony
Hello,
A very nice plugin!
It would be great to see a fuller verson of documentation. For example features described in http://www.trirand.com/blog/?p=3#comment-273 can not be found in http://www.trirand.com/blog/?page_id=4 (documentation). For some reason PHP scripts in example pages are cut on most interesting place.
Thanks
Hello This is great; I been looking for a nice grid for quite sometime now I try creating my own and as I see this (this great);
– One thing is your documentation is not that detailed. for the php part and it would be very nice if it you would have a callback return that canbe catch after the grid calls the edit url so we can test the request and output value for our evaluation.
– I kind of encounter a Problem in IE your x button in IE does not appear its there when you click it and you can also right click it and select to show picture it will show it to you.
-Thank this is a realy realy good grid
this is a realy realy good grid
Hi
It is a really useful plugin. Saves a lot of time for me
Thank you very much.
Great work!
It would be nice if the grid has a filter option by clicking on the column header and selecting entry/ies which you want in the filter. Once you filter entries based on your filter criteria, a way to select all entries at once will save a lot of user time in selecting relevant entries.
I canΓ’β¬β’t make it work… π
i think my php is work fine.. but i’m getting a error:
[Exception] TypeError: Cannot read property ‘nodeType’ of null
can anyone help me??
The documentation link gives me a 404 error, mate π
Too bad this is bloated, overly complex, and poorly documented because the rendered product with UI is actually surprisingly nice.