如何在点击面板之前和之后添加新面板 [英] How to add new panels before and after clicked panel

问题描述

报告设计师详细信息带包含添加带按钮，在细节面板之前和之后立即添加新面板。

  $ parentpanel = $ this.parents（。designer-panel：first）; 
 

用于查找父面板，使用.prepend（）/ append（）添加新面板。 / p>



面板作为详细信息面板子元素添加。
如何在相同DOM级别的详细信息面板之前和之后添加面板，如示例html中的组页眉和页脚面板。

元素应该添加到 $ parentpanel.parent（）元素列表之前和之后 $ parentpanel 元素。

在jQuery中有没有一些selector或append命令？

  $（function（）{var startpos，selected = $（[]），offset = {top：0，left：0}; $（'＃designer-detail-addband'）。 '，function（）{var $ this = $（this），$ parentpanel = $ this.parents（。designer-panel：first）; $ parentpanel.prepend（'< div class =panel designer-panel >'+'< div class =panel-body designer-panel-bodystyle =height：1px>'+'< / div>'+'< div class =bg-warning >'&';'< div class =panel-footer>< i class =glyphicon glyphicon-chevron-up>'+'< / i>群组{0}：< span id =band {0} _exprcontenteditable =true>groupexpression< / span>'+'< / div>< / div>< / div ;'）; $ parentpanel.append（'< div class =panel designer-panel>'+'< div class =panel-body designer-panel-bodystyle =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）{// = 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}）;}） 

pre class =snippet-code-css lang-css prettyprint-override> .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 = href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>< link rel =stylesheethref =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/111.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'>组1标题中的字段1< / div& < div class ='designer-field'style ='left：54px; top：36px; width：160px'>组1标题中的字段2< / div& < / div> < div class ='panel-footer'>第1组标题< / 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'>字段in detail group< / div& < / div> < div class ='panel-footer panel-primary'> Detail< a role =buttonid =designer-detail-addband>添加组< / 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'>第1组页脚< / div> < / div>  

解决方案

尝试使用jQuery的 之前， after 函数。或 insertBefore ， insertAfter

也可以使用

  $ this.closest（。designer-panel）; 
  

而不是

  $ this.parents（。designer-panel：first）; 
  

请参阅最近的

Report designer detail band contains Add band button which shoud add new panels immediately before and after detail panel.

$parentpanel = $this.parents(".designer-panel:first");

is used to find parent panel and .prepend() / append() to add new panels.

Panels are added as Detail panel child elements. How to add panels before and after Detail panel in same DOM level like group header and footer panels in sample html.

Elements should probably added to $parentpanel.parent() element list before and after $parentpanel element.

Is there some selector or append command in jQuery for this ?

$(function() {

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

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

    $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>

解决方案

Try jQuery's before, after functions. Or insertBefore, insertAfter

Also you can use

$this.closest(".designer-panel");

instead of

$this.parents(".designer-panel:first");

See closest

这篇关于如何在点击面板之前和之后添加新面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！