如何创建可编辑的 JQuery 数据表答案

【问题标题】：How can create an editable JQuery datatable如何创建可编辑的 JQuery 数据表
【发布时间】：2021-05-08 06:38:32
【问题描述】：

我正在从模型列表创建一个可编辑的 JQuery 数据表。我想编辑表中列出的每条记录的某些列 [Rate, Qty, IsBranded, Description]。我的代码如下。

ProductModel
Id int
Name string
Rate decimal
Qty int
Price decimal
Description string

HTML 和 JavaScript

<script type="text/javascript">
    $("document").ready(function () {
      
        $('#tbllist').DataTable();
    });
</script>

@model List<Product>
 <table id="tbllist" class="cell-border" style="width:100%">
        <thead class="thead-light">
            <tr>
                <td>Name</td>
                <td>Rate</td>
                <td>Qty</td>
                <td>total</td>  
                <td>IsBranded</td> 
        <td>Description</td>             
            </tr>

        </thead>
        <tbody>
            @if (Model != null)
            {
                for (var i = 0; i < Model.Count; i++)
                {
                    <tr>
                        <td>@Model[i].Name</td>
                        <td>@Model[i].Rate</td>
                        <td>@Model[i].Qty</td>
                        <td>@Model[i].total</td>                        
                        <td><input type="checkbox" @(Model[i].IsBranded ? "checked" : "") /></td>
            <td>@Model[i].Description</td>                        
                    </tr>

                }

            }

        </tbody>

    </table>

我想编辑 Rate、Qty、Description、IsBranded 列。如果有人可以帮助我制作适当的代码，将不胜感激。

感谢艾伦

【问题讨论】：

你可以使用CellEdit插件。
也许这个例子会对你有所帮助：editor.datatables.net/examples/inline-editing/simple
我正在寻求有关如何在我现有代码中应用代码的人的帮助。谢谢
你最后是怎么解决你的问题的？

标签： html jquery asp.net-core datatable

【解决方案1】：

我根据@StéphaneLaurent 评论做了一个例子，希望它对你有用。

将dataTables.cellEdit.js复制到你的项目中，可以放在wwwroot/js下
在你的页面中引用它

<script src="~/js/dataTables.cellEdit.js"></script>

然后关注tutorial。

@model List<ProductModel>

<table id="tbllist" class="cell-border" style="width:100%">
 <thead class="thead-light">
     <tr>
         <td>Name</td>
         <td>Rate</td>
         <td>Qty</td>
         <td>Total</td>
         <td>IsBranded</td>
         <td>Description</td>
     </tr>

 </thead>
 <tbody>
 @if (Model != null)
 {
     for (var i = 0; i < Model.Count; i++)
     {
         <tr>
             <td>@Model[i].Name</td>
             <td>@Model[i].Rate</td>
             <td>@Model[i].Qty</td>
             <td>@Model[i].Total</td>
             <td><input type="checkbox" @(Model[i].IsBranded ? "checked" : "") /></td>
             <td>@Model[i].Description</td>
         </tr>
     }
 }

 </tbody>
</table>

@section scripts{
 <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
 <script src="~/js/dataTables.cellEdit.js"></script>
 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" />
 <script type="text/javascript">
     var table = $('#tbllist').DataTable();

     function myCallbackFunction(updatedCell, updatedRow, oldValue) {
         console.log("The new value for the cell is: " + updatedCell.data());
         console.log("The values for each cell in that row are: " + updatedRow.data());
     }

     table.MakeCellsEditable({
         "onUpdate": myCallbackFunction
     });
 </script>
}

结果：

【讨论】：