使用 bootstrap 切换 Awesome MVC Grid

Question

我正在尝试合并 bootstrap toggle into a column of my AwesomeMVC Grid (http://demo.aspnetawesome.com/GridDemo)，但即使在初始化 bootstrap 切换之后，切换也无法正确呈现。这是因为 AwesomeMVC 网格在页面加载后呈现。

我不想在初始化 bootstrap 切换时实现超时，因为网格加载时间可能不同。

有没有人尝试过使用 AwesomeMVC 实现任何类似的 bootstrap 插件？

这是我的代码示例。

查看

@(Html.Awe().Grid("UserList")
              .Url(Url.Action("GetUser", "User"))
              .Persistence(Persistence.Local)
              .Selectable(SelectionType.None)
              .Parent("pagesize", "pagesize")
              .Columns(
                  new Column { Name = "Name", Header = "FullName", Width = 72, SortRank = 1, Sort = Sort.Asc },
                  new Column { Name = "Active", Header = "Active", Width = 60,  ClientFormatFunc = "CustomActive", Group = true}
                  ))

Javascript

//Custom content for Active ClientFormatFunc
var CustomActive = function (GetUserList_Result) {
    return "<input type=\"checkbox\" class=\"checkbox-toggle\" data-toggle=\"toggle\" data-on=\"Yes\" data-off=\"No\" data-size=\"small\">";
}

$(function () {
    $(".checkbox-toggle").bootstrapToggle();
});

Answer 1

有一个可以连接的 aweload 事件，当你渲染复选框时我认为你需要设置它的选中状态，所以你应该得到这样的结果：

  @(Html.Awe().Grid("UserList")
          .Url(Url.Action("GetUser", "User"))
          .Persistence(Persistence.Local)
          .Parent("pagesize", "pagesize")
          .Columns(
              new Column { Name = "Name", Header = "FullName"},
              new Column { ClientFormatFunc = "CustomActive", Width = 75}))

    <script type="text/javascript">
        $(function () {
            $('#UserList').on('aweload', function () {
                $(this).find(".checkbox-toggle").bootstrapToggle();
            });
        });

        //Custom content for Active ClientFormatFunc
        var CustomActive = function (model) {
            var checked = model.Active ? 'checked = "checked"' : '';
            return '<input type="checkbox" ' + checked + ' class="checkbox-toggle" data-toggle="toggle" data-on="Yes" data-off="No" data-size="small">';
        };
    <script>

我也删除了 .Selectable(SelectionType.None) 因为默认情况下它是这样的，而且我看到你按布尔列分组（活动）不确定这是否有意义，它只会将你的网格分成 2组，Column.Name 不是必需的，它用于绑定到 sorting/grouping 的模型，并且最好始终至少有 1 列没有宽度（如果您将宽度设置为所有列并且网格宽度没有'匹配它们以百分比形式工作）

使用 bootstrap 切换 Awesome MVC Grid

Using bootstrap toggle with Awesome MVC Grid

asp.net-mvc

twitter-bootstrap

twitter-bootstrap-3

asp.net-mvc-awesome