jquery datatable 使用表單編輯表行數據

Question

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

 <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> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Type</th> <th>Amount</th> </tr> </thead> </table>

我需要為每一行附加編輯和刪除按鈕。 單擊編輯按鈕時，行數據應加載到下拉列表和文本框。 你能指導我這樣做嗎？

Answer 1

隨着應用程序架構的某些更改，我建議采用以下方法來使用本機 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 2

直接添加您的 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 3

行編輯器.js

我有一個類似的問題，寫了一個小的 JS 工具，它的目標是編輯行內聯。 可以在這里找到回購。 我認為下圖最好地描述了它的功能，但您也可以在此處找到運行示例。

設置它

你必須做的來整合它，是

1. 下載並整合文件

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

2. 設置關於哪些列應可編輯以及它們是否應作為下拉或輸入可編輯的配置（將其與示例圖片進行比較，您將很快弄清楚它的作用）：

    "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'} } } }

3. 在初始化 DataTable 后調用編輯器：

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

4. 呼叫rowEditor的功能editRow（或者無論你在上面把它命名為）與該行的索引要編輯。 我將按鈕放在數據表的單獨列中，但您可以隨意調用它。 <button onclick="rowEditor.editRow(1)">Edit</button>

如果您有任何疑問，請隨時提出或發出拉取請求 :)