Boostrap根据返回的值判断显示

本文主要是介绍Boostrap根据返回的值判断显示，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<script>
            $(function () {
                $('#msgTable').bootstrapTable({
                    url: '[[${#request.getContextPath()}]]/msg/getMessages',
                    cache: false, sidePagination: 'server', uniqueId: "id",
                    pagination: true, pageNumber: 1, pageSize: 10, pageList: [10, 20, 30, 40, 50],
                    columns: [
                        {checkbox: true, visible: true},                  //是否显示复选框
                        {field: 'id', title: '编号', align: 'center'},
                        {
                            field: 'content', title: '内容', align: 'center',
                            formatter: function (value, row, index) {
                                let s = '<a href="#" onclick="view(\''
                                    + row.id + '\', \''
                                    + row.file.fileName + '\', \''
                                    + row.file.filePath + '\')">';
                                return value.replace('#', s) + '</a>!';
                            }
                        },
                        {field: 'fromUser.username', title: '发送人', align: 'center'},
                        {field: 'createTime', title: '发送时间', align: 'center'},
                //isRead 此处根据返回的isRead值判断显示
                        {field: 'isRead', title: '是否已读', align: 'center',
                            formatter: function (value, row, index) {
                                var type = '';
                                switch (value) {
                                    case 0 :
                                        type = '未读';
                                        break;
                                    case 1 :
                                        type = '已读';
                                        break;
                                    default :
                                        type = '忽略分享';
                                }
                                return type;
                            }
                        },

                        {
                            field: 'id', title: '操作', align: 'center',
                            formatter: function (value, row, index) {
                                return '<a href="#" onclick="detail(\'' + value + '\')">忽略分享</a>';
                            }
                        }
                    ],
                    queryParams: function (params) {
                        //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
                        params = {
                            pageNum: (params.offset / params.limit) + 1,    //页码
                            pageSize: params.limit                         //页面大小
                        };
                        return params;
                    }
                });
            });
        </script>        

解析：
①前端元素表单：

 ②js部分：

 横线一：相对应的表单元素接收boostrapTable函数后的结果。

横线二：

field：代表返回结果的json格式中对应的属性值

formatter：用于对该列显示内容进行格式化的函数。有三个参数，value，row，index,
value：返回的json对应field的值。
row：该行。
index：该行的下标。

return：需要最终在该列显示的值。

 此处根据isRead的值进行不一样的显示：

关于field=‘content’那部分的前端结果：

 queryParams：用于在boostrapTable初始化发送请求的时候，传输需要的参数到web接口中。

这篇关于Boostrap根据返回的值判断显示的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！