bootstrapTable 数据绑定和修改列

哈喽！介绍下bootstrapTable怎么绑定和列里添加按钮

首先要引用css样式

    <link href="~/Content/XSSSPGYPY/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/XSSSPGYPY/assets/bootstrap/css/bootstrap-fileupload.css" rel="stylesheet" />
    <link href="~/Content/XSSSPGYPY/css/style.css" rel="stylesheet" />
    <link href="~/Content/XSSSPGYPY/css/style-responsive.css" rel="stylesheet" />
    <link href="~/Content/XSSSPGYPY/css/style-default.css" rel="stylesheet" />
    <link href="~/Content/XSSSPGYPY/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    <link href="~/Content/XSSSPGYPY/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />

再到js 样式

   <script src="~/Content/XSSSPGYPY/js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="~/Content/XSSSPGYPY/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="~/Content/XSSSPGYPY/js/common-scripts.js"></script>
    <script src="~/Content/XSSSPGYPY/dist/bootstrap-table.js"></script>
    <script src="~/Content/XSSSPGYPY/DateTime/js/bootstrap-datetimepicker.js"></script>
    <script src="~/Content/XSSSPGYPY/dist/locale/bootstrap-table-zh-CN.min.js"></script>
  <script src="~/Content/XSSSPGYPY/easyui/jquery.min.js"></script>

html代码（内容表格显示）
然后 html 代码 表格数据可以直接获取用 data-url=”控制器的地址”

<table id="tableHouXuan"
  data-toggle="table"    @*不用写 JavaScript 直接启用表格。*@
  data-url="/XSSSPGYPY/XSPY/SelectHouXuanXinXi" 
   @*服务器数据的加载地址*@
  data-click-to-select="true"
   @*设置true 将在点击行时，自动选择rediobox 和 checkbox*@
  data-select-item-name="radioName" 
  @*radio or checkbox 的字段名*@
  data-show-columns="true" @* 是否显示 内容列下拉框*@
  data-sort-name="InputTime"
  data-sort-order="desc"   @*定义排序方式 'asc' 或者 'desc'*@
  data-row-style="rowStyle"
  @*自定义行样式 参数为：row: 行数据 index: 行下标 返回值可以为class或者css*@
  data-query-params="queryParams"
  @*请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数*@
  data-show-refresh="true"  @*是否显示 刷新按钮*@
  data-pagination="true" @*设置为 true 会在表格底部显示分页条*@
  data-search="true" @*是否启用搜索框*@
  data-page-list="[5,15]" @*分多少页*@
  data-toolbar="#toolbar">       
    </table>

可以在表格里添加按钮 列的编辑
//table 表格属性设置

 $("#tableHouXuan").bootstrapTable({
            columns: [
                    {
                        field: 'KaiShiXueQi',
                        sortable: true,
                        sortOrder: "asc",
                        title: '开始学期',
                        width: 180,
                        align: 'center',
                    },
                    {
                            field: 'JieShuXueQi',
                            sortable: true,
                            sortOrder: "asc",
                            title: '结束学期',
                            width: 180,
                            align: 'center',
                    },
                         {
                             field: 'XueYuanMC',
                             title: '学院',
                             sortable: true,
                             sortOrder: "asc",
                             width: 180,
                             align: 'center',
                         },
                    {
                        field: 'NianJi',
                        title: '年级',
                        sortable: true,
                        sortOrder: "asc",
                        width: 130,
                        align: 'center',
                        },
                    {
                         field: 'ZhuanYeMC',
                         sortable: true,
                         sortOrder: "asc",
                        title: '专业',
                        width: 150,
                        align: 'center',
                        },
                    {
                        field: 'TouPiaoJieShuShiJian',
                        sortable: true,
                        sortOrder: "asc",
                        title: '投票结束时间',
                        width: 150,
                        align: 'center',
                            },
                    {
                field: 'PingYouSheDingID',
                title: '操作',
                align: 'center',
                width: 150,
                formatter: operateFormatter,

                    }
                  ]
            });

“操作”这一列用来生成按钮的 动态生成的按钮 ，下面是动态生成按钮代码
//获取表格的某一行的属性

function operateFormatter(value,row,index)
//row 获取这行的值 ，index 获取索引值
{
var PySheDingID = row.PingYouSheDingID;
// 利用 row 获取点击这行的ID

return [
  "<button type='button' class='btn btn-small btn-info'              
  style='margin-right:15px;' id='m-callback-this-start'  
  onclick='btnEntry(" + row.PingYouSheDingID + ")'  >进入投票   
  </button>"
                ].join('');

    }

感谢你的观看！，有神么解析不对的地方，请指示出来，或者你有什么见解可以留言，大家共同学习，共同进步！