grid manager

migthy84 · 25 jul 2011

Beste Helpmijers
Weet iemand voor een goede grid manager die kan gebruiken:

Probleem shets. Op dit moment toon ik een tabel georderd met data uit de database. Het orderd op mij manier. Nu wil ik er voorzorgen dat een gebruiker per column aan kan soorteren, dus niet meer afhankelijk is voorgezetten datum.

Deze functie die een algemene functie te worden zodat ik elke data die er instop met op de zelfde manier aan de eindgebruiker word getoond.

Het liefst zou ik een functie hebben er ongeveer zo uit ziet.

create gridt(hoogte,breedte,data,sorteerColom,layoutArr =null, asc="y")

hoogte = maximale hoogte van de tabel/ gridt
breedte = maximale breedt van de tabel
// beide mogen in px; of % berekent worden.

data hier in de data ongesoorteerd (multi -> association array)
soteerColomom = colom waarop gesorteerd word. (staandaard eerste key van de data )
layoutArr = om handig de breedte van elke colom te bepalen, anders heeft elke column de zelfde breedte -- hierdient wele elke column in gespecialiceerd te worden.

Het liefst wil ik dit client side regelen bijvoorbeeld door javascript of ajax te gebruiken zodat de data maar 1keer op gehaald dient te worden. Op dit moment haal ik bij elke soortering op via $_GET['sort']; en deze te plaatsen bij order bij

rajmv · 25 jul 2011

Ja dat kan prima zoals je zelf voorstelt.

Ik zou de SQL data als JSON laten uitspuwen door PHP, die data door de volgende HTML + JS code laten bewerken:

Code:

<html>
<head>
 <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
 <script type="text/javascript"><!--
  var allData = null;
  var sortField = null;
  function startApp() {
     var ajaxCommand = {
       type : 'get',
       url : '/path/to/sql-to-php-script.php',
       success : function (data,ts) {

/*
data = [
  {
     "sortableColumn" : "a",
     "sortableColumn2" : 200,
     "dataColumn" : "wanted data",          // deze veld namen zijn arbitrair, je kan op elke veldnaam sorteren, string/nummer, kan allemaal
  },
  {
     "sortableColumn" : "b",
     "sortableColumn2" : 100,
     "dataColumn" : "wanted data B"
  },
  { ...repeat weer zo'n blok.... GEEN "," na het laatste blok!... }
];
*/
          if (typeof data=='string') {
            allData = eval('('+data+')');
          } else if (typeof data=='object') {
             allData = data;
          };
          sortAndPrintTable ('sortableColumn');
       }
     };
     jQuery.ajax(ajaxCommand);
  };

  function sortAndPrintTable (field) {
      sortField = field;
      var sortedData = allData.sort(sortFunction);   

      printTable (sortedData);
  };

  function sortFunction (a,b) {
    return a[sortField] > b[sortField];
  };

  function printTable (sortedData) {
     html = '<table>';
     html += '<tr>';
     html += '<th onclick="sortAndPrintTable('sortableColumn');">sortableColumn</th>';
     html += '<th onclick="sortAndPrintTable('sortableColumn2');">sortableColumn2</th>';
     html += '<th onclick="sortAndPrintTable('dataColumn');">dataColumn</th>';
     html += '</tr>';
     for (var i=0; i<sortedData.length; i++) {
       html += printItem (sortedData[i]);
     };
     html += '</table>';
     document.getElementById('contentTable').innerHTML = html;
  };

  function printItem (item) {
    html = '<tr>';
    html += '<td>' + item.sortableColumn + '</td>';
    html += '<td>' + item.sortableColumn2 + '</td>';
    html += '<td>' + item.dataColumn + '</td>';
    html += '</tr>';
    return html;
  };
 --></script>
</head>
<body onload="startApp();">
  <div id="contentTable"> </div>
</body>
</html>

jQuery (nodig voor ajax) kan je op http://jquery.com gratis ophalen

grid manager

migthy84

Gebruiker

rajmv

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy