如何將Bootstrap行和Coloumns存儲在數據庫中

我已經在HTML和引導中實現了一個網格系統。這些網格包含面板，它們攜帶各種信息。我使用jQuery和一些自定義java腳本和引導程序使這些面板可移動（拖放）。如何將Bootstrap行和Coloumns存儲在數據庫中

我需要存儲每個並退出在會議結束後的每個項目（註銷）的位置

這裏是我的代碼

<div class="container sortable"> 
     <div class="row"><!-- BEGIN ROW -->    
     <div class="col-md-4 placeholder-wrapper"> 
      <div class="panel panel-default" id="portlet-linear-color"> 
       <div class="panel-heading"> 
        <div class="panel-title"> 
         Portlet 1 
        </div> 
        <div class="panel-controls"> 
         <ul> 
          <li> 
           <a class= 
           "portlet-collapse portlet-icon portlet-icon-collapse" 
           data-toggle="collapse" href="#" style= 
           "font-style: italic"></a> 
          </li> 
          <li> 
           <a class= 
           "portlet-refresh portlet-icon portlet-icon-refresh" 
           data-toggle="refresh" href="#" style= 
           "font-style: italic"></a> 
          </li> 
          <li> 
           <a class= 
           "portlet-close portlet-icon portlet-icon-close" 
           data-toggle="close" href="#" style= 
           "font-style: italic"></a> 
          </li> 
         </ul> 
        </div> 
       </div> 
       <div class="panel-body"> 
        <h3><span class="semi-bold">Linear</span> Progress</h3> 
        <p>Click on the refresh icon to simulate an AJAX call and to see an 
        animated progress bar indicator above the portlet. These progress 
        bars come in seven different colors that are available in the Pages 
        contextual color scheme.</p> 
       </div> 
      </div> 

     </div> 
     <div class="col-md-4 placeholder-wrapper"> 
      <div class="panel panel-default" id="portlet-linear-color"> 
       <div class="panel-heading"> 
        <div class="panel-title"> 
         Portlet 2 
        </div> 
        <div class="panel-controls"> 
         <ul> 
          <li> 
           <a class= 
           "portlet-collapse portlet-icon portlet-icon-collapse" 
           data-toggle="collapse" href="#" style= 
           "font-style: italic"></a> 
          </li> 
          <li> 
           <a class= 
           "portlet-refresh portlet-icon portlet-icon-refresh" 
           data-toggle="refresh" href="#" style= 
           "font-style: italic"></a> 
          </li> 
          <li> 
           <a class= 
           "portlet-close portlet-icon portlet-icon-close" 
           data-toggle="close" href="#" style= 
           "font-style: italic"></a> 
          </li> 
         </ul> 
        </div> 
       </div> 
       <div class="panel-body"> 
        <h3><span class="semi-bold">Linear</span> Progress</h3> 
        <p>Click on the refresh icon to simulate an AJAX call and to see an 
        animated progress bar indicator above the portlet. These progress 
        bars come in seven different colors that are available in the Pages 
        contextual color scheme.</p> 
       </div> 
      </div> 

     </div> 
     <div class="col-md-4 placeholder-wrapper"> 
      <div class="panel panel-default" id="portlet-linear-color"> 
       <div class="panel-heading"> 
        <div class="panel-title"> 
         Portlet 3 
        </div> 
        <div class="panel-controls"> 
         <ul> 
          <li> 
           <a class= 
           "portlet-collapse portlet-icon portlet-icon-collapse" 
           data-toggle="collapse" href="#" style= 
           "font-style: italic"></a> 
          </li> 
          <li> 
           <a class= 
           "portlet-refresh portlet-icon portlet-icon-refresh" 
           data-toggle="refresh" href="#" style= 
           "font-style: italic"></a> 
          </li> 
          <li> 
           <a class= 
           "portlet-close portlet-icon portlet-icon-close" 
           data-toggle="close" href="#" style= 
           "font-style: italic"></a> 
          </li> 
         </ul> 
        </div> 
       </div> 
       <div class="panel-body"> 
        <h3><span class="semi-bold">Linear</span> Progress</h3> 
        <p>Click on the refresh icon to simulate an AJAX call and to see an 
        animated progress bar indicator above the portlet. These progress 
        bars come in seven different colors that are available in the Pages 
        contextual color scheme.</p> 
       </div> 
      </div> 

     </div> 

     </div><!-- END ROW -->  
     <div class="row"><!-- BEGIN ROW 1 --> 
      <div class="col-md-4 placeholder-wrapper"><!-- BEGIN WRAPPER --> 
       <div class="panel panel-default" id="portlet-linear-color"><!-- BEGIN PANEL --> 
        <div class="panel-heading"><!-- BEGIN HEADER --> 
         <div class="panel-title"> 
          Portlet 4 
         </div> 
          <div class="panel-controls"><!-- BEGIN ICONS --> 
           <ul> 
            <li> 
             <a class= 
             "portlet-collapse portlet-icon portlet-icon-collapse" 
             data-toggle="collapse" href="#" style= 
             "font-style: italic"></a> 
            </li> 
            <li> 
             <a class= 
             "portlet-refresh portlet-icon portlet-icon-refresh" 
             data-toggle="refresh" href="#" style= 
             "font-style: italic"></a> 
            </li> 
            <li> 
             <a class= 
             "portlet-close portlet-icon portlet-icon-close" 
             data-toggle="close" href="#" style= 
             "font-style: italic"></a> 
            </li> 
           </ul> 
          </div><!-- END ICONS --> 
        </div><!-- END HEADER --> 
       <div class="panel-body"><!-- BEGIN PANEL CONTENT --> 
        <h3><span class="semi-bold">Linear</span> Progress</h3> 
        <p>Click on the refresh icon to simulate an AJAX call and to see an 
        animated progress bar indicator above the portlet. These progress 
        bars come in seven different colors that are available in the Pages 
        contextual color scheme.</p> 
       </div><!-- END PANEL CONTENT --> 
      </div><!-- END PANEL --> 

     </div><!-- END WRAPPER --> 
     </div><!-- END ROW 2 --> 
    </div>

有反正我可以在數據庫中保存這些情況？

來源

2015-10-19 ayyo

是的，使用AJAX發佈它們。 – MaggsWeb

如果你想獲得一個頁面的當前html使用JQuery。這將工作。

 <script> 
     var contentData = $('#divwithhtml').html(); 
     //If you want to post it 
     $.post("yoururl.php", { content: "contentData " }) 
     .done(function(data) { 
     alert("Data Loaded: " + data + " posted html succesfull"); 
     }); 
</script>

來源

2015-10-19 07:43:42

謝謝你的回答我試過你的方式和代碼作品你如何將它保存在數據庫像一個字符串或有任何其他格式？我將它保存爲一個字符串，但我如何將它作爲HTML元素和內容回顯出來？ – ayyo

如果你想獲得一個完整的html頁面，你可以使用.html（）如果你想存儲它，你可以使用html（）或.text（）。文本將獲得所有的html並將其轉換爲字符串。如果你想從數據庫中回顯或顯示它，只需要echo $ yourhtml; –

我認爲你可以在數據庫中保存基礎佈局。然後每個客戶端重新定位每個站點項目，然後您應該通過ajax爲clientId保存數據庫中的位置。

後期編輯：

這很簡單，你可以重複這樣的字符串代碼：

select `columnName` from `database` where `clientId`=20

當取這個返回查詢並保存到$行，你可以試試這個：

echo $row["columnName"];

或

$ret="<!DOCTYPE html> 
<html> 
    <head> 
     <title>site name</title> 
    </head> 
    <body> 
     {$row["columnName"]} 
    </body> 
</html>"; 

echo $ret;

來源

2015-10-19 07:49:17 farzad

如何將它像字符串一樣保存在數據庫中或者是否有其他格式？我將它保存爲一個字符串，但我如何將它作爲HTML元素和內容回顯出來？ – ayyo

@ayyo請看我編輯的帖子 – farzad

如何將Bootstrap行和Coloumns存儲在數據庫中

回答

相關問題