bootstrapTable 数据绑定和修改列

2017-01-04 19:27:09来源:CSDN作者:HuChaoQing人点击

第七城市

哈喽!介绍下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('');    }

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

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台