你如何刷新 kendo-ui 网格自定义按钮的可见性？

Question

我在剑道 ui 网格上有多个自定义命令，每个命令都应该按顺序显示。单击第一个按钮时，项目会更新，然后应该显示下一个按钮。当我单击一个按钮时，数据源会更新，但按钮的可见性状态不会改变。改变按钮的唯一方法是刷新整个页面。

这是我目前拥有的： cshtml

@(Html.Kendo().Grid<Visitors>().Name("shippingGrid")
      .Sortable()
      .Groupable()
      .Editable(e => e.Mode(GridEditMode.InCell))
      .Scrollable(sc => sc.Endless(true))
      .Pageable(p => p.AlwaysVisible(true))
      .Resizable(r => r.Columns(true))
      .Filterable()
      .ClientDetailTemplateId("entryDetails")
      .Columns(columns =>
      {
          columns.Bound(column => column.VisitorId).Width(50);
          columns.Bound(column => column.VisitorType.Description).Editable("editMode").Width(150);
          columns.Bound(column => column.FirstName).Width(200).Editable("editMode");
          columns.Bound(column => column.LastName).Width(200).Editable("editMode");
          columns.Bound(column => column.Notes).Width(200);


          columns.Command(column =>
          {
              column.Custom("Check In").Click("btnAction_Click").Visible("btnCheckIn_Visible").HtmlAttributes(new { actionId = 3});
              column.Custom("Check Out").Click("btnAction_Click").Visible("btnCheckOut_Visible").HtmlAttributes(new { actionId = 4 });

              column.Custom("Start Loading").Click("btnAction_Click").Visible("btnStartLoadingOrUnloading_Visible").HtmlAttributes(new { actionId = 5});
              column.Custom("Finish Loading").Click("btnAction_Click").Visible("btnFinishLoading_Visible").HtmlAttributes(new { actionId = 6 });

              column.Custom("Start Unloading").Click("btnAction_Click").Visible("btnStartLoadingOrUnloading_Visible").HtmlAttributes(new { actionId = 7 });
              column.Custom("Finish Unloading").Click("btnAction_Click").Visible("btnFinishUnloading_Visible").HtmlAttributes(new { actionId = 8 });
          }).Width(100).MinResizableWidth(100);
      })
      .DataSource(ds => ds.Ajax()
          .Read(r => r.Url("ShippingOffice?handler=Read").Data("forgeryToken"))
          .Model(m => m.Id(id => id.VisitorId)
          )
      )
      .Pageable())

<script type="text/javascript">
var timeEntriesList = @Html.Raw(JsonConvert.SerializeObject(ViewBag.visitorTimeEntries));

function btnCheckIn_Visible(dataItem) {
    if (timeEntriesList.length > 0) {
        var lastTimeEntryIndex = timeEntriesList.length - 1 - timeEntriesList.slice().reverse().findIndex(t => t.VisitorId === dataItem.VisitorId);
        if (timeEntriesList[lastTimeEntryIndex].EntryTypeId === 1) {
            return true;
        }
        return false;
    }
    return false;
}

function btnCheckOut_Visible(dataItem) {
    if (timeEntriesList.length > 0) {
        var lastTimeEntryIndex = timeEntriesList.length - 1 - timeEntriesList.slice().reverse().findIndex(t => t.VisitorId === dataItem.VisitorId);
        if (timeEntriesList[lastTimeEntryIndex].EntryTypeId === 6 || timeEntriesList[lastTimeEntryIndex].EntryTypeId === 8) {
            return true;
        }
        return false;
    }
    return false;
}

function btnStartLoadingOrUnloading_Visible(dataItem) {
    if (timeEntriesList.length > 0) {
        var lastTimeEntryIndex = timeEntriesList.length - 1 - timeEntriesList.slice().reverse().findIndex(t => t.VisitorId === dataItem.VisitorId);
        if (timeEntriesList[lastTimeEntryIndex].EntryTypeId === 3) {
            return true;
        }
        return false;
    }
    return false;
}

function btnFinishLoading_Visible(dataItem) {
    if (timeEntriesList.length > 0) {
        var lastTimeEntryIndex = timeEntriesList.length - 1 - timeEntriesList.slice().reverse().findIndex(t => t.VisitorId === dataItem.VisitorId);
        if (timeEntriesList[lastTimeEntryIndex].EntryTypeId === 5) {
            return true;
        }
        return false;
    }
    return false;
}

function btnFinishUnloading_Visible(dataItem) {
    if (timeEntriesList.length > 0) {
        var lastTimeEntryIndex = timeEntriesList.length - 1 - timeEntriesList.slice().reverse().findIndex(t => t.VisitorId === dataItem.VisitorId);
        if (timeEntriesList[lastTimeEntryIndex].EntryTypeId === 7) {
            return true;
        }
        return false;
    }
    return false;
}

外部js

function btnAction_Click(e) {
var checkInVisitor = this.dataItem($(e.currentTarget).closest("tr"));
var shippingGrid = $("#shippingGrid").data("kendoGrid");
var shippingGridDataSource = shippingGrid.dataSource;

$.ajax({
    type: "POST",
    url: "/FrontDesk/VisitorAction_Update",
    data: {
        VisitorId: checkInVisitor.VisitorId,
        EntryTypeId: e.currentTarget.attributes.actionId.value,
        TimeStamp: new Date(),
        Notes: checkInVisitor.Notes
    },
    failure: function(response) {
        alert(response);
    },
    success: function () {
        shippingGridDataSource.sync();
        shippingGridDataSource.read();
    }
});

我尝试添加 shippingGrid.refresh(); 但这也不起作用。有没有办法在网格刷新后改变按钮的可见性状态，而不必刷新整个页面？

Answer 1

我能够弄清楚。页面加载后 ViewBag 没有更新，并意识到我在 POST 之后没有返回任何内容。

以下是我所做的更改：

        success: function (result) {
        timeEntriesList.push(result);
        shippingGridDataSource.sync();
        shippingGridDataSource.read();
    }

将其添加到 timeEntriesList 后，按钮的可见性会发生变化。