bootstrapTable组件formatter、responseHandler函数

最新推荐文章于 2024-04-11 11:51:27 发布

胤墨

最新推荐文章于 2024-04-11 11:51:27 发布

阅读量1.6k

点赞数 1

分类专栏：前端文章标签： bootstrap javascript 前端 jquery html

本文链接：https://blog.csdn.net/weixin_42537012/article/details/123141838

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用BootstrapTable组件从服务端获取并展示数据。formatter函数用于自定义列显示，如在用户ID列添加操作按钮；responseHandler函数则用于处理服务器返回的数据，包括提取total、code、msg等信息。示例代码展示了具体实现过程。

摘要由CSDN通过智能技术生成

bootstrapTable组件接受服务端传过来的数据

bootstrapTable组件接受服务端传过来的数据

bootstrapTable组件接受服务端传过来的数据

案例如下：

$(function () {
    var options = {
        id: "bootstrap-table-form",
        url: url,
        showSearch: false,
        showRefresh: false,
        showToggle: false,
        showColumns: false,
        columns: [
            {
			    field : 'userId', 
			    title : '用户ID'
                formatter: function(value, row, index) {
					var actions = [];
       				actions.push("添加相关标签");
                    return actions.join('');
                }
            }],
        responseHandler: function (res) {
            return null;
        }
    };
    $.table.init(options);
});

bootstrap table中formatter函数作用是什么？

formatter: function(value, row, index) {
	var actions = [];
    actions.push("属于列参数");
    return actions.join('');
}

value ：代表当前单元格中的值；
row：代表当前行；
index：代表当前行的下标；

bootstrap table中responseHandler函数作用是什么？

返回内容：

{
    "total":10,
    "code":200,
    "msg":"消息内容",
    "rows":[
        {
            "name":"小王"
        },
        {
            "name":"小明"
        }
    ]
}

需要获取totol、code、msg这些消息内容，需要用到上面的函数进行获取操作：

responseHandler: function (res) {
   console.log("total:" + res.total);
   console.log("code:" + res.code);
   console.log("msg:" + res.msg);
   console.log("rows:" + res.rows[0]);
   return null;
}

以上就是bootstrapTable组件formatter、responseHandler函数的具体使用！