存储选定的行 ID

Posted 2023-04-13

【中文标题】存储选定的行 ID

【英文标题】：Store selected rows id

【发布时间】：2019-10-07 23:08:49

【问题描述】：

我从我的数据库中的查询加载了一个数据表。 （+/- 10000 条记录） 这个想法是用户应该能够选择多个记录以供以后处理

首先我想为选择添加一个带有复选框的列，然后当用户完成所有选择后，应用程序会跟踪所有选定的行，然后在页面上的某个位置使用“下一步按钮”进入下一步，但是经过 12 小时的尝试，我无法做到。

然后我想通过在每一行中添加一个按钮来使其更简单，这样每次用户单击此按钮时，应用程序都会将选定的 id 保存在会话变量中。

<div class="panel-body">

<table id="userTable" class="table display compact order-column">
    <thead>
    <tr>
        <th>Select</th>
        <th>Name</th>
        <th>City</th>
        <th>Phone</th>
        <th>Zipcode</th>
    </tr>
    </thead>  
</table>

@section Scripts 
@Scripts.Render("~/bundles/datatable")
<script type="text/javascript">


    $(document).ready(function () 

        var ids;
        var mytable = $('#userTable').DataTable(


            "sDom": 'ltipr',
            "bServerSide": true,
            "ajax": 
                "beforeSend": AjaxBegin,
                "type": "POST",
                "url": '/LocationModifier/UserHistory',
                "contentType": 'application/json; charset=utf-8',
                'data': function (data)  return data = JSON.stringify(data); ,
                'complete': AjaxComplete
            ,


            "bProcessing": false,
            "orderMulti": false,
            "scrollX": true,
            "deferRender": true,
            "searchDelay": 7000,
            "fixedHeader": 
                "header": true,
                "footer": true
            ,

            "columnDefs": [
                 "defaultContent": "-", "targets": "_all" ,
                 "className": "text-center custom-middle-align", "targets": [0, 1, 2, 3, 4, ] ,
            ],

            "colReorder": true,

            "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],



            "columns": [
                 
                     "title": "Select",
                     "data": "ID",
                     "searchable": false,
                     "sortable": false,
                    "render": function (data, type, full, meta) 

                         return '<a href="@Url.Action("AddToCache", "LocationModifier")?id=' + data + '&source=0" class="editUser"><span class="glyphicon glyphicon-pencil btn-sm btn-info"></span></a>';
                     
                 ,

                 "data": "Name", "orderable": false ,
                 "data": "City", "orderable": true ,
                 "data": "Phone", "orderable": true ,
                 "data": "Zipcode", "orderable": false ,

            ],
            "order": []

        );

    );


</script>

public ActionResult AddToCache(int id)
    
        GetRecordAndAddeToCache(id);
        // what should i return here, the page should not be refreshed????
    

【问题讨论】：

复选框方法还不错。当您生成行时，它们具有 id，当单击复选框时，将其添加到 JavaScript 的 id 数组中。进行接受 List id 的操作，并在提交时获取您的 id...

@st_stefanov 那是我之前的目标，但我无法做到。尝试了几个小时后，我的同事告诉我，我必须使用不是免费的 Datatable Edit，所以我放弃了这个想法。但是，如果您在某处有示例，我将不胜感激，我对前端脚本的经验很少

我正在为你做一个例子。我还将展示一种 MVC 方法。给我一些时间。

我认为这个非常接近您的需要：gunaatita.com/Blog/… 或这个：tutorialspanel.com/…

@st_stefanov 感谢您的帮助。这些示例的问题是我将失去 jquery 数据表的好处，所以我将不得不实现我的 slef 分页、过滤排序......等等

【参考方案1】：

实施您的初始方法没有问题：

使用一些将存储选定行 ID 的全局集，例如 var rowsSelected = new Set()； 在单击选择复选框时将要检查的行的 ID 添加/删除到该全局变量：

$('.markSelected').on('click', function () 
    const selectedRowId = dataTable.row($(this).closest('tr')).data().id;
    $(this).prop('checked') ? rowsSelected.add(selectedRow) : rowsSelected.delete(selectedRow);
);

在重新渲染表格时，将复选框附加到第一列，并设置检查是否在 rowsSelected 中存在渲染的行 ID：

render: function (data) 
    return `<input type="checkbox" $rowsSelected.has(data.id) ? 'checked' : ''></input>`;

完整的演示，实现了这个概念：

//table source
const srcData = [
  id: 1, item: 'apple', cat: 'fruit',
  id: 2, item: 'pear', cat: 'fruit',
  id: 3, item: 'carrot', cat: 'vegie',
  id: 4, item: 'tomato', cat: 'vegie',
  id: 5, item: 'cucumber', cat: 'vegie'
];

//global variable that stores selected item id's
const selectedRows = new Set();

//datatables initialization
const dataTable = $('#mytable').DataTable(
  dom: 't',
  data: srcData,
  columns: [
    data: null, render: function(data)
      return `<input class="markSelected" type="checkbox" $selectedRows.has(data.id) ? 'checked' : ''></input>`;
    ,
    data: 'item', title: 'item',
    data: 'cat', title: 'cat'
  ]
);

//selection checkboxes click handler
$('#mytable').click('.markSelected', function()
  const selectedRowId = dataTable.row($(event.target).closest('tr')).data().id;
  $(event.target).prop('checked') ? selectedRows.add(selectedRowId) : selectedRows.delete(selectedRowId);
);

//proceed to the next step with selected row id's
$('#nextStep').on('click', function()
  console.log([...selectedRows]);
);

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" 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">
</head>
<body>
  <table id="mytable"></table>
  <button id="nextStep">Next Step</button>
</body>
</html>

【讨论】：

虽然我看到它运行，但我有 3 个问题 1- 当我单击任何其他页码时，我会丢失所有选定的框 2- 'dataTable.rows().every' 行给出错误 'datatable undefined' 3- '()=> ' 也给出了未定义的错误。关于数据，我正在使用服务器端选项加载我的数据，也许这就是我在更改页面时丢失选定复选框的原因。

调整了我的答案以使用 serverSide 选项集避免函数的箭头符号。以防万一，dataTable（不是datatable）是变量，我将我的 DataTables 对象分配给。

【参考方案2】：

您可以使用数据表的行选择功能来实现您想要做的事情。

$(document).ready(function() 
    var table = $('#userTable').DataTable();

    $('#userTable tbody').on( 'click', 'tr', function () 
        $(this).toggleClass('selected');
     );

    $('#submitButtonId').click( function () 
        alert( table.rows('.selected').data().length +' row(s) selected' );
        // You can use  table.rows('.selected').data()  to get all the selected Data
     );
 );

Reference

【讨论】：

几天前我也尝试过，但不知何故，当我更改页面时，选择丢失了，虽然在线示例中不是这种情况，我也不知道如何捕获id在那之后。