Bootstaptable 动态colum

用于记性不好的自己市场翻阅
1.引入bootstrap文件
2.bootstraptable初始化
3.初始化按钮
4.初始化操作按钮的方法

@using Lead.Objects.Domain
@{
    ViewBag.Title = "角色列表";
    ViewBag.AddPath = "/Role/Add";
    ViewBag.AreaSizeH = "320px";
    ViewBag.AreaSizeL = "440px";
    Layout = "~/Views/Shared/_List.cshtml";
}

@section scripts{
<script>
    $(document).ready(function () {
        AddPageDialogMode = true;
    });
    function EditRole(RoleID) {
        var lIndex = layer.open({
            type: 2,
            title: "角色编辑",
            area: ["440px", "320px"],
            fix: false,
            maxmin: true,
            shadeClose: false,
            scrollbar: false,
            content: '@Url.Action("Add")?RoleID=' + RoleID,
        });
        if (screen() < 1) {
             //最大化
            layer.full(lIndex);
        }
    }

    function DeleteRole(RoleID) {
        layer.confirm('你确定要删除吗？',
           {
               time: 0 //不自动关闭
          , btn: ['确定', '取消']
          , yes: function (index) {
              $.ajax({
                  type: "POST",
                  url: "@Url.Action("Delete")",
                  data: { "RoleID": RoleID },
                  success: function (data) {
                      if (data == "success") {
                          //删除指定页面记录
                          var index = $('table[name="bootTable"]').bootstrapTable('getData').length;
                          $('table[name="bootTable"]').bootstrapTable('remove', {
                              field: "Id",
                              values: [parseInt(RoleID)]
                          });
                      } else {
                          layer.alert("删除失败");
                      }
                  },
                  error: function () {
                      layer.alert("服务器正忙");
                  }
              });
              layer.close(index);
          }
           });
    }
    //Javasctipt
    $(function () {
        var $table = $('table[name="bootTable"]');
        var oTableInit = new Object();
        var columns = [{
            field: 'Id',
            title: 'Id',
            visible: false
        }, {
            field: 'RoleName',
            title: '角色名称',
            events: operateEvents,
            formatter: 'editFormatter'
        }, {
            field: 'Comment',
            title: '备注',
        }, {
            field: 'operate',
            title: '操作',
            align: 'center',
            events: operateEvents,
            formatter: 'operateFormatter'
        }];

        var bootTable = $table.bootstrapTable({
            url: '@Url.Action("GetList")',
            method: 'post',
            bFilter: true,
            search: false,
            cache: false,
            pagination: true,
            queryparamsType: '',
            queryParams: function (params) {
                return {
                    Pagesize: params.limit,
                    PageIndex: params.offset / params.limit + 1,
                    Keyword: $('#txtQueryArgs').val()
                }
            },//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 100, 1000, 2000, 5000],
            smartDisplay: false,
            showColumns: false,                  //是否显示所有的列
            showRefresh: false,                  //是否显示刷新按钮
            clickToSelect: true,                //是否启用点击选中行
            uniqueId: "Id",                     //每一行的唯一标识，一般为主键列
            showToggle: false,          //是否显示详细视图和列表视图的切换按钮
            smartDisplay: false,
            cardView: false,                    //是否显示详细视图
            exportDataType: "basic",              //basic', 'all', 'selected'.
            idField: 'Id',
            columns: columns,  //动态colum
        });
        //搜索框位置样式改变
        $(".search").removeClass("float-right").addClass("float-left");
    })
    //格式化按钮
    function editFormatter(value, row, index) {
        return [
    '<a  class="RoleOfedit" href="#">' + row.RoleName + '</a>',
        ]
    }
    function operateFormatter(value, row, index) {
        return [
    '<a  class="RoleOfedit" href="#"><i class="fa fa-pencil-square-o" ></i>修改</a>',
    '<a  class="RoleOfdelete" href="#"><i class="fa fa-trash-o" ></i>删除</a>',
        ].join(' | ');
    }
    //初始化操作按钮的方法
    window.operateEvents = {
        'click .RoleOfedit': function (e, value, row, index) {
            EditRole(row.Id);
        }, 'click .RoleOfdelete': function (e, value, row, index) {
            DeleteRole(row.Id);
        }
    };

</script>
}
<div class="card-body table-responsive">
    <table id="RoleList" class="table table-hover table-condensed text-nowrap" name="bootTable"></table>
</div>

注意点：后台获取的数据要与colum中的名称一样

  public JsonResult GetList(QueryArgs args)
        {
            var pageData = RoleProvider.Instance.GetList<Role>(args, true);
            //sencond proccess
            pageData.rows = (pageData.rows as List<Role>).Select(p => new
            {
                Id = p.Id,
                RoleName = p.Rolename,
                Comment = p.Comment
            }).ToList();
            return Json(pageData);
        }