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

Question

我正在从模型列表创建一个可编辑的 JQuery 数据表。我想编辑表中列出的每条记录的一些列 [费率、数量、IsBranded、说明]。我的代码如下。

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>

我想编辑价格、数量、描述、IsBranded 列。如果有人可以帮助我制作适当的代码，我将不胜感激。

感谢 艾伦

Answer 1

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

1. 将dataTables.cellEdit.js复制到您的项目中，您可以将其放在

   wwwroot/js

   下

2. 在您的页面中引用它

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

3. 然后按照教程进行操作。

   @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>
   }
   

结果：

Answer 2

我今天看到这个话题。

我将把它与 django 一起使用，我想要更新我的 postgres 数据库中的表，我需要在回调函数中进行 ajax 调用，不是吗？

提前致谢， 最好的问候