Добавление кнопки удаления в bootstrapTable в MVC - PullRequest
Новая
       13

Добавление кнопки удаления в bootstrapTable в MVC

0 голосов
/ 16 апреля 2020

У меня есть проект. Net MVC, который заполняет таблицу данными, используя bootstrapTable из bootstrap v3. Я хочу добавить кнопку удаления в каждую строку.

BootstrapTable получает json данных и загружает их. json построен так: 

public virtual JsonResult Search(FormCollection searchArgument)
{
    IEnumerable<MyData> myListData = GetMyListData(searchArgument);
    var jsonResult = Json(myListData, JsonRequestBehavior.AllowGet);
    return jsonResult;
}

Так что jsonResult - это просто список всех моих MyData. Мое представление, которое показывает результат, выглядит следующим образом: 

@model MyNamespace.Web.Models.MyListViewModel
<div class="col-md-12">
    @{
        ViewBag.Title = "Index";
        Layout = MVC.Shared.Views._Layout;

        <div class="row">
            <div class="col-md-12">
                <form role="form" id="formsearch">
                    <input id="fromsearch" name="fromsearch" type="hidden" value="true" />
                    <div class="form-group">
                        @Html.LabelFor(m => m.Status, "Status:")<br />
                        @Html.DropDownList("status", new SelectList(Model.Status, "Value", "Key", Model.SelectedStatus), new { @class = "selectButton" })
                    </div>
                    <input type="button" id="btnsearch" value="Search" />
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table id="table" class="table">
                    <thead>
                        <tr>
                            <th data-field="MyDataNumber" data-sortable="true">Number</th>
                            <th data-field="MyDataCreatedate" data-sortable="true">Created</th>
                            <th data-field="Status" data-sortable="true">Status</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    }
</div>
<script>

    $("#btnsearch").click(function () {
        $('#table').bootstrapTable('showLoading');
        $.ajax({
            type: "POST",
            url: "@Url.Action(MVC.MyController.ActionNames.Search, MVC.MyController.Name)",   
            data: $('#formsearch').serialize(),
            dataType: "json",
            success: function (data) {
                $('#table').bootstrapTable('hideLoading');
                $('#table').bootstrapTable({
                    data: data,
                    striped: true,
                    pagination: true,
                    pageSize: 25,
                    pageList: [10, 25, 50, 100, 200],
                    search: false
                });
                $('#table').bootstrapTable('load', data).on('click-row.bs.table', function (e, row, $element) {
                    Showdetail(JSON.stringify(row));
                });
            },
            error: function (err) {
                console.log(err)
            }
        });
    });

    function Showdetail(jsonrow) {
        var obj = JSON.parse(jsonrow);
            window.location = "@Url.Action(MVC.MyController.ActionNames.ShowMyData, MVC.MyData.Name)?myDataId=" + obj.Id;
    }


</script>

@section AddToHead 
{
    @Styles.Render("~/bundles/bootstrap-table/css")
}

@section scripts 
{
    @Scripts.Render("~/bundles/bootstrap-table")
}

Таким образом, функция javascript ("#btnsearch").click получает данные json из public virtual JsonResult Search и отправляет их в bootstrapTable, который загружает данные в стол. Что я хочу сделать, это добавить новый заголовок в мою таблицу, например: 

<table id="table" class="table">
    <thead>
        <tr>
            <th data-field="MyDataNumber" data-sortable="true">Number</th>
            <th data-field="MyDataCreatedate" data-sortable="true">Created</th>
            <th data-field="Status" data-sortable="true">Status</th>
            <th></th>
        </tr>
    </thead>
</table>

, а затем в последнем столбце добавить кнопку удаления с идентификатором этой строки (например, @Model.Id). ), чтобы я мог вызвать контроллер, чтобы удалить строку из базы данных, а затем перезагрузить таблицу, чтобы строка также исчезла из GUI.

Я мог бы легко сделать это с ActionLink, но так как Я не пропускаю oop через все объекты, а затем рисую их на странице, я не могу просто добавить ActionLink на страницу. Все рендеринг строк выполняется в bootstrapTable.

Я посмотрел на этот вопрос и ответ, и он показался мне многообещающим, но я не совсем этим занимаюсь, и я не могу понять, что хотел нужно сделать, чтобы это работало на меня: Bootstrap таблица - Dynami c кнопка в строке .

1 Ответ

0 голосов
/ 16 апреля 2020

Согласно документации и примерам здесь: https://live.bootstrap-table.com/example/column-options/events.html

Добавьте к своим сценариям: 

<script>
  var $table = $('#table')

  function operateFormatter(value, row, index) {
    return [

      '<a class="remove" href="javascript:void(0)" title="Remove">',
      '<i class="fa fa-trash"></i> Delete',
      '</a>'
    ].join('')
  }

  window.operateEvents = {

    'click .remove': function (e, value, row, index) {

//edit here for ajax request to delete row.id record

    $.ajax({
            type: "POST",
            url: "@Url.Action(MVC.MyController.ActionNames.Delete,MVC.MyController.Name)",   
            data: {id:row.id},
            dataType: "json",
            success: function (data) {
              //when success remove row
      $table.bootstrapTable('remove', {
        field: 'id',
        values: [row.id]
      })
            },
            error: function (err) {
                console.log(err)
            }
        });



    }
  }
</script>

и отредактируйте таблицу html: 

<table id="table" class="table">
    <thead>
        <tr>
            <th data-field="MyDataNumber" data-sortable="true">Number</th>
            <th data-field="MyDataCreatedate" data-sortable="true">Created</th>
            <th data-field="Status" data-sortable="true">Status</th>
             <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">Actions</th> <!--add this col-->
        </tr>
    </thead>
</table>
...