Category Archives: WPFjqGrid

WP FjqGrid released!

Use the jqGrid plugin of jquery to manage MySql db tables.

Works with PHP 5.2.12 or higher: please report any issue you find, and any feature you want. I’ll try to fix the firsts and to implement the seconds!

This is a very first release with many limitations; jqGrid offers a lot of features but only few are actually supported by this plugin.

I planned to develop many other features, but this depends by the interest of the users, and eventually from the support. If you want to contribute with a translation or writing code ask me, if you want to make a donation you can use PayPal.
If any bug found please ask me for support using WordPress official site!

The plugin can be downloaded at official WordPress site.

Here is a sample, where you can freely edit, delete or add records:

Search

the shortcode used is:
[ wpf-jqgrid table='wpf_jqgrid_sample' idtable=1 caption="Temperatures" editable=true orderby=2,desc]
as you can see:
§ The columns headers are clickable and sort the data both ascending or descending order;
§ the columns are resizable;
§ the filters just below the headers permit to search for record ‘begin with’ in each column. [just a little issue to be solved: the data to be filter must be entered in 'mysql' format: yyyymmdd hh:mm]
§ The format of numeric decimal are comma-separated right aligned, the text is left aligned, the data is in the format yyyy/mm/dd hh:mm and centered (these are all user choices).
§ The data is paginated and the page size may be selected at run time. You can search the data using the magnification glass in the bottom left angle.
§ CRUD operations; edit and insert on a popup window.


FjqGrid has many of the features of jqGrid, in particular:
* It is Cross browser. Supports for IE 6.0+, FireFox 2.0+, Safari 3.0+, Opera 9.2+ and Google Chrome.
* Has Multilanguage support (i18n). Currently jqGrid supports more than 20 languages, and the .mo files in wordpress are easy to realize.
* CSS based themes. jqGrid is compatible with UI Theming. Sometimes it is required to tune WPFjqGrid CSS to perfectly suite some WordPress Themes.

To learn more you should refer to jqGrid official site by Trirand.
The next features to be develop are:
* op CUD check for data format errors
* set rights to modify tables on setup and check on frontend
* set key field(s) on fronted
* decode required fields with a scrolldown list
* edit/delete/insert on line
* 1 to n slave table
* simplify format set on frontend for each field of a selected table
* movable columns
* … many other as listed at jqGrid wiki

MySql code to create table and populate it:

CREATE TABLE IF NOT EXISTS `wpf_jqgrid_sample` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `City` varchar(100) DEFAULT NULL,
  `Temp_°C` decimal(10,2) DEFAULT NULL,
  `DateTime` datetime DEFAULT NULL,
  PRIMARY KEY (`ID`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

--
-- Dumping data for table `wpf_jqgrid_sample`
--

INSERT INTO `wpf_jqgrid_sample` (`ID`, `City`, `Temp_°C`, `DateTime`) VALUES
(1, 'Udine', '4.10', '2014-01-26 19:00:00'),
(2, 'Cividale', '2.70', '2014-01-26 19:23:00'),
(3, 'Udine', '4.00', '2014-01-26 21:00:00'),
(4, 'Cividale', '2.30', '2014-01-26 21:30:00'),
(5, 'Udine', '3.60', '2014-01-26 22:00:00'),
(6, 'Cividale', '-1.00', '2014-01-26 22:37:00');
									

In WP FjqGrid Configuration Options you must set:

allowed tables: wpf_jqgrid_sample
custom fields formatting: wpf_jqgrid_sample::DateTime::align:'center',editoptions:{'size':40},formatter:'date',formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'d/m/Y H:i'}|wpf_jqgrid_sample::ID::hidden:true