Tri alpha sur zone d'une table Dojo

fred_pack · ‎19 Feb 2010

Bonjour,

J'ai adapté à mes besoins le trés bon tuto ci-dessous :
http://drquyong.com/myblog/?p=5

j'ai simplifié l'affichage pour n'avoir qu'une liste d'espaces et de docs consultables

tout fonctionne bien…, sauf que l'affichage se fait de manière 'aléatoire', alors que je voudrais trier l'affichage par ordre alpha sur la zone 'Nom'
Peut-être est-ce dans la définition de la table Dojo, enfin, c'est la que j'ai essayé de multiples tests, mais sans succès :?

y-a-t-il une possibilité de trier cette table par ordre alpha sur une zone ?

mes codes :

mon url de web script :


http://ip_alfresco:8080/alfresco/service/sample/pack1/Company%20Home
‍‍‍

mes scripts (dans l'espace Web Scripts Extensions) :

DocumentList.get.desc.xml :


<webscript>
  <shortname>Affichage Perso 1</shortname>
  <description>Affichage espace personnalisé 1</description>
  <url>/sample/pack1/{path}</url>
  <format default="html">argument</format>
  <authentication>guest</authentication>
  <transaction>required</transaction>
</webscript>
‍‍‍‍‍‍‍‍‍‍

DocumentList.get.js


// Affiche l'espace par le chemin
var folder = roothome.childByNamePath(url.extension);
if (folder == undefined || !folder.isContainer)
{
   status.code = 404;
   status.message = "Espace " + url.extension + " inexistant";
   status.redirect = true;
 }
 model.folder = folder;
‍‍‍‍‍‍‍‍‍‍‍

Et enfin

DocumentList.get.html.ftl


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Gestion Documentaire </title>
   <script type="text/javascript">
      var djConfig = {
         isDebug: true
         ,debugAtAllCosts: true
      };
   </script>
   <script type="text/javascript" src="${url.context}/scripts/ajax/dojo/dojo.js"></script>
   <script type="text/javascript">
// JAVASCRIPT
      dojo.require("dojo.widget.FilteringTable");
      dojo.require("dojo.widget.InlineEditBox");
      dojo.require("dojo.widget.Dialog");
      dojo.require("dojo.event.*");
      dojo.hostenv.writeIncludes();
      
      var dlg,previewdlg,removedlg;
      function init(e) {
         dlg        = dojo.widget.byId("DialogContent");
         previewdlg = dojo.widget.byId("DialogPreview");
         removedlg  = dojo.widget.byId("DialogRemove");
      }
      dojo.addOnLoad(init);
      
      function populate(id,noderef) {
         document.getElementById("file_label").innerHTML='Edit File';
         document.forms['edit_new_form'].action = '${url.serviceContext}/simpleui/document/save';
         document.getElementById("file_name").value=document.getElementById("name_"+id).innerHTML;
         document.getElementById("file_description").value=document.getElementById("desc_"+id).innerHTML;
         document.getElementById("file_body").value=document.getElementById("body_"+id).innerHTML;
         document.getElementById("file_noderef").value=noderef;
                       dlg.show();
      }
   </script>

   <style type="text/css">
      /*** CSS ***/
      table {
         font-family:Lucida Grande, Verdana;
         font-size:0.8em;
         width:100%;
         border:1px solid #ccc;
         border-collapse:collapse;
         cursor:default;
      }
      table td,
      table th{
         padding:2px;
         font-weight:normal;
      }
      table thead td, table thead th {
         background-image:url(${url.context}/images/dojo/ft-head.gif);
         background-repeat:no-repeat;
         background-position:top right;
      }
      table thead td.selectedUp, table thead th.selectedUp {
         background-image:url(${url.context}/images/dojo/ft-headup.gif);
      }
      table thead td.selectedDown, table thead th.selectedDown {
         background-image:url(${url.context}/images/dojo/ft-headdown.gif);
      }
      table tbody tr td{
         border-bottom:1px solid #ddd;
      }
      table tbody tr.alt td{
         background: #e3edfa;
      }
      table tbody tr.selected td{
         background: yellow;
      }
      table tbody tr:hover td{
         background: #a6c2e7;
      }
      table tbody tr.selected:hover td{
         background:#ff9;
      }
      #inputArea{
         margin:1em 0;
         padding:1em;
         background-color:#eef;
      }
      #updateTestInput{
         border:1px solid #ccc;
         width:100%;
         height:80px;
         font-family:serif;
         font-size:0.9em;
         overflow:auto;
      }
      .bar a img {
         border:0;
         vertical-align: middle;
      }
      .dojoDialog {
         background : #eee;
         border : 1px solid #999;
         -moz-border-radius : 5px;
         padding : 4px;
         width: 80%
      }
                .bleu {
                        color: #0000FF;
                }
               H1 {
                        color:#3300FF;
                        font-family:Lucida Grande, Verdana;
                   font-size: 8pt ;
                }
               a.lien {
                        color:#3300FF;
                }
               a.lien:hover {
                        color:#3366FF;
               }
               a.lien:visited {
                        color:#3300FF;
                }

   </style>

</head>

<body>
        <H1>Utilisateur : ${person.properties.firstName} ${person.properties.lastName}</H1>
     <H1>Espace Courant : ${folder.displayPath}/${folder.name}</H1>
        <br>

   <#if folder.parent.parent?exists>
   <H1><a href="${url.serviceContext}/sample/pack1<@encodepath node=folder.parent/>" class="lien">Remonter d'un niveau</a></H1>
   <br>
   </#if>



<table dojoType="filteringTable" id="documentList" alternateRows="true" maxSortable="2" cellpadding="0" cellspacing="0" border="0">
    <thead>
        <tr>
            <th field="Type" dataType="String" align="left" valign="top">Type</th>
            <th field="Nom" dataType="String" sort="asc" align="left" valign="top">Nom</th>
            <th field="DateDiffusion" dataType="DateTime" valign="top">Date Diffusion</th>   
        </tr>
    </thead>

    <tbody>
        <#list folder.children as child>
            <tr value="${child_index + 1}">
                <#if child.isContainer> 
                    <!– Affichage Espace –>
                    <td><div id="name_${child_index + 1}">
                    <a href="${url.serviceContext}/sample/pack1<@encodepath node=child/>"><img src="/alfresco${child.icon32}" border=0></a></div></td> 
                    <td><div id="name_${child_index + 1}">${child.name}</div></td>
                    <td> </td>
                <#else>
                    <!– Affichage Contenu –> 
                    <td><div id="name_${child_index + 1}">
                    <a href="/alfresco${child.url}" target="new"><img src="/alfresco${child.icon32}" border=0></a></div></td>
                    <td><span class="bleu"><div id="name_${child_index + 1}">${child.name}</div></span></td>
                    <#if child.properties["SQ:dateDiffusion"]?exists>
                        <td>${child.properties["SQ:dateDiffusion"]?date}</td>
                    <#else>
                        <td> </td>
                    </#if>
                </#if>
            </tr>  
        </#list>
    </tbody>
</table>

<br>
<H1><a href="mailto:admin.alfresco@moi.com?subject=Anomalie">Reporter une anomalie</a></H1>

</body>
</html>
<#macro encodepath node><#if node.parent?exists><@encodepath node=node.parent/>/${node.name?url}</#if></#macro>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Petite précision, j'utilise une zone 'Date diffusion' qui est une méta-donnée des documents

Merci de votre aide

Cordialement

Fred

rguinot · ‎22 Feb 2010

Ca me semble possible en triant votre resultset freemarker via le mot clé freemarker sort_by.
voir http://freemarker.org/docs/ref_builtins_sequence.html#ref_builtin_sort_by

Vous pouvez trier sur la property name avec quelque chose de ce genre :

<#list folder.children?sort_by(["properties","name"]) as child>‍

Pour l'avoir en sens inverse :

<#list folder.children?sort_by(["properties","name"])?reverse as child>‍

Pour avoir un tri en sens inverse paramètrable sur une property passée en paramètre GET avec un fallback sur modified si ce paramètre est absent:

<#list folder.children?sort_by(["properties", args["sort_by"]!"modified"])?reverse as child>‍

A vos crayons!

fred_pack · ‎22 Feb 2010

Merci !!! , depuis le temps que je tournais en rond :lol:

Ci-dessous le code modifié qui fonctionne


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Gestion Documentaire</title>
   <script type="text/javascript">
      var djConfig = {
         isDebug: true
         ,debugAtAllCosts: true
      };
   </script>

<script type="text/javascript">
function sortTable (tb, n) {
   var iter = 0;
   while (!tb.tagName || tb.tagName.toLowerCase() != "table") {
      if (!tb.parentNode) return;
      tb = tb.parentNode;
      }
   if (tb.tBodies && tb.tBodies[0]) tb = tb.tBodies[0];
   var reg = /^\d+(\.\d+)?$/g;
   var index = 0, value = null, minvalue = null;
   for (var i= tb.rows.length -1; i >= 0; i -= 1) {
      minvalue = value = null;
      index = -1;
      for (var j=i; j >= 0; j -= 1) {
         value = tb.rows[j].cells[n].firstChild.nodeValue;
         if (!isNaN(value)) value = parseFloat(value);
               if (minvalue == null || value < minvalue) { index = j; minvalue = value; }
         }
      if (index != -1) {
         var row = tb.rows[index];
         if (row) {
            tb.removeChild(row);
            tb.appendChild(row);
            }
         }
                }   
       }
</script>

   <style type="text/css">
      /*** CSS ***/
      table {
         font-family:Lucida Grande, Verdana;
         font-size:0.8em;
         width:100%;
         border:1px solid #ccc;
         border-collapse:collapse;
         cursor:default;
      }
      table td,
      table th{
         padding:2px;
         font-weight:normal;
      }
      table thead td, table thead th {
         background-image:url(${url.context}/images/dojo/ft-head.gif);
         background-repeat:no-repeat;
         background-position:top right;
      }
      table thead td.selectedUp, table thead th.selectedUp {
         background-image:url(${url.context}/images/dojo/ft-headup.gif);
      }
      table thead td.selectedDown, table thead th.selectedDown {
         background-image:url(${url.context}/images/dojo/ft-headdown.gif);
      }
      table tbody tr td{
         border-bottom:1px solid #ddd;
      }
      table tbody tr.alt td{
         background: #e3edfa;
      }
      table tbody tr.selected td{
         background: yellow;
      }
      table tbody tr:hover td{
         background: #a6c2e7;
      }
      table tbody tr.selected:hover td{
         background:#ff9;
      }
      #inputArea{
         margin:1em 0;
         padding:1em;
         background-color:#eef;
      }
      #updateTestInput{
         border:1px solid #ccc;
         width:100%;
         height:80px;
         font-family:serif;
         font-size:0.9em;
         overflow:auto;
      }
      .bar a img {
         border:0;
         vertical-align: middle;
      }
      .dojoDialog {
         background : #eee;
         border : 1px solid #999;
         -moz-border-radius : 5px;
         padding : 4px;
         width: 80%
      }
                .bleu {
                        color: #0000FF;
                }
               H1 {
                        color:#3300FF;
                        font-family:Lucida Grande, Verdana;
                   font-size: 8pt ;
                }
               a.lien {
                        color:#3300FF;
                }
               a.lien:hover {
                        color:#3366FF;
               }
               a.lien:visited {
                        color:#3300FF;
                }

   </style>

</head>

<body>
        <H1>Utilisateur : ${person.properties.firstName} ${person.properties.lastName}</H1>
     <H1>Espace Courant : ${folder.displayPath}/${folder.name}</H1>
        <br>

   <#if folder.parent.parent?exists>
   <H1><a href="${url.serviceContext}/sample/pack1<@encodepath node=folder.parent/>" class="lien">Remonter d'un niveau</a></H1>
   <br>
   </#if>

<table dojoType="filteringTable" id="documentList" valueField="Nom" alternateRows="true" maxSortable="1" cellpadding="0" cellspacing="0" border="0">
    <thead>
        <tr>
            <th field="Type" dataType="String" align="left" valign="top">Type</th>
            <th field="Nom" dataType="String" align="left" valign="top"><a href="#" onclick="sortTable(this,1); return false;">Nom</a></th>
            <th field="DateDiffusion" dataType="DateTime" valign="top">Date Diffusion</th>   
        </tr>
    </thead>

    <tbody>
    <#list folder.children?sort_by(["properties","name"]) as child>
            <tr value="${child_index + 1}">
                <#if child.isContainer> 
                    <!– Affichage Espace –>
                    <td><div id="name_${child_index + 1}">
                    <a href="${url.serviceContext}/sample/pack1<@encodepath node=child/>"><img src="/alfresco${child.icon32}" border=0></a></div></td> 
                    <td><div id="name_${child_index + 1}">${child.name}</div></td>
                    <td> </td>
                <#else>
                    <!– Affichage Contenu –> 
                    <td><div id="name_${child_index + 1}">
                    <a href="/alfresco${child.url}" target="new"><img src="/alfresco${child.icon32}" border=0></a></div></td>
                    <td><span class="bleu"><div id="name_${child_index + 1}">${child.name}</div></span></td>
                    <#if child.properties["SQ:dateDiffusion"]?exists>
                        <td>${child.properties["SQ:dateDiffusion"]?date}</td>
                    <#else>
                        <td> </td>
                    </#if>
                </#if>
            </tr>  
        </#list>
    </tbody>
</table>

<br>
<H1><a href="mailto:admin.alfresco@moi.com?subject=Anomalie">Reporter une anomalie</a></H1>

</body>
</html>
<#macro encodepath node><#if node.parent?exists><@encodepath node=node.parent/>/${node.name?url}</#if></#macro>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Cordialement

Fred.