Добавить / удалить столбцы / элементы между двумя таблицами / ObjectContainer, jQuery - PullRequest
Новая
       8

Добавить / удалить столбцы / элементы между двумя таблицами / ObjectContainer, jQuery

0 голосов
/ 06 июля 2018

Я хочу спросить вас, знает ли кто-нибудь такой веб-компонент, как этот, потому что я уверен, что он есть, я опишу поведение ниже.

Вот изображение:

enter image description here

Если щелкнуть элемент / столбец таблицы A, а затем нажать To the right Button, он должен переместиться вправо и наоборот. Поэтому, если вы знаете, как мне этого добиться, это будет фантастически, даже если вы знаете компонент, который я могу использовать (вместо create, pure javascript или jQuery) это было бы прекрасно. ПРИМЕЧАНИЕ: мне нужно с кнопками, а не перетаскивать.

Ответы [ 3 ]

0 голосов
/ 06 июля 2018

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

0 голосов
/ 06 июля 2018

Вот мое решение, пожалуйста, проверьте пример ниже: 

$('#multiselect').multiselect();
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Two-side-Multi-Select-Plugin-with-jQuery-multiselect-js/js/multiselect.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <div class="col-xs-5">
    <select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
      <option value="1">Columns1/elements1</option>
      <option value="2">Columns2/elements2</option>
      <option value="3">Columns3/elements3</option>
      <option value="4">Columns4/elements4</option>
    </select>
  </div>

  <div class="col-xs-2">
    <button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
    <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
    <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
    <button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
  </div>

  <div class="col-xs-5">
    <select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select>
  </div>
</div>
0 голосов
/ 06 июля 2018

Попробуйте, надеюсь, это вам поможет. 

<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var selectedElement = '';
$(document).on("click", "td", function() { 
	selectedElement = this;
});
$(document).on("click", ".right", function() { 
	if(selectedElement && selectedElement.innerHTML && selectedElement.parentElement.parentNode.parentNode.id != "table2") {
			$("#table2 tbody").append("<tr><td>" + selectedElement.innerHTML + "</td></tr>");
			$(selectedElement).remove();
			selectedElement = '';
	}
});
$(document).on("click", ".left", function() { 
	if(selectedElement && selectedElement.innerHTML && selectedElement.parentElement.parentNode.parentNode.id != "table1") {
			$("#table1 tbody").append("<tr><td>" + selectedElement.innerHTML + "</td></tr>");
			$(selectedElement).remove();
			selectedElement = '';
	}
});
</script>
<style>
  td:active {
    background-color : #87CEEB;
}
</style>
</head>

<body>
<div class="container" style="width:100%">    
<div class="leftCont" style="width:30%">      
  <table class="table" id="table1" style="width:30%;float:left">
    <thead>
      <tr>
        <th>A</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Columns1/elements1</td>
      </tr>
      <tr>
        <td>Columns2/elements2</td>
      </tr>
      <tr>
        <td>Columns3/elements3</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="middleCont" style="width:100px;float:left;margin: 50px 120px 50px 120px;display: inline-grid;"> 
  <button class="right" value="right">Right</button><br>
  <button class="left" value="left">Left</button>
</div>
<div class="rigthCont" style="width:30%;float:left"> 
  <table class="table" id="table2" style="width:30%;float:left">
    <thead>
      <tr>
        <th>B</th>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>
</div>
</div>
</body>
</html>
...