Item8944:Item9060:Item9066:

* fixed paths to locale files * improved grid construction process * added field-specific options (title, resizable, align, width, search) * ongoing work on colmodel * removed jquery.fmatter.js as it is already inlined in jquery.jqgrid.js * added docu for %GRID git-svn-id: http://svn.foswiki.org/trunk/JQGridPlugin@7667 0b4bb1d4-4e5a-0410-9cc4-b2b747904278
foswiki · Jun 7, 2010 · 0350082 · 0350082
1 parent b57affa
commit 0350082
Show file tree

Hide file tree

Showing 5 changed files with 190 additions and 565 deletions.
diff --git a/data/System/JQGridPlugin.txt b/data/System/JQGridPlugin.txt
@@ -1,4 +1,4 @@
-%META:TOPICINFO{author="micha" date="1269622158" format="1.1" version="1.2"}%
+%META:TOPICINFO{author="micha" date="1271426279" format="1.1" version="1.3"}%
 ---+ %TOPIC%
 
 %STARTSECTION{"summary"}%
@@ -7,20 +7,75 @@ representing and manipulating tabular data on the web. Since the grid is a
 client-side solution loading data dynamically through Ajax callbacks, it can be
 integrated with any server-side technology, including PHP, ASP, Java Servlets,
 JSP, !ColdFusion, and Perl. For more read the [[%PUBURLPATH%/%SYSTEMWEB%/JQGridPlugin/jqgriddocs/][jqgriddocs]].
+See also the [[http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs][jqgrid wiki]] for up-to-date documentation.
 %ENDSECTION{"summary"}%
 
 ---++ Source
 
 Homepage: http://www.trirand.com/blog/ %BR%
 Author(s): Tony Tomov %BR%
-Version: 3.6.3
+Version: 3.6.5
+
+---++ Syntax
+=%<nop>GRID{"&lt;query>" form="..." }%=
+
+render a grid of topics matching the given query
+
+| *Parameter* | *Description* | *Default* |
+| =query= | search query | searching for topics that have the named =form= attached to it |
+| =web= | web where o start the query | BASEWEB |
+| =form= | !DataForm definition which describes the columns of the grid | |
+| =columns= | name of columbns to display; these are the formfield names as specified in the !DataForm definition in the specified =form=; there is a list of special column names that are remapped to topic properties (see below) | all columns in the !DataForm |
+| =include= | regluar expression columns/formfields must match to be included in the grid model | |
+| =exclude= | regluar expression columns/formfields must NOT match to be included in the grid model | |
+| =rows= | number of rows to display in the grid per page | 20 |
+| =rownumbers= | toggle on/off displaying the row number in the first column of the grid | off |
+| =filterbar= | toggle on/off displaying a filter input field at the top of each column to narrow down search results | off |
+| =toolbar= | toggle on/off displaying a toolbar at the bottom of the grid; switch this on for pagination | off |
+| =sort= | name of column to sort the grid initially | first column (excluding the optional row numbers) |
+| =reverse= | toggle on/off reverse sorting order | off |
+| =caption= | caption to be displayed at the top of the grid | |
+| =pager= | toggle on/off the pager in the toolbar | off |
+| =viewrecords= | toggle on/off computing the total number of records and pages as part of the pager | on |
+| =height= | height of the grid; can be set as a number or =auto= | | 
+| =width= | width of the grid; if not set, the grid's width is the sum of the width of all column  | |
+| =scroll= | when enabled the pager element is disabled; data is loaded dynamically while scrolling down the grid | off |
+| =rowlist= | comma separated list of optional number of rows to select from in the grid interface | 5, 10, 20, 30, 40, 50, 100 |
+| =colname_title= | (per column option) title of the column | field title as specified in the !DataForm |
+| =colname_resizable= | (per column option) toggle on/off whether the width of the column can be changed by the user | on |
+| =colname_align= | (per column option) alignment of the data in the cell | left |
+| =colname_width= | (per column option) width of this column in pixel | |
+| =colname_search= | (per column option) toggle on/off if this column is searchable or not | on |
+
+---++ Special columns
+
+Normnally, the data and the way it is displayed in a GRID is specified by the !DataForm definition the GRID expression points to.
+However, there's a set of additional properties of a topic that can be displayed in a GRID. These are specified in the =columns=
+parameter to %GRID and are mapped to the actual property as follows: 
+
+| *Colname* | *Data* | *Displayed* |
+| Topic | topic name | link to topic |
+| Modified, Changed | time when the topic has been changed recently | standard date format |
+| By, Author | author of the last modification | link to author's homepage |
+| Image, Photo | formfields of that name | displayed as html &lt;img> tag where the data is used as src link ||
+
+When [[Foswiki:Extensions/FlexFormPlugin][FlexFormPlugin]] is installed, each cell is rendered using
+=%RENDERFORDISPLAY= expression.
+
+When [[Foswiki:Extesions/ImagePlugin][ImagePlugin]] is installed, each Image/Photo cell is renderd using an
+=%IMAGE= expression to render thumbnails.
+
+%RED%
+WARNING: This part is still in flux and solved rather adhoc for now. 
+The way how to specify which data is displayed in which way per column is still
+subject to further changes. 
+%ENDCOLOR%
 
 ---++ Examples
 %GRID{
   form="System.UserForm"
   web="%USERSWEB%"
   columns="Topic,FirstName,LastName,Organization,Country,Telephone"
-  rows="30"
   filterbar="on"
   rownumbers="on"
   width="auto"
@@ -37,6 +92,10 @@ Version: 3.6.3
 |  Release: | %$RELEASE% |
 |  Version: | %$VERSION% |
 |  Change History: | <!-- versions below in reverse order -->&nbsp; |
+|  26 May 2010: | fixed loading locales; \
+                  improved grid construction process; \
+                  added field-specific options (title, resizable, align, width, search); \
+                  ongoing work on colmodel |
 |  26 Mar 2010: | initial release, externalized from Foswiki:Extensions/JQueryPlugin |
 |  Dependencies: | %$DEPENDENCIES% |
 |  Home: | Foswiki:Extensions/%TOPIC% |

diff --git a/lib/Foswiki/Plugins/JQGridPlugin.pm b/lib/Foswiki/Plugins/JQGridPlugin.pm
@@ -17,7 +17,7 @@ use strict;
 use warnings;
 
 our $VERSION = '$Rev$';
-our $RELEASE = '0.1';
+our $RELEASE = '0.2';
 our $SHORTDESCRIPTION = 'jQuery grid widget for Foswiki';
 our $NO_PREFS_IN_TOPIC = 1;
 

diff --git a/lib/Foswiki/Plugins/JQGridPlugin/GRID.pm b/lib/Foswiki/Plugins/JQGridPlugin/GRID.pm
@@ -54,15 +54,22 @@ sub new {
     author => 'Tony Tomov',
     homepage => 'http://www.trirand.com/blog/',
     puburl => '%PUBURLPATH%/%SYSTEMWEB%/JQGridPlugin',
-    javascript => ['jquery.jqgrid.js', 'jquery.jqgrid.init.js', 'jquery.fmatter.js'],
+    javascript => ['jquery.jqgrid.js', 'jquery.jqgrid.init.js'],
     css => ['css/jquery.jqgrid.css'],
-    dependencies => ['ui', 'metadata', 'livequery', 'JQUERYPLUGIN::THEME', 'JQGRIDPLUGIN::LANG'], 
+    dependencies => ['ui', 'metadata', 'livequery', 'JQUERYPLUGIN::THEME', 'JQUERYPLUGIN::GRID::LANG'], 
   ), $class);
 
   $this->{fieldNameMap} = {
-    'topic' => 'Topic', 'Topic' => 'topic',
-    'info.date' => 'Modified', 'Modified' => 'info.date',
-    'info.author' => 'Changed By', 'Changed By' => 'info.author',
+    'topic' => 'Topic', 
+    'Topic' => 'topic',
+    'info.date' => 'Modified', 
+    'Modified' => 'info.date',
+    'info.date' => 'Changed', 
+    'Changed' => 'info.date',
+    'info.author' => 'By', 
+    'By' => 'info.author',
+    'info.author' => 'Author', 
+    'Author' => 'info.author',
   };
 
   return $this;
@@ -83,13 +90,12 @@ sub init {
 
   # open matching localization file if it exists
   my $langTag = $this->{session}->i18n->language();
-  my $localePrefix = 'i18n';
-  my $localePath = $localePrefix.'/grid.locale-'.$langTag.'.js';
-  $localePath = $localePrefix.'/grid.locale-en.js' 
-    unless -f $this->{puburl}.'/'.$localePath;
+  my $localeFile = 'i18n/grid.locale-'.$langTag.'.js';
+  $localeFile = 'i18n/grid.locale-en.js' 
+    unless -f $this->{puburl}.'/'.$localeFile;
 
-  my $header .= $this->renderJS($localePath);
-  Foswiki::Func::addToZone('body', "JQGRIDPLUGIN::LANG", $header, 'JQUERYPLUGIN::UI');
+  my $header .= $this->renderJS($localeFile);
+  Foswiki::Func::addToZone('body', "JQUERYPLUGIN::GRID::LANG", $header);
 }
 
 =begin TML
@@ -107,12 +113,10 @@ sub handleGrid {
   my $theWeb = $params->{web} || $web;
   my $theForm = $params->{form} || '';
   my $theCols = $params->{columns};
-  my $theTitles = $params->{titles};
   my $theRows = $params->{rows} || 20;
   my $theRowNumbers = $params->{rownumbers} || 'off';
   my $theInclude = $params->{include};
   my $theExclude = $params->{exclude};
-  my $theEditable = $params->{editable} || 'off';
   my $theFilterbar = $params->{filterbar} || 'off';
   my $theToolbar = $params->{toolbar} || 'off'; # navGrid
   my $theSort = $params->{sort};
@@ -125,23 +129,62 @@ sub handleGrid {
   my $theScroll = $params->{scroll} || 'off';
   my $theRowList = $params->{rowlist} || '5, 10, 20, 30, 40, 50, 100';
 
+  # SMELL: unused for now
+  #my $theEditable = $params->{editable} || 'off';
+
   # sanitize params
   $theRowNumbers = ($theRowNumbers eq 'on')?'true':'false';
   my $gridId = "jqGrid".Foswiki::Plugins::JQueryPlugin::Plugins::getRandom();
   my $pagerId = "jqGridPager".Foswiki::Plugins::JQueryPlugin::Plugins::getRandom();
 
-  my $filterToolbar = ($theFilterbar eq 'on'?'.filterToolbar()':'');
-  my $navGrid = ($theToolbar eq 'on'?'.navGrid(\'#'.$pagerId.'\',{search:false})':'');
+  my $filterToolbar = '';
+  if ($theFilterbar eq 'on') {
+    $filterToolbar = <<"HERE";
+myGrid.jqGrid('filterToolbar'); 
+HERE
+  }
+  my $navGrid = '';
+  if ($theToolbar eq 'on') {
+    $navGrid = <<"HERE";
+myGrid.jqGrid('navGrid', '#$pagerId', {
+  search:false, 
+  edit:false, 
+  del:false, 
+  refresh:false, 
+  add:false
+});
+myGrid.jqGrid('navButtonAdd', '#$pagerId', {
+  caption:'%MAKETEXT{"Clear"}%',
+  title:'%MAKETEXT{"Clear Search"}%',
+  buttonicon:'ui-icon-refresh', 
+  onClickButton:function() { 
+    myGrid[0].clearToolbar();
+  } 
+}); 
+HERE
+  }
+
+# SMELL: parked code
+#
+# myGrid.jqGrid('navButtonAdd', '#$pagerId', {
+#   caption:'%MAKETEXT{"Search"}%',
+#   title:'%MAKETEXT{"Toggle Search"}%', 
+#   buttonicon:'ui-icon-search',
+#   onClickButton:function() { 
+#     myGrid[0].toggleToolbar(); 
+#   } 
+# }); 
 
   my $sortOrder = ($theReverse eq 'on'?'desc':'asc');
 
+#    "foswiki_filtertoolbar:".($theFilterbar eq 'on'?'true':'false'),
+#    "foswiki_navgrid:".($theToolbar eq 'on'?'true':'false'),
   my @metadata = (
-    "foswiki_filtertoolbar:".($theFilterbar eq 'on'?'true':'false'),
-    "foswiki_navgrid:".($theToolbar eq 'on'?'true':'false'),
     "rowNum:$theRows",
     "rowList:[$theRowList]",
     "sortorder: '$sortOrder'",
     "rownumbers: $theRowNumbers",
+    "cellLayout: 18", # SMELL: this is depending on the skin's css :(
   );
 
   push @metadata, "pager:'$pagerId'" if $thePager eq 'on';
@@ -189,25 +232,54 @@ sub handleGrid {
       @selectedFields = grep {!/^($theExclude)$/} @selectedFields;
     }
 
-    my $colNames;
-    if ($theTitles) {
-      $colNames = "['".join("','", split(/\s*,\s*/, $theTitles))."']";
-    } else {
-      $colNames = "['".join("','", @selectedFields)."']";
-    }
-    push @metadata, "colNames: $colNames";
+    # get model
+    my @colModels;
+    foreach my $fieldName (@selectedFields) {
+
+      my @colModel;
+      push @colModel, "name:'$fieldName'";
+
+      # title
+      my $fieldTitle = $params->{$fieldName.'_title'};
+      $fieldTitle = $fieldName unless defined $fieldTitle;
+      push @colModel, "label:'$fieldTitle'";
+
+      # resizable
+      my $fieldResizable = $params->{$fieldName.'_resizable'};
+      $fieldResizable = 'on' unless defined $fieldResizable;
+      $fieldResizable = ($fieldResizable eq 'on')?'true':'false';
+      push @colModel, "resizable:$fieldResizable";
+
+      # align
+      my $fieldAlign = $params->{$fieldName.'_align'};
+      $fieldAlign = 'left' unless defined $fieldAlign;
+      push @colModel, "align:'$fieldAlign'";
+
+      # width
+      my $fieldWidth = $params->{$fieldName.'_width'};
+      push @colModel, "width:$fieldWidth" if defined $fieldWidth;
+
+      # search
+      my $fieldSearch = $params->{$fieldName.'_search'};
+      $fieldSearch = 'on' unless defined $fieldSearch;
+      #$fieldSearch = 'false' if $this->column2FieldName($fieldName) eq 'info.date';
+      $fieldSearch = 'false' if $this->column2FieldName($fieldName) =~ /Image|Photo|Icon/;
+      $fieldSearch = ($fieldSearch eq 'on')?'true':'false';
+      push @colModel, "search:$fieldSearch";
+
+      # colmodel
+      push @colModels, '{ '.join(', ', @colModel).'}';
 
-    my @colModel;
-    foreach my $fieldName (@selectedFields) { 
       $theSort = $fieldName unless $theSort;
-      my $col = "{name:'".$fieldName."', index:'".$fieldName."'}";
-      push @colModel, $col;
     }
-    push @metadata, 'colModel: ['.join(",\n", @colModel).']';
 
+    push @metadata, 'colModel: ['.join(",\n", @colModels).']';
+
+    my $baseWeb = $this->{session}->{webName};
+    my $baseTopic = $this->{session}->{topicName};
     my $gridConnectorUrl = Foswiki::Func::getScriptUrl('JQGridPlugin', 'gridconnector', 'rest',
-      theweb=>$theWeb,
-      thetopic=>$topic,
+      topic=>$baseWeb.'.'.$baseTopic,
+      web=>$theWeb,
       query=>$theQuery,
       columns=>join(',', @selectedFields),
     );
@@ -218,9 +290,11 @@ sub handleGrid {
 
     my $metadata = '{'.join(",\n", @metadata)."}\n";
     my $jsTemplate = <<"HERE";
-<script type="text/javascript">
-jQuery(document).ready(function(){ 
-  jQuery('#$gridId').jqGrid($metadata)$filterToolbar$navGrid;
+<script>
+jQuery(function(\$) {
+  var myGrid = \$('#$gridId').jqGrid($metadata);
+  $filterToolbar;
+  $navGrid;
 }); 
 </script>
 HERE
@@ -260,7 +334,11 @@ sub restGridConnector {
     $fieldName = $this->column2FieldName($fieldName);
 
     foreach my $value (split(/\s*,\s*/, $values)) {
-      $query .= " AND lc($fieldName)=~lc('$value')";
+      if ($value =~ /^-(.*)$/) {
+        $query .= " AND !(lc($fieldName)=~lc('$1'))";
+      } else {
+        $query .= " AND lc($fieldName)=~lc('$value')";
+      }
     }
   }
 
@@ -269,8 +347,8 @@ sub restGridConnector {
 
   my $reverse = ($sord eq 'desc'?'on':'off');
 
-  my $web = $request->param('theweb') || $this->{session}->{webName};
-  my $topic = $request->param('thetopic') || $this->{session}->{topicName};
+  my $web = $request->param('web') || $this->{session}->{webName};
+  my $topic = $this->{session}->{topicName};
 
   my $count = $this->count($web, $query);
   unless (defined $count) {
@@ -399,22 +477,28 @@ sub search {
     foreach my $fieldName (@selectedFields) {
       my $cell = '';
       $fieldName = $this->column2FieldName($fieldName);
-      if ($fieldName =~ /Image|Photo/) {
+      if ($fieldName eq 'Icon') {
+        $cell .= '<img src=\'$expand('.$fieldName.')\' width=\'16\' />';
+      } elsif ($fieldName =~ /Image|Photo/) {
         if ($context->{ImagePluginEnabled}) {
-          $cell .= '$percntIMAGE{\"$expand('.$fieldName.')\" size=\"135\" type=\"plain\" warn=\"off\"}$percnt';
+          $cell .= '$percntIMAGE{\"$expand('.$fieldName.')\" size=\"80\" type=\"plain\" warn=\"off\"}$percnt';
         } else {
-          $cell .= '<img src=\'$expand('.$fieldName.')\' style=\'max-width:135px\' />';
+          $cell .= '<img src=\'$expand('.$fieldName.')\' style=\'max-width:80px\' />';
         }
       } elsif ($fieldName =~ /info.author/) {
         $cell .= '[[%USERSWEB%.$expand(info.author)][$expand(info.author)]]';
       } elsif ($fieldName =~ /info.date|createdate/) {
         $cell .= '$formatTime('.$fieldName.')';
       } elsif ($fieldName eq 'topic') {
-        $cell .= '[[$web.$topic][$topic]]';
+        $cell .= '[[$web.$topic][$expand(topictitle or topic)]]';
       } else {
-        $cell .= '$expand('.$fieldName.')';
+        if ($context->{FlexFormPluginEnabled}) {
+          $cell .= '$percntRENDERFORDISPLAY{topic=\"$web.$topic\" field=\"'.$fieldName.'\" format=\"$value\"}$percnt';
+        } else {
+          $cell .= '$expand('.$fieldName.')';
+        }
       }
-      $tml .= '<cell><![CDATA['.$cell.']]></cell>'."\n";
+      $tml .= '<cell><![CDATA['.$cell.' ]]></cell>'."\n"; # SMELL extra space behind cell needed to work around bug in Render::getRenderedVerision
     }
     $tml .= '</row>"}%';
 

diff --git a/lib/Foswiki/Plugins/JQGridPlugin/MANIFEST b/lib/Foswiki/Plugins/JQGridPlugin/MANIFEST
@@ -111,7 +111,6 @@ pub/System/JQGridPlugin/i18n/Makefile 0644
 pub/System/JQGridPlugin/jqDnR.js 0644
 pub/System/JQGridPlugin/jqgriddocs.pdf 0644
 pub/System/JQGridPlugin/jqModal.js 0644
-pub/System/JQGridPlugin/jquery.fmatter.js 0644
 pub/System/JQGridPlugin/jquery.jqgrid.init.js 0644
 pub/System/JQGridPlugin/jquery.jqgrid.init.js.gz 0644
 pub/System/JQGridPlugin/jquery.jqgrid.init.uncompressed.js 0644