Question

app.put('/test/:id', (req, res) => {
    console.log("I am test");
    res.header('Content-Type', 'application/json; charset=utf-8');
    res.status(201).send({result: "ok"});
});

app.post('/test/:id', (req, res) => {
    console.log("I am test");
    res.header('Content-Type', 'application/json; charset=utf-8');
    res.status(201).send({result: "ok"});
});

var tb = $('#example').DataTable();

$('#addRow').on('click', function() {
  var typeName = $("#type option:selected").val();
  var amount = $("#amount").val();
  tb.row.add([typeName, amount]).draw();
});

我需要为每行附加编辑和删除按钮。单击编辑按钮时，行数据应加载到下拉列表和文本框中。你可以指导我这样做吗？

Answer 1

直接添加HTML。我已经添加了按钮，您也可以类似地添加一个下拉菜单。请考虑以下内容：

var tb = $('#example').DataTable();

$('#addRow').on('click', function() {
  var typeName = $("#type option:selected").val();
  var amount = $("#amount").val();
  var row = tb.row.add([typeName, amount, "<span><button>Edit</button><button>Delete</button></span>"]).draw();
  var edit = row.node().getElementsByTagName("button")[0];
  edit.onclick = function() {
    document.getElementById('typeEdit').value = row.data()[0];
    document.getElementById('amtEdit').value = row.data()[1];
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<label>Type</label>
<select id="type">
  <option> Type 01</option>
  <option> Type 02</option>
</select>
<label>Amount</label>
<input type="text" id="amount" />
<button id="addRow"> Add </button>
<br/ >
<br/ >
Edit Type
<select id="typeEdit">
  <option> Type 01</option>
  <option> Type 02</option>
</select>
Edit Amount
<input id="amtEdit" />
<br/ >
<br/ >
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Type</th>
      <th>Amount</th>
      <th>Ops</th>
    </tr>
  </thead>
</table>

Answer 2

在对应用程序的体系结构进行某些更改之后，我建议采用以下方法，该方法采用本机DataTables选项和API方法：

//initialize DataTable
const tb = $('#example').DataTable({
  //remove non-essential controls for the sake of cleaner view
  dom: 't',
  //use columns option to setup header titles
  columns: [
    {title: 'Type'},
    {
      title: 'Amount',
      //user 'render' to append Edit/Delete buttons for each entry
      render: data => `${data}<button action="delete">Delete</button><button action="edit">Edit</button>`
    }
  ]
});
//click handler for dual purpose 'Submit' button that adds new rows and submits edits
$('#submit').on('click', function() {
  //when submit button acts to append new row to the table (default)
  if($(this).attr('action') == 'addRow'){
    tb.row.add([$("#type").val(), $("#amount").val()]).draw();
  }
  //when submit button acts to submit edits
  if($(this).attr('action') == 'confirmEdit'){
    //change affected row data and re-draw the table
    tb.row($(this).attr('rowindex')).data([$("#type").val(), $("#amount").val()]).draw();
  }
  //clean up form, switch it to default state
  $('#type').val("");
  $('#amount').val("");
  $('#submit').attr('action', 'addRow');
});
//'Delete' button click handler
$('#example').on('click', 'tbody tr button[action="delete"]', function(event){
  tb.row($(event.target).closest('tr')).remove().draw();
});
//'Edit' button click handler
$('#example').on('click', 'tbody tr button[action="edit"]', function(){
  //get affected row entry
  const row = tb.row($(event.target).closest('tr'));
  //get affected row().index() and append that to 'Submit' button attributes
  //you may use global variable for that purpose if you prefer
  $('#submit').attr('rowindex', row.index());
  //switch 'Submit' button role to 'confirmEdit'
  $('#submit').attr('action', 'confirmEdit');
  //set up 'Type' and 'Amount' values according to the selected entry
  $('#type').val(row.data()[0]);
  $('#amount').val(row.data()[1]);
});

tbody tr button {
  display: block;
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<label>Type</label>
<select id="type">
  <option value="" selected></option>
	<option value="Type 01">Type 01</option>
	<option value="Type 02">Type 02</option>
</select>

<label>Amount</label>
<input type="text" id="amount" />
<button id="submit" action="addRow">Submit</button>

<table id="example" class="display" cellspacing="0" width="100%"></table>

Answer 3

RowEditor.js

我遇到了类似的问题，并编写了一个微型JS工具，该工具旨在内联编辑行。可以在here中找到该仓库。我认为最好用下面的图片来描述其功能，但是您也可以找到一个运行示例here。

设置

集成它所要做的就是

下载并集成文件

<script type="text/javascript" charset="utf8" src="/js/RowEditor.js"></script>

设置有关哪些列应可编辑以及是否应将其作为下拉菜单或输入进行编辑的配置（将其与示例图片进行比较，您将快速找出它的作用）：

       "1":{"type":"input"},
       "2":{"type":"input"},
       "3":{"type":"select",
           "options":{
               "1":{"value":'Sales Assistant', "title":'Sales Assistant'},
               "2":{"value":'Tech Lead', "title":'Tech Lead'},
               "3":{"value":'Secretary', "title":'Secretary'},
               "4":{"value":'Developer', "title":'Developer'},
               "5":{"value":'Trainee', "title":'Trainee'}
           }
       }
}

初始化数据表后，调用编辑器：

$(document).ready( function () {
    table = $('#table').DataTable();
    rowEditor = new RowEditor('#table', table, editRowSettings);    
});

使用要编辑的行的索引调用 rowEditor 的函数 editRow （或者您在上面已为其命名）。我将按钮放置在数据表的单独列中，但是您可以随时调用它。 <button onclick="rowEditor.editRow(1)">Edit</button>

如果您有任何疑问，请随时提出或发出拉动请求：）

jQuery datatable使用表格编辑表行数据

3 个答案: