2014-09-13 74 views
0

我在我的網站上有一個表單,用戶可以使用該表單按選定的列排序數據表。本質上,它是與此類似:通過點擊表標題進行排序

<form action="" method="post"> 
    <select name="orderby"> 
     <option value="col_1">Column 1</option> 
     <option value="col_2">Column 2</option> 
     <option value="col_3">Column 3</option> 
    </select> 
    <input type="submit" value="Order By"/> 
</form> 

它運作良好,但我想更新這是如何通過允許用戶在表列標題單擊代替完成。我嘗試這樣做的方式是將onclick事件添加到我的表格標題中,並使用javascript將相同的數組發回頁面。換句話說,當列2被點擊時,Array([orderby] => col_2)將保持完全相同。這將保留我所有的其他代碼。下面是我對錶頭進行了更改:

<table> 
    <tr> 
    <th onclick="post('col_1')">Column 1</th> 
    <th onclick="post('col_2')">Column 2</th> 
    <th onclick="post('col_3')">Column 3</th> 
    </tr> 
    <tr> 
    <td>A</td> 
    <td>B</td> 
    <td>C</td> 
    </tr> 
    <tr> 
    <td>B</td> 
    <td>C</td> 
    <td>A</td> 
    </tr> 
</table> 

,這裏是我寫的JavaScript:

<script> 
function post(clm) { 
    $.post('mypage.php',{orderby:clm}); 
} 
</script> 

這是行不通的。任何人都可以告訴我需要改變以使其起作用嗎?現在,如果我點擊表頭,$ _POST數組仍然是空的。 (mypage.php是調用該函數的同一頁面,我也在單引號之間嘗試了它,就像使用form action屬性一樣,但它也沒有以這種方式工作)。謝謝。

+0

你做一個新的呼叫mypage.php - 這將不會影響呈現一個你必須在屏幕上。要麼顯示返回的ajax數據,要麼代替ajax提交實際的表單,這會導致頁面刷新 – Steve 2014-09-13 14:23:39

+0

好點。從我所見過的AJAX來看,提交數據片段並不需要重新加載整個頁面。但是,我需要整個頁面重新加載。有一個簡單的行或兩個AJAX將做到這一點? – user3865463 2014-09-13 14:37:32

+0

Ajax將要求你重新編寫你的php,當通過ajax請求時輸出表格數據,我建議一個更簡單的解決方案 - 你是否也有頁面上的下拉表單,或者你是否刪除了? – Steve 2014-09-13 14:40:44

回答

1

這就是我的解決方案。我將表單嵌入到每個表頭列中。該表單包含隱藏的輸入和我希望包含在$ _POST數組中的信息。在我用於我的文章的簡化示例中,它只是名稱=「orderby」和值=「列名稱」。在th標籤中,我保留了onclick事件,並讓它調用一個javascript函數,允許我傳遞表單名稱。 javascript函數提交表單,該表單將$ _POST數組傳遞迴頁面,以便執行所有我擔心的php代碼。數組([orderby] => col_3)用於更新我的SQL查詢中的ORDER BY屬性,以便將正確的數據返回給頁​​面。

HTML:

<table> 
    <tr> 
    <th onclick="submitform('postdata1')"> 
     Column 1 
     <form action="" name="postdata1" method="post"> 
      <input type="hidden" name="orderby" value="col_1"/> 
     </form> 
    </th> 
    <th onclick="submitform('postdata2')"> 
     Column 2 
     <form action="" name="postdata2" method="post"> 
      <input type="hidden" name="orderby" value="col_2"/> 
     </form> 
    </th> 
    <th onclick="submitform('postdata3')"> 
     Column 3 
     <form action="" name="postdata3" method="post"> 
      <input type="hidden" name="orderby" value="col_3"/> 
     </form> 
    </th> 
    </tr> 
    <tr> 
    <td>A</td> 
    <td>B</td> 
    <td>C</td> 
    </tr> 
    <tr> 
    <td>B</td> 
    <td>C</td> 
    <td>A</td> 
    </tr> 
</table> 

這裏是JavaScript函數:

<script> 
function submitform(formname) { 
    document[formname].submit(); 
} 
</script> 
+0

抱歉,對於遲到的回覆,這與我將要建議的類似,唯一的區別是我會使用一種形式,並在提交之前使用JavaScript設置'orderby'值 - 這兩種方式都沒有優勢,結果是一樣的。 +1。另外,你應該接受你自己的答案 – Steve 2014-09-14 20:31:32

-1

嘗試jqGrid.it很容易通過單擊標題來重新排列列。

0
<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <script src="https://raw.github.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     var st; 



     $(window).load(function(){ 
     var table = $('table'); 

     $('#col1, #col2, #col3')    //all ID, za each 
      .wrapInner('<span title="sort this column"/>') 
      .each(function(){ 

         var th = $(this), 
          thIndex = th.index(), 
          inverse = false; 

        th.click(function(){      //on click on any TH DOM object 
         table.find('td').filter(function(){ 

           return $(this).index() === thIndex;  //index of clicked element 

         }).sortElements(function(a, b){    //function sortElements.js 

           return $.text([a]) > $.text([b]) ? 
            inverse ? -1 : 1 
            : inverse ? 1 : -1; 

         }, function(){ 

           return this.parentNode; 

         }); 

         inverse = !inverse; 

        }); 

      }); 
     }); 
    </script> 
</head> 

<body> 
    <table id="tabela"> 
     <thead> 
     <tr> 
      <th id="col1"><b>Column 1</b></th> 
      <th id="col2"><b>Column 2</b></th> 
      <th id="col3"><b>Column 3</b></th> 
     </tr> 
     <tr> 
      <td>aaa</td> 
      <td>bbb</td> 
      <td>ccc</td> 
     </tr> 
     <tr> 
      <td>ddd</td> 
      <td>eee</td> 
      <td>fff</td> 
     </tr> 
     <tr> 
      <td>ggg</td> 
      <td>hhh</td> 
      <td>iii</td> 
     </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 
</body> 

</html> 

這是一個工作示例,希望它有幫助。每次用戶單擊表格標題時,都不必提出請求。

好的問候,RokJambrošič

+0

感謝您的建議。我希望不必重寫所有的php,因爲php代碼中有很多邏輯沒有在我提供的簡化示例中表示。最終,我想要做的就是允許用戶點擊,並使用包含我定義的一串sel:val對的新數據的$ _POST數組刷新頁面。 – user3865463 2014-09-13 22:37:51

相關問題