jquery, создающий колонку, редактируемую с помощью select

65
5

эй, ребята, у меня есть образец, работающий по адресу: http://plnkr.co/edit/B9fJQwgdLXEqBhrIJI76?p=preview

прямо сейчас, если я нажму на значок редактирования <i class="fa fa-pencil-square" aria-hidden="true"></i> просто имя столбца и страна могут быть доступны для редактирования, я хотел бы, чтобы порядок столбцов был доступен для редактирования также можно сохранить в качестве раскрывающегося списка.

Мне нужно просто сохранить в html, так, например, если я нажму на редактирование, первый столбец изменится на выпадающий список после сохранения, чтобы быть понятным в тексте? как остальные 2 столбца?

то, что я пытаюсь сделать, - сделать первый столбец редактируемым как раскрывающийся список, похожий на 2 других с этим выбором

<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="2">option 3</option>
</select>

я также хотел бы сохранить значения.

CSS:

div.addRow{
line-height: 45px;
background-color: #fff;
padding-left: 10px;
border-bottom: 1px solid;
border-top: 1px solid #e5e5e5;}

HTML:

<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>order</th>
<th>name</th>
<th>country</th>
<th>action</th>
</tr>
</thead>
</table>

<table id="newRow" style="display:none">
<tbody>
<tr>
<td>
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="2">option 3</option>
</select>
</td>
<td>DVap
</td>
<td>
www</td>
<td><i class="fa fa-pencil-square" aria-hidden="true"></i>
<i class="fa fa-minus-square" aria-hidden="true"></i> </td>
</tr>
</tbody>
</table>

JQuery:

 $(document).ready(function() {

var table;

$("#example").on("mousedown", "td .fa.fa-minus-square", function(e) {
table.row($(this).closest("tr")).remove().draw();
})

$("#example").on('mousedown.edit', "i.fa.fa-pencil-square", function(e) {

$(this).removeClass().addClass("fa fa-envelope-o");
var $row = $(this).closest("tr").off("mousedown");
var $tds = $row.find("td").not(':first').not(':last');

$.each($tds, function(i, el) {
var txt = $(this).text();
$(this).html("").append("<input type='text' value=\""+txt+"\">");
});

});

$("#example").on('mousedown', "input", function(e) {
e.stopPropagation();
});

$("#example").on('mousedown.save', "i.fa.fa-envelope-o", function(e) {

$(this).removeClass().addClass("fa fa-pencil-square");
var $row = $(this).closest("tr");
var $tds = $row.find("td").not(':first').not(':last');

$.each($tds, function(i, el) {
var txt = $(this).find("input").val()
$(this).html(txt);
});
});

$("#example").on('mousedown', "#selectbasic", function(e) {
e.stopPropagation();
});

var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
table = $('#example').DataTable({
ajax: url,
rowReorder: {
dataSrc: 'order',
selector: 'tr'
},
columns: [{
data: 'order'
}, {
data: 'place'
}, {
data: 'name'
}, {
data: 'delete'
}]
});

$('#example').css('border-bottom', 'none');
$('<div class="addRow"><button id="addRow">Add New Row</button></div>').insertAfter('#example');

// add row
$('#addRow').click(function() {
//t.row.add( [1,2,3] ).draw();
var rowHtml = $("#newRow").find("tr")[0].outerHTML
console.log(rowHtml);
table.row.add($(rowHtml)).draw();
});
});

спросил(а) 2017-03-01T12:46:00+03:00 4 года, 7 месяцев назад
0
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема