Question

我正在尝试将bootstrap toggle合并到我的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)，因为它默认情况下是这样的，而且我看到你按布尔列（活动）分组，不确定是否有意义，它只会将你的网格分成两组， Column.Name不是必需的，它用于绑定到模型以进行排序/分组，并且最好总是至少有一列没有宽度（如果您将宽度设置为所有列并且网格宽度不是＆＃39 ; t匹配它们作为百分比工作）

使用Awstome MVC Grid的bootstrap切换

1 个答案: