如何在面板前後添加面板

報告設計器佈局包含Bootstrap 3面板。細節面板有Add group按鈕，它應該在其之前和之後添加新面板。如何在面板前後添加面板

這是使用jQuery前插和追加在onclick事件處理程序實現：

 var $this = $(this), 
      $parentpanel = $this.parents(".designer-panel").get(0); 
     $parentpanel.prepend('<div class="panel designer-panel">' + 
'<div class="panel-body designer-panel-body" style="height:1px">' + 
'</div>' + 
'<div class="bg-warning">' + 
'<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' + 
'</i> Group heade {0}: <span id="band{0}_expr" contenteditable="true">"group expression"</span>' + 
'</div></div></div>'); 

     $parentpanel.append('<div class="panel designer-panel">' + 
'<div class="panel-body designer-panel-body" style="height:1px">' + 
'</div>' + 
'<div class="bg-warning">' + 
'<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' + 
'</i> Group footer {0}' + 
'</div></div></div>'); 

    });

如果添加帶按鈕，點擊HTML出現，而不是面板。

它看起來像jquery preoend和追加不添加dom對象工作原因不明。

如何解決這個問題，使新面板出現在詳細面板之前和之後？

$(function() { 
 

 
      var startpos, 
 
      selected = $([]), 
 
      offset = { top: 0, left: 0 }; 
 

 
     
 
    $('#designer-detail-addband').on('click', function() { 
 
     var $this = $(this), 
 
$parentpanel = $this.parents(".designer-panel").get(0); 
 

 
     $parentpanel.prepend('<div class="panel designer-panel">' + 
 
'<div class="panel-body designer-panel-body" style="height:1px">' + 
 
'</div>' + 
 
'<div class="bg-warning">' + 
 
'<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' + 
 
'</i> Group heade {0}: <span id="band{0}_expr" contenteditable="true">"groupexpression"</span>' + 
 
'</div></div></div>'); 
 

 
     $parentpanel.append('<div class="panel designer-panel">' + 
 
'<div class="panel-body designer-panel-body" style="height:1px"></div>' + 
 
'<div class="bg-warning">' + 
 
'<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' + 
 
'</i> Group footer {0}' + 
 
'</div></div></div>'); 
 

 
    }); 
 

 
     
 
     
 
     
 
     
 
     
 
    $(".designer-panel-body").droppable({ 
 
     accept: ".designer-field" 
 
    }); 
 

 
    $(".designer-field").draggable({ 
 
      start: function (event, ui) { 
 
       var $this = $(this); 
 
       if ($this.hasClass("ui-selected")) { 
 
        selected = $(".ui-selected").each(function() { 
 
         var el = $(this); 
 
         el.data("offset", el.offset()); 
 
        }); 
 
       } else { 
 
        selected = $([]); 
 
        $(".designer-field").removeClass("ui-selected"); 
 
       } 
 
       offset = $this.offset(); 
 
      }, 
 

 
      drag: function (event, ui) { 
 
       // drag all selected elements simultaneously 
 
       var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left; 
 
       selected.not(this).each(function() { 
 
        var $this = $(this); 
 
        var elOffset = $this.data("offset"); 
 
        $this.css({ top: elOffset.top + dt, left: elOffset.left + dl }); 
 
       }); 
 
      } 
 
     }); 
 

 

 

 
     $(".panel-resizable").resizable({ 
 
      minWidth: "100%", 
 
      maxWidth: "100%", 
 
      minHeight: 1 
 
     }); 
 
     });

.panel-resizable { 
 
     min-height: 1px; 
 
     overflow: hidden; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 

 
    .designer-field { 
 
     border: 1px solid lightgray; 
 
     white-space: pre; 
 
     overflow: hidden; 
 
     position: absolute; 
 
    } 
 

 
    .designer-panel-body { 
 
     min-height: 1px; 
 
     overflow: hidden; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    .panel-footer { 
 
     padding: 0; 
 
    } 
 

 
    .designer-panel, .panel-body { 
 
     margin: 0; 
 
     padding: 0; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
    </head> 
 

 
    <body> 
 
     <div class='panel designer-panel'> 
 
     <div class='panel-body designer-panel-body panel-resizable' style='height:2cm'> 
 

 
      <div class='designer-field' style='left:5px;top:6px;width:180px'>field 1 in group 1 header</div> 
 

 
    <div class='designer-field' style='left:54px;top :36px;width:160px'>field 2 in group 1 header</div> 
 
     </div> 
 
     
 
     <div class='panel-footer'>Group 1 Header</div> 
 
     </div> 
 
      
 
    <div class='panel designer-panel'> 
 
     <div class='panel-body panel-resizable' style='height:1cm'> 
 
    <div class='designer-field' style='left:24px;top:2px;width:140px'>field in detail group </div> 
 
     </div> 
 
     <div class='panel-footer panel-primary'>Detail <a role="button" id="designer-detail-addband"> Add group</a></div> 
 
     </div> 
 

 
     <div class='panel'> 
 
     <div class='panel-body panel-resizable' style='height:1cm'> 
 
      
 
    <div class='designer-field' style='left:44px;top:2px;width:140px'>field in group 1 footer</div></div> 
 
     <div class='panel-footer panel-warning'>Group 1 Footer</div> 
 
     </div>

來源

2016-10-29 Andrus

我覺得你的問題是在這裏：

$parentpanel = $this.parent(".designer-panel");

jQuery的父母只上升一個級別的DOM，看着你的HTML與.designer面板的第一個div是從你的主播幾個級別。如果你將它改爲下面的代碼，那麼你應該希望得到你想要的元素。

$parentpanel = $this.parents(".designer-panel").get(0);

來源

2016-10-29 20:49:47

在此更改後插入html appers作爲文本。如何解決這個問題，以便代替文本面板出現？ – Andrus

我也嘗試將字符串包裝到'$（...）'中。在這種情況下，'[Object object]'出現在頁面中。 – Andrus

你現在可以發佈你的代碼嗎？我認爲原始問題中的HTML不正確，div開始和結束標記的匹配不正確。 –

如何在面板前後添加面板

回答

相關問題