哈喽!介绍下bootstrapTable怎么绑定和列里添加按钮
首先要引用css样式
<link href="~/Content/XSSSPGYPY/assets/bootstrap/css/" rel="stylesheet" />
<link href="~/Content/XSSSPGYPY/assets/bootstrap/css/" rel="stylesheet" />
<link href="~/Content/XSSSPGYPY/css/" rel="stylesheet" />
<link href="~/Content/XSSSPGYPY/css/" rel="stylesheet" />
<link href="~/Content/XSSSPGYPY/css/" rel="stylesheet" />
<link href="~/Content/XSSSPGYPY/assets/bootstrap/css/" rel="stylesheet" />
<link href="~/Content/XSSSPGYPY/assets/font-awesome/css/" rel="stylesheet" />
再到js 样式
<script src="~/Content/XSSSPGYPY/js/" type="text/javascript"></script>
<script src="~/Content/XSSSPGYPY/assets/bootstrap/js/"></script>
<script src="~/Content/XSSSPGYPY/js/"></script>
<script src="~/Content/XSSSPGYPY/dist/"></script>
<script src="~/Content/XSSSPGYPY/DateTime/js/"></script>
<script src="~/Content/XSSSPGYPY/dist/locale/"></script>
<script src="~/Content/XSSSPGYPY/easyui/"></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 获取点击这行的ID
return [
"<button type='button' class='btn btn-small btn-info'
style='margin-right:15px;' id='m-callback-this-start'
onclick='btnEntry(" + + ")' >进入投票
</button>"
].join('');
}
感谢你的观看!,有神么解析不对的地方,请指示出来,或者你有什么见解可以留言,大家共同学习,共同进步!