Динамический контент в 2 столбца (а не в один!) - PullRequest
Новая
       8

Динамический контент в 2 столбца (а не в один!)

1 голос
/ 24 декабря 2009

У меня есть одна таблица, которая отображает данные из динамического содержимого в 1 столбце. Я хотел бы, чтобы содержимое переместилось во второй столбец, когда число ячеек> 3. (т. е. если есть 3 ячейки для отображения, это будет отображаться в 1 столбце, а 4 или более ячеек будет отображаться в 2 столбцах. Обратите внимание, что динамическое содержимое никогда не превысит 6 ячеек.

Я должен сказать, что могу найти свой путь с помощью css и html, но javascript - это еще одна проблема ... однако я понимаю, что это может быть единственный путь.

Какой-нибудь Javascript, jQuery-скрипт доступен для получения моего результата?

Данные будут отображаться так: 

| Col1  |          | Col1  || Col2  |
---------          -----------------
| Data1 |   ---->  | Data1 || Data4 |
| Data2 |          | Data2 | etc...
| Data3 |          | Data3 |

Не уверен, поможет ли это, но код, вызывающий динамический контент (и помещающий его в таблицу): 

<table id="myTable">
                  <?php
     $str1="";
     $flag1=1;
     while($rowReview1=mysql_fetch_array($resultReview1)){
      $st1="";
      $val=$rowReview1["ratingValue"];
      $sName=$rowReview1["criteriaName"];

      if($val>0){

       for($ii=1;$ii<=$val;$ii++){
        $st1.="<img src=\"$directory/images/orange.gif\" \>";
       }

       for($jj=$val;$jj<5;$jj++){
        $st1.="<img src=\"$directory/images/gray.gif\" \>";
       }
      }else{
       $st1="";
      }

      if($val > 0){
       $str1.="<tr><td>$sName</td><td>$st1</td></tr>";
      }else{
       $str1.="<tr><td>$sName</td><td>N/A</td></tr>";
      }
     }
     echo $str1;
    ?>
                </table>

Теперь страницу можно увидеть здесь: http://www.top10banques.com/avis/index2.php?item_id=1 Таблицы, которые я пытаюсь отредактировать, - это таблицы, расположенные ниже разрыва страницы "Оценка клиентов".

Еще раз спасибо за любую помощь, которую вы можете предоставить, и счастливых праздников всем!

Ответы [ 4 ]

1 голос
/ 24 декабря 2009

Предполагая, что вы используете стандартную структуру таблиц, сначала я бы поместил все ваши данные в один столбец, независимо от их количества. Тогда я бы переместил их динамически:

EDIT Вот рабочий пример того, что вы пытаетесь сделать. Проблема заключалась в том, что у вас было две ячейки в строке, я думал, что у вас есть только одна: 

<html>
<head>
   <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
   </script>
</head>
<body>
    <script type="text/javascript">
      $(function(){
 var allRows = $('#myTable tr');
if(allRows.length > 3) {
   var extraData = $('#myTable tr:gt(2) td')
   var j = 0;       
   for (i=0;i<extraData.length/2;i++) { 
       $(allRows[i]).append(extraData[j])
       $(allRows[i]).append(extraData[j+1])
       j=j+2;
   }
   $('#myTable tr:gt(2)').remove();
}
});
</script>

<table id="myTable">
<tr><td>Data1</td><td>Data11</td></tr>
<tr><td>Data2</td><td>Data21</td></tr>
<tr><td>Data3</td><td>Data31</td></tr>
<tr><td>Data4</td><td>Data41</td></tr>
<tr><td>Data5</td><td>Data51</td></tr>
<tr><td>Data6</td><td>Data61</td></tr>
</table>

</body>
</html>

ПРИМЕЧАНИЕ вышеуказанное решение будет работать только в соответствии с вашими точными спецификациями . Если вы хотите, чтобы это можно было повторно использовать (т. Е. Занимать любое количество строк с любым количеством ячеек), вам, возможно, придется внести некоторые дополнительные изменения.

ОБНОВЛЕНИЕ РАБОТЫ ДЛЯ НЕСКОЛЬКИХ СТОЛОВ

Смотрите код, который я разместил здесь на Pastie: http://pastie.org/755963

Обратите внимание, что на таблицы теперь ссылаются классы вместо ids . Кроме того, я хочу сказать, что я согласен с тем, что это решение может (и, возможно, должно быть) обработано на стороне сервера, я просто отвечаю на вопрос, когда ОП спросил ...

0 голосов
/ 24 декабря 2009

Эта проблема требует решения на сервере и повышения производительности страницы за счет исключения сценария JavaScript.

Во-вторых, вы можете упростить жизнь, не используя таблицы, а используя div.

Давайте сначала посмотрим на предложенную структуру данных. Мы будем хранить весь вывод в массиве, так как вы используете PHP. 

$data=array[0...n];

Это просто сортирует генерацию бизнес-логики.

Теперь давайте посмотрим на логику представления, сначала визуально предложенные div!

$ data_length = m 

    j=0   j=1   j=2   j=3   .....   j= x

i=0 [1]    [4]    [7]    [10]       []

i=1 [2]    [5]    [8]    [11]       []

i=2 [3]    [6]    [9]    [12]       []

 y   []     []    []     []         []

Все div будут перемещены влево. Очищающий div будет напечатан после завершения строки.

Теперь нам нужно определить отношения наших данных с позицией. Небольшое наблюдение за таблицей показывает, что все горизонтальные позиционные значения разделены на 3, а все вертикальные - на единицу (т. Е. Нам нужно перебирать наш массив $ data с шагом в три!), Эффективно обрабатывая наши div следующим образом: 

j=0   j=1   j=2   j=3   .....   j= x

i=0 [1]    [4]    [7]    [10]   []

Псевдоалгоритм 

 $imax=2;                     // spec
 $number_cells = m/imax       // total number of cells
 $jmax=$number_cells/3        // check rounding etc left out at this stage
                              // you can use mod % to see if there are 
                              // remainders etc.. on second script iteration

А теперь для итерации 

 for ($i=0;$i<$imax-1;$i++){
     for ($j=0;$j<$jmax;$j++){
        $out.=wrap_in_div($data[($j*3)+(i+1)]);
     }
 }

Обратите внимание, что я не удосужился определить макет функции wrap_in_div как тривиальный.

Надеюсь, это поможет с Рождеством! Программа была у меня в голове, поэтому, пожалуйста, переведите псевдокод в реальные $! :)

0 голосов
/ 24 декабря 2009

Я бы подумал, что это будет просто с использованием CSS (но я не эксперт по CSS).

Примерно так имеет дело с более общим случаем в PHP: 

   function multi_columns($inp_array)
   {
    $max_cols=4;
    $target_rows=3;

    if (count($dyn)>$max_cols*$target_rows) {
      // won't fit in this number of cols/rows
      // add more rows
      $rows=count($dyn)/$max_cols;
      $target_rows= ($rows==(integer)$rows) ? $rows : $rows+1;
    } elseif (count($dyn)>$max_cols*$target_rows) {
      // reduce to number of cols needed
      $cols=count($dyn)/$target_rows;
      $max_cols= ($cols==(integer)$cols) ? $cols : $max_cols;
    }

    print "<table>\n";
    for ($y=1; $y<=$target_rows; $y++) {
       print "<tr>\n";
       for ($x=1; $x<=$max_cols; $x++) {
            print "<td>";
            if (array_key_exists($y+$x*$target_rows, $inp_array)) {
               print $inp_array[$y+$x*$target_rows];
            }
            print "</td>";
       }
       print "</tr>\n";
    }
    print "</table>\n";
   }
0 голосов
/ 24 декабря 2009

Я бы, вероятно, построил бы объект JSON с этими данными в PHP, а не вставлял бы его в DOM сначала. Таким образом, у вас нет накладных расходов на реструктуризацию javascript существующих данных в DOM, он просто размещает их с нуля.

...