Разделение DIV на ряд и колон в таблице - PullRequest
0 голосов
/ 19 января 2020

Работаю всю ночь, решая проблему. То, что я пытаюсь достичь, это таблица времени: enter image description here

И, чтобы быть точным, я не могу найти решение для строки 5,6,7 в первом столбце. Это изображение из программы, работающей в IE с Silverline, и оно работает только в IE.

То, что я уже пробовал, использовало 'colspan', я пробовал с горизонтальными таблицами. Я полностью покинул стол и использовал только bootstrap столбцов, и я попробовал комбинацию обоих.

Лучшее решение, которое я смог найти, - это комбинация DIV внутри TD.

Что у меня есть пока что оба DIV находятся рядом, если они начинаются в одно и то же время запуска. Если нет, то оба элемента разлиты в 2 TD. enter image description here enter image description here

В конце каждый элемент должен быть перетаскиваемым, чтобы попасть в другое время в таблице. И база данных будет обновлена.

Мой код PHP / HTML / CSS с bootstrap 4 фрагментами кода: Функция генерирования TABLE:

public function GuiXeduleWeekList($p_aSubArray) {    
    // ==================== Mainview classroom content =================  
    echo("<table border='1' class='table' width='100%' style='background-color:white'>"); // Create a new table
    echo("<tr><th class='text-center'>RE</th>");        
    foreach($_SESSION['aWeekdays'] as $sDay){                            
        echo("<th class='text-center'>".$sDay."</th>");// Table header                                                                            
    }
    echo("</tr>");
    for($iWeekHour = 1; $iWeekHour <= 17; $iWeekHour++){                        
        $aThisHour = $this->arraySearch($p_aSubArray, 6, $iWeekHour);
        echo("<tr>");
        echo("<th>".$iWeekHour." ".$_SESSION['aREUnits'][$iWeekHour-1]."</th>");            
        for($iDayOfTheWeek = 1;$iDayOfTheWeek<=5;$iDayOfTheWeek++){                                                            
            $aCellContent = $this->arraySearch($aThisHour, 5, $iDayOfTheWeek);                
            if(!empty($aCellContent)){
                $this->cellContent($aCellContent); 
                for($iXeduleHour = $aCellContent[0][6];$iXeduleHour <= $aCellContent[0][7];$iXeduleHour++){
                    $aContentManager[$iXeduleHour][$aCellContent[0][5]] = FALSE;
                }
            } elseif($aContentManager[$iWeekHour][$iDayOfTheWeek]) {
                echo("<td class='empty'><div id='drop_zone' ondragenter='drag_enter(event)' ondrop='drag_drop(event)' ondragover='return false' ondragleave='drag_leave(event)'></div></td>");
            }
        }                    
        echo("</tr>");
    }
    echo("</table>");                                           // End of table with schedule items            
}

Функция генерации содержимого:

// A function to show the actual xedule content in the cell of the table
// @Parameters: $aCellContent   type:array      scope:local     description: Filled with the content from the database
protected function cellContent($p_aCellContent){
    $iContentCount = count($p_aCellContent);
    if($iContentCount == 1){
        $iLessonLength = ($p_aCellContent[0][7] - $p_aCellContent[0][6])+1;
        $sLesson = $this->fetchLessonName($p_aCellContent[0][2]);
        $sClassname = $this->fetchClassName($p_aCellContent[0][4]);
        $sTeacher = $this->fetchTeacher($p_aCellContent[0][3]);
        $sClassroom = $this->fetchClassroom($p_aCellContent[0][1]);        
        echo("<td draggable='true' ondragstart='drag_start(event)' ondragend='drag_end(event)' class='filled back_blue' ");            
        echo("rowspan='".$iLessonLength."' ><form method='post'>");
        echo("<input type='hidden' name='iClass' value='".$p_aCellContent[0][4]."'>");
        echo("<input type='hidden' name='iTeacher' value='".$p_aCellContent[0][3]."'>");
        echo("<input type='hidden' name='iClassroom' value='".$p_aCellContent[0][1]."'>");
        echo($sLesson."<br>");
        echo("<input type='submit' value='".$sClassname."'><br>");
        echo("<input type='submit' value='".$sTeacher."'><br>");
        echo("<input type='submit' value='".$sClassroom."'></form></td>");        
    } else {
        $iFirstRE = 17;        
        $iLastRE = 1;
        foreach($p_aCellContent as $aCellContent){
            if($aCellContent[7] > $iLastRE){
                $iLastRE = $aCellContent[7];
            }
            if($aCellContent[6] < $iFirstRE){
                $iFirstRE = $aCellContent[6];
            }
        }
        $iCellLength = ($iLastRE - $iFirstRE)+1;
        echo("<td rowspan='".$iCellLength."' class='filled back_blue'><div class='container'>");
            foreach($p_aCellContent as $aCellContent){
                $sLesson = $this->fetchLessonName($aCellContent[2]);
                $sClassname = $this->fetchClassName($aCellContent[4]);
                $sTeacher = $this->fetchTeacher($aCellContent[3]);
                $sClassroom = $this->fetchClassroom($aCellContent[1]);
                echo("<div draggable='true' ondragstart='drag_start(event)' ondragend='drag_end(event)'>");
                    echo("<form method='post'>");
                    echo("<input type='hidden' name='iClass' value='".$aCellContent[4]."'>");
                    echo("<input type='hidden' name='iTeacher' value='".$aCellContent[3]."'>");
                    echo("<input type='hidden' name='iClassroom' value='".$aCellContent[1]."'>");
                    echo($sLesson."<br>");
                    echo("<input type='submit' value='".$sClassname."'><br>");
                    echo("<input type='submit' value='".$sTeacher."'><br>");
                    echo("<input type='submit' value='".$sClassroom."'></form>"); 
                    echo("<br style='clear: left;' />");
                echo("</div>");
            }
        echo("</div></td>");

    }
    return;
}

CSS

.container {
  display:      flex;
  padding:      0;
}
.container > div {
  border:       #cccccc solid 2px;    
  word-break:   break-all;
  float:        left;
  padding:      0;
  margin-right: 12px;
  margin-left:  -10px;
  margin-top:   -10px;
}

Кто там, чтобы помочь мне с моей проблемой? Большое спасибо заранее.

1 Ответ

1 голос
/ 19 января 2020

То, что я уже пробовал, использовал 'colspan', я пробовал с горизонтальными таблицами. Я полностью покинул стол и использовал только bootstrap столбцов и попробовал комбинацию обоих.

Я не уверен, знаете ли вы rowspan.

Это макет сложный и использование <table>, и заставить его работать для другого размещения блоков в будущем еще сложнее.

Альтернативы:

  • display: grid; (не работает в IE, но был создан для решения именно этой проблемы)
  • position: absolute; и JS logi c чтобы сохранить блок в нужных местах
  • Я полагаю, что некоторые библиотеки диаграммы Ганта JS смогут отображать эту таблицу
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...