Получить массив из нескольких выбранных идентификаторов строк в DataTables - PullRequest
0 голосов
/ 27 мая 2019

Я пытаюсь выбрать несколько строк с помощью флажков в плагине datatables jquery, чтобы передать данные в другую форму.

Я что-то делал, но мой код просто возвращает выбранную строку на текущей активной странице с данными.

Это моя форма, заполненная данными из jquery:

   <div class="widget-footer">

      <button id="BtnClick" class="btn btn-sm btn-success" type="submit">
          صدور
      </button>
      @using (@Html.BeginForm("LineRegimeSave", "DietTherapy", FormMethod.Post, new { id = "hiddenForm" }))
      {
          <input type="hidden" name="BreakFast" value="" />
          <input type="hidden" name="Snake1" value="" />
          <input type="hidden" name="Lunch" value="" />
          <input type="hidden" name="Snake2" value="" />
          <input type="hidden" name="Snake3" value="" />
          <input type="hidden" name="Dinner" value="" />
          <input type="hidden" name="Snake4" value="" />
          <input type="hidden" name="AdviseText" value="@TempData["Advise"].ToString()" />
          <input type="hidden" name="docFooterId" value="@TempData["footerId"].ToString()" />
      }
  </div>

И это мой запрос:

        var datasets = {};
        $("#BtnClick").click(function () {

           $.each(
                $("input[type=checkbox]"),
                function() {
                    var catName = $(this).attr('name');
                    datasets[catName] = {
                        label: catName,
                        data: []
                    };
                });

           $.each(
                $("input[type=checkbox]:checked"),
                function () {
                    var catName = $(this).attr('name');
                    datasets[catName].data.push($(this).val());
                });
            var data ={};
            $.each(
                datasets,
                function (item, dt) {
                    var name = item;
                    var value = dt['data'].join(",");
                    data[name] = value;
                }
            );

            $("#hiddenForm").autofill(data);
            $("#hiddenForm").submit();

И вы можете видеть мою таблицу:

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" class="collapsed">
                <i class="fa fa-lg fa-angle-down pull-right"></i>
                <i class="fa fa-lg fa-angle-up pull-right"></i>
                وعده صبحانه
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" aria-expanded="false" style="height: 0;">
        <div class="panel-body no-padding">
                <table id="dt_basic" class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="datatable_col_reorder_info" style="width: 100%;" width="100%">
                    <thead>
                        <tr role="row">
                            <th data-hide="phone" class="sorting_asc" tabindex="0" aria-controls="datatable_col_reorder" rowspan="1" colspan="1" style="width: 31px;" aria-sort="ascending" aria-label="ID: activate to sort column descending">ردیف</th>
                            <th data-class="expand" class="expand sorting" tabindex="0" aria-controls="datatable_col_reorder" rowspan="1" colspan="1" style="width: 300px;" aria-label="Name: activate to sort column ascending">رژیم</th>
                            <th class="sorting" aria-controls="datatable_col_reorder" rowspan="1" colspan="1" style="width: 50px;" aria-label="Phone: activate to sort column ascending">کالری</th>
                            <th aria-controls="datatable_col_reorder" rowspan="1" colspan="1" style="width: 20px;" aria-label="Phone: activate to sort column ascending">انتخاب</th>
                        </tr>
                    </thead>
                    <tbody>
                        @{
                            //string[] cal = new[] {breakfast, snake1, lunch, snake2, snake3, dinner, snake4};

                            if (Model.Any())
                            {
                                int index = 1;
                                var breakFast = Model.Where(a => a.Mealses.Any(b => b.MealsName == "BreakFast") && a.Calories.ToString() == @ViewBag.cal[0].ToString()).ToList();
                                foreach (var itDiet in breakFast)
                                {
                                    var rowCls = "odd";
                                    rowCls = @index / 2 == 0 ? "odd" : "even";
                                    <tr role="row" class="@rowCls">
                                        <td>@index</td>
                                        <td>@itDiet.Diet</td>
                                        <td>@itDiet.Calories</td>
                                        <td class="smart-form">
                                            <label class="checkbox">
                                                <input name="BreakFast" checked="checked" type="checkbox" value="@itDiet.Id">
                                                <i></i>
                                            </label>
                                        </td>
                                    </tr>
                                    index++;
                                }
                                index = 1;

                            }

                        }


                    </tbody>
                </table>
        </div>
    </div>
</div>

Когда я проверяю свой метод публикации в Visual Studio, я вижу, что я просто получаю выбранную строку активной страницы с флажком.Можете ли вы помочь мне улучшить мой код jquery?

ОБНОВЛЕНИЕ Если вы хотите знать, где находится источник данных: DataTables И вам может понадобиться добавить этот скрипт на страницу

    <script src="~/Scripts/plugin/datatables/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/plugin/datatables/dataTables.colVis.min.js"></script>
    <script src="~/Scripts/plugin/datatables/dataTables.tableTools.min.js"></script>
    <script src="~/Scripts/plugin/datatables/dataTables.bootstrap.min.js"></script>
    <script src="~/Scripts/plugin/datatable-responsive/datatables.responsive.min.js"></script>
    <script src="~/Scripts/jquery.formautofill.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...