`

bootstrap table用法小结

bootstrap table动态生成列jqueryajax 
阅读更多

一、bootstrap table简介

基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。相关介绍请参考官方网址：http://bootstrap-table.wenzhixin.net.cn/

二、这次项目中页面展示



 

三、使用方法

（1）引入js css

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">  
<link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">  
<!--js-->  
<script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>  
<script src="js/bootstrap/bootstrap.min.js"></script>  
<script src="js/bootstrap/bootstrap-table.js"></script>  
<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

 

（2）数据填充

bootStrap table获取数据有两种方式，一是通过table 的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据

    <table data-toggle="table">  
      <thead>  
        ...  
      </thead>  
    </table>

 

    $('#table').bootstrapTable({  
         url: 'data.json'  
     });
 

表格的初始化，其中用到了动态生成列：

var $table = $('#table'), $remove = $('#remove'), selections = [], isAuditValue, isSignedValue, groupIdValue;
var $queryByCondition = $("#queryByCondition");
var columnsValue = [
                    {
                        field : 'state',
                        checkbox: true,
                        align : 'center'
                    }, {
                        field : 'incrementId',
                        title : '编号',
                        sortable : true,
                        align : 'center'
                    }, {
                        field : 'name',
                        title : '姓名',
                        sortable : true,
                        editable : true,
                        align : 'center'
                    }, {
                        field : 'telephone',
                        title : '电话',
                        sortable : true,
                        editable : true,
                        align : 'center'
                    }, {
                        field : 'email',
                        title : '邮箱',
                        sortable : true,
                        editable : true,
                        align : 'center'
                    }, {
                        field : 'groupId',
                        title : '分组',
                        editable : true,
                        align : 'center'
                    }, {
                        field : 'isAudit',
                        title : '审核状态',
                        align : 'center',
                        formatter : formatStatus
                    }, {
                        field : 'isSigned',
                        title : '签到',
                        align : 'center',
                        formatter : formatStatus
                    }, {
                        field : 'isNotified',
                        title : '通知',
                        align : 'center',
                        formatter: formatNotify
                    }, {
                        field : 'isReminded',
                        title : '提醒',
                        align : 'center',
                        formatter :　formatRemind
                    }, {
                        field : 'comment',
                        title : '备注',
                        align : 'center',
                        editable : true,
                        formatter : formatComment
                    } , {
                        field : 'createTime',
                        title : '注册时间',
                        align : 'center'
                    }, {
                        field : 'id',
                        title : 'id',
                        sortable : true,
                        align : 'center',
                        visible : false
                    }];
$(document).ready(function() {
    initColumns();
});
function initColumns(){
    var meetingId = $('#meeting_id').val();
    $.ajax({
        url : "form/queryByMeetingId?meetingId=" + meetingId,
        type : "POST",
        success : function(respdata) {
            if (respdata != null) {
                // console.info(respdata.listColumns);
                var obj = respdata.listColumns;
                for(var i=0;i<obj.length;i++){
                    columnsValue.push(obj[i]);
                }
                initTable(columnsValue);
                getCount("isRegist", "1", "registed_count");
                getCount("isSgetColumnsValueigned", "1", "signed_up_count");
                getCount("isAudit", "1", "audited_count");
                getCount("isNotified", "1", "notified_count");
                getCount("isRemind", "1", "reminded_count");
            } else {
                PopupMessage(1, "列初始化出错，请稍后重试。", 2000);
            }
        }
    });
}

function initTable(initColumnsValue) {
    var meetingId = $('#meeting_id').val();
    $table
            .bootstrapTable({
                url : "custom/customQueryData?meetingId=" + meetingId, // 请求后台的URL（*）
                method : 'post',
                striped : true, // 是否显示行间隔色
                cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                queryParams : queryParams,// 传递参数（*）
                columns : initColumnsValue
            });

    // sometimes footer render error.
    setTimeout(function() {
        $table.bootstrapTable('resetView');
    }, 200);
    $table.on('check.bs.table uncheck.bs.table '
            + 'check-all.bs.table uncheck-all.bs.table', function() {
        $remove
                .prop('disabled',
                        !$table.bootstrapTable('getSelections').length);
        // save your data, here just save the current page
        selections = getIdSelections();
        // push or splice the selections if you want to save all data
        // selections
    });
    $table.on('expand-row.bs.table', function(e, index, row, $detail) {
        if (index % 2 == 1) {
            $detail.html('Loading from ajax request...');
            $.get('LICENSE', function(res) {
                $detail.html(res.replace(/\n/g, '<br>'));
            });
        }
    });
 

 

jsp页面table代码

<table id="table" data-toolbar="#toolbar" data-search="true"
            data-show-refresh="true" data-show-toggle="true"
            data-show-columns="true" data-show-export="true"
            data-minimum-count-columns="2" data-show-pagination-switch="true"
            data-pagination="true" data-id-field="id"
            data-page-list="[10, 25, 50, 100, ALL]" data-show-footer="false"
            data-side-pagination="server" data-response-handler="responseHandler">
</table>

 

 

三、后台获取数据，这里用到了动态生成类

 

 @ResponseBody
    @RequestMapping(method = RequestMethod.POST, value = "/customQueryData")
    public String customQueryData(HttpServletRequest request,
            @RequestParam(value = "meetingId", required = true) String meetingId, Model model) {
        String tenantId = request.getSession().getAttribute("tenantId").toString();
        BufferedReader bufr;
        List<Object> list = new ArrayList<Object>();
        JSONObject jsonObject = new JSONObject();
        try {
            bufr = new BufferedReader(new InputStreamReader(request.getInputStream(), "UTF-8"));
            StringBuilder sBuilder = new StringBuilder("");
            String temp = "";
            while ((temp = bufr.readLine()) != null) {
                sBuilder.append(temp);
            }
            String json = sBuilder.toString();
            JSONObject reqJSONObject = JSON.parseObject(json);
            LOGGER.info("请求获取的数据：" + reqJSONObject);
            String offset = reqJSONObject.get("offset") != null ? reqJSONObject.get("offset").toString() : "0";
            String limit = reqJSONObject.get("limit") != null ? reqJSONObject.get("limit").toString() : "100";
            String groupId = reqJSONObject.get("groupId") != null ? reqJSONObject.get("groupId").toString() : "";
            String isAudit = reqJSONObject.get("isAudit") != null ? reqJSONObject.get("isAudit").toString() : "";
            String isSigned = reqJSONObject.get("isSigned") != null ? reqJSONObject.get("isSigned").toString() : "";
            if (StringUtils.isNotEmpty(offset) && StringUtils.isNotEmpty(limit) && StringUtils.isNotEmpty(meetingId)) {
                Login.setTenantId(tenantId);
                Integer incrementId = 1;
                Meeting meeting = new Meeting();
                meeting.setId(meetingId);
                int totalSize = meetingRegistUserService.queryByCondition(meeting, groupId, isAudit, isSigned, null,
                        null, Integer.parseInt(offset), Integer.parseInt(limit), false).size();
                List<MeetingRegistUser> listMeetingRegistUser = meetingRegistUserService
                        .queryByCondition(meeting, groupId, isAudit, isSigned, null, null, Integer.parseInt(offset),
                                Integer.parseInt(limit), true);
                for (MeetingRegistUser meetingRegistUser : listMeetingRegistUser) {
                    // 设置类成员属性
                    Map propertyMap = new HashMap();
                    propertyMap.put("incrementId", Class.forName("java.lang.Integer"));
                    propertyMap.put("id", Class.forName("java.lang.String"));
                    propertyMap.put("name", Class.forName("java.lang.String"));
                    propertyMap.put("telephone", Class.forName("java.lang.String"));
                    propertyMap.put("email", Class.forName("java.lang.String"));
                    propertyMap.put("createTime", Class.forName("java.lang.String"));
                    propertyMap.put("groupId", Class.forName("java.lang.Short"));
                    propertyMap.put("isAudit", Class.forName("java.lang.Short"));
                    propertyMap.put("isSigned", Class.forName("java.lang.Short"));
                    propertyMap.put("isNotified", Class.forName("java.lang.Short"));
                    propertyMap.put("isReminded", Class.forName("java.lang.Short"));
                    //propertyMap.put("extendFields", Class.forName("java.lang.String"));
                    propertyMap.put("comment", Class.forName("java.lang.String"));
                    List<Fields> listFields = JSONObject.parseArray(meetingRegistUser.getCustomFields(), Fields.class);
                    if (null != listFields && listFields.size() > 0) {
                        for (Fields field : listFields) {
                            propertyMap.put(field.getId(), Class.forName("java.lang.String"));
                        }
                    }
                    //LOGGER.info("=====propertyMap=======" + JSONObject.toJSONString(propertyMap));
                    // 生成动态 Bean
                    DynamicBean bean = new DynamicBean(propertyMap);
                    // 给 Bean 设置值
                    bean.setValue("incrementId", Integer.parseInt(offset) + incrementId);
                    bean.setValue("id", meetingRegistUser.getId());
                    bean.setValue("name", meetingRegistUser.getRegistUser().getName());
                    bean.setValue("telephone", meetingRegistUser.getRegistUser().getTelephone());
                    bean.setValue("email", meetingRegistUser.getRegistUser().getEmail());
                    bean.setValue("createTime", meetingRegistUser.getCreateTime() != null ? new DateTime(
                            meetingRegistUser.getCreateTime()).toString("yyyy-MM-dd- HH:mm:ss") : "");
                    bean.setValue("groupId", meetingRegistUser.getGroupid());
                    bean.setValue("isAudit", meetingRegistUser.getIsaudit());
                    bean.setValue("isSigned", meetingRegistUser.getIssigned());
                    bean.setValue("isNotified", meetingRegistUser.getIsnotified());
                    bean.setValue("isReminded", meetingRegistUser.getIsreminded());
                    //bean.setValue("extendFields", meetingRegistUser.getCustomFields());
                    bean.setValue("comment", meetingRegistUser.getComment());
                    if (null != listFields && listFields.size() > 0) {
                        for (Fields field : listFields) {
                            bean.setValue(field.getId().toLowerCase(), field.getValue());
                        }
                    }
                    Object object = bean.getObject();
                    list.add(object);
                    //LOGGER.info("=====object=======" + JSONObject.toJSONString(object));
                    incrementId++;
                }
                jsonObject.put("total", totalSize);
                jsonObject.put("rows", JSONObject.toJSON(list));
                LOGGER.info("query data jsonObject:" + jsonObject.toString());
                return jsonObject.toString();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return jsonObject.toString();
    }

 

 

四、参考官方例子

  1. http://issues.wenzhixin.net.cn/bootstrap-table/

相关参考链接:

  1. http://blog.csdn.net/paincupid/article/details/50946647
  • 大小: 65.4 KB
分享到：
| 天池阿里中间件性能挑战赛
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    bootstrap table的x-editable实现单元格编辑及解决数据为Empty和支持多样式

    同时，还需要引入X-Editable的CSS和JS文件，并调用初始化方法，例如`$('#table').bootstrapTable('editable', { ... })`。 对于“数据为空”（Empty）的问题，这可能是因为表格的数据源中某个字段值为null或者空...

    bootstrap集成table样式的总结

    $('#myTable').bootstrapTable({ columns: [ { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }, { field: 'city', title: '城市' } ], data: [ /* 数据数组 */ ] }); }); ``` 总结，...

    bootstrap table 例子

    $('#table').bootstrapTable({ data: [{ id: 1, name: 'Item 1', price: '$1' }, { id: 2, name: 'Item 2', price: '$2' }] }); }); ``` 2. **主要特性** - **排序**：通过设置`data-field`属性，...

    bootstrap table sum总数量统计实现方法

    $('#myTable').bootstrapTable({ columns: [/* 列定义 */], data: [] }); ``` 总结： 通过以上步骤，我们可以成功地在 Bootstrap Table 中实现总数量统计功能。在实际应用中，可能需要根据具体的需求和数据...

    Bootstrap Table列宽拖动的方法

    总结一下，要在Bootstrap Table中实现列宽拖动功能，需要按照以下步骤操作： 1. 引入Resizable扩展插件以及它的依赖库colResizable。 2. 在HTML的thead元素中为每个列定义data-field和data-width属性。 3. 使用...

    bootstraptable

    总结来说，Bootstrap Table 是一个强大且灵活的前端表格组件，它利用 Bootstrap 的样式，提供了丰富的功能和优秀的用户体验。通过学习和使用这个组件，开发者可以快速构建出具有专业水准的网页表格。

    bootstrap-table和date

    4. **docs**（可能不在提供的压缩包内）：文档目录，包含Bootstrap的官方文档，可以帮助开发者了解每个组件的用法和API。 关于Bootstrap表格，它是Bootstrap框架的一部分，提供了样式化的HTML表格。通过添加特定的...

    bootstrap table表格使用方法详解

    使用 `jQuery` 初始化表格，调用 `bootstrapTable` 函数，并传入一个包含各种配置选项的对象。例如： ```javascript $("#myTable").bootstrapTable({ url: '/BootstrapTable/GetTestData', // 数据源地址 method...

    BootstrapTable+KnockoutJS相结合实现增删改查解决方案（三）两个Viewmodel搞定增删改查

    在本教程的背景设置中，博主已经分享了关于如何使用KnockoutJS和BootstrapTable的基础用法，但之前的应用并没有发挥出MVVM模式的全部潜能。博主希望在即将开展的项目中充分利用KnockoutJS的优势，因此对KnockoutJS与...

    JS表格组件BootstrapTable行内编辑解决方案x-editable

    【JS表格组件BootstrapTable行内编辑解决方案x-editable】 在前端开发中，表格组件是常见的数据展示工具，而BootstrapTable是一款强大的JS表格组件，它提供了丰富的功能，包括行内编辑。行内编辑允许用户直接在表格...

    JS 组件系列之BootstrapTable的treegrid功能

    三、BootstrapTable配置与用法 BootstrapTable的treegrid功能可以通过设置`bootstrap-table`的扩展选项来启用。例如，你可能需要设置`data-toggle="table"`、`data-treegrid`以及`data-show-toggle`等属性。同时，...

    Bootstrap Table使用整理(一)

    Bootstrap Table 是一个基于 Bootstrap 框架的 jQuery 插件，它为网页中的表格提供了丰富的功能，如单选、多选、排序、分页、编辑、导出和过滤。这个插件的设计目标是通过简洁的配置，让开发者能够快速实现复杂的...

    JS组件系列之Bootstrap table表格组件神器【终结篇】

    $table.bootstrapTable('exportFile', { type: 'excel', // 导出类型 filename: 'myData' // 文件名 }); ``` 除了上述特性，Bootstrap Table 还允许用户自定义列的显示与隐藏、配置分页参数、实现服务器端分页和...

    boostrapTable的refresh和refreshOptions区别浅析

    BootstrapTable是一款基于Bootstrap框架的前端数据展示插件，它提供了丰富的功能，如表格排序、分页、筛选等。在实际应用中，我们可能需要动态地更新表格中的数据，这时就涉及到了`refresh`和`refreshOptions`两个...

    基于Bootstrap 和 bootstrapDualListbox的表格动态生成

    例如，通过使用`.table`类，可以快速创建基本的表格样式，而`.table-responsive`类则能使表格在较小的设备上滚动查看。为了动态生成表格，我们需要在JavaScript或jQuery中操作DOM（文档对象模型），根据需要添加或...

    table控件以及用法

    总结，"table控件"在Web开发中扮演着重要角色。从基础的HTML表格到复杂的JavaScript实现，掌握其使用方法和相关工具对于提升开发效率和用户体验至关重要。无论你是初学者还是经验丰富的开发者，不断探索和学习新的...

    Bootstrap离线参考手册

    总结，这个Bootstrap 3离线参考手册是开发者不可或缺的工具，它详细介绍了框架的各种组件和用法，帮助开发者高效地创建响应式、易用的网页界面。无论你是初学者还是经验丰富的开发者，都可以从中受益。

    Bootstrap中datetimepicker使用小结

    如果你希望深入学习Bootstrap，可以参考提供的相关教程，如Bootstrap学习教程、Bootstrap实战教程、Bootstrap Table使用教程以及Bootstrap插件使用教程。这些教程将帮助你掌握Bootstrap的各个方面，包括布局、组件、...

    BootStrap 实战教程 pdf

    通过学习本教程，读者将能够掌握Bootstrap的基本用法，并能独立创建自己的网站页面。 #### 二、基础知识与准备工作 **1. HTML5文档类型声明** 在任何基于Bootstrap的网页中，首先需要定义一个HTML5文档类型，即`...

Magicbox
Global site tag (gtag.js) - Google Analytics