[转]bootstrap table本地数据使用方法

原文地址:http://www.giserdqy.com/language/h5/bootstrap/1136

data对应columns进行组合

 var columns = [
            {
                field: 'fid',
                title: '编号',
                align: 'center',
                halign: 'center',
                valign: 'middle',
                width: '50%'
            }, {
                field: 'realval',
                title: '施工状态',
                formatter: function (index, row) {
                    var d = row['realval'];
                    if (d == 1.0) {
                        return '完工'
                    }
                    return '未完工';
                },
                align: 'center',
                halign: 'center',
                valign: 'middle',
                width: '50%'
            }
        ];
$('#table').bootstrapTable('destroy');
        $('#table').bootstrapTable({
            data: data,
            classes: 'table table-hover',
            //height: 400,
            //url: queryUrl,                      //请求后台的URL(*)
            //method: 'GET',                      //请求方式(*)
            //toolbar: '#toolbar',              //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            //cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            //pagination: true,                   //是否显示分页(*)
            //sortable: true,                     //是否启用排序
            //sortOrder: "asc",                   //排序方式
            //sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
            //pageNumber: 1,                      //初始化加载第一页,默认第一页,并记录
            //pageSize: rows,                     //每页的记录行数(*)
            //pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
            search: false,                      //是否显示表格搜索
            strictSearch: false,
            showColumns: false,                  //是否显示所有的列(选择显示的列)
            //showRefresh: true,                  //是否显示刷新按钮
            //minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            uniqueId: "fid",                     //每一行的唯一标识,一般为主键列
            showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            //得到查询的参数
            //queryParams: function (params) {
            //    //这里的键的名字和控制器的变量名必须一致,这边改动,控制器也需要改成一样的
            //    var temp = {
            //        rows: params.limit,                         //页面大小
            //        page: (params.offset / params.limit) + 1,   //页码
            //        sort: params.sort,      //排序列名
            //        sortOrder: params.order //排位命令(desc,asc)
            //    };
            //    return temp;
            //},
            columns: columns,
            onLoadSuccess: function () {
            },
            onLoadError: function () {
                showTips("数据加载失败!");
            },
            onClickRow: function (row, $element) {
                return;
                var featureid = row.fid;
                var realval = row.realval;
                if (realval == 1) {
                    realval = 0;
                } else {
                    realval = 1;
                }
                updatePlanVal(featureid, realval);
            },
            onDblClickRow: function (row, $element) {
                var id = row.ID;
                EditViewById(id, 'view');
            }
        });
        $('#table').on('post-body.bs.table', function (e) {//渲染完成,重新设置高度
            var h = $('#table').height();
            if (h > 500) {
                $('#table').bootstrapTable('resetView', { 'height': 300 });
            }
        });

###获取bootstraptable数据

 var data = $('#table').bootstrapTable('getData');

###重新设置bootstraptable数据

$('#table').bootstrapTable('load', newData);
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
BootstrapTable是一个基于Bootstrap的可扩展表格插件,用于展示和操作数据。它提供了丰富的功能和样式,以简化开发者对表格数据的交互操作。 BootstrapTable数据交互主要涉及以下几个方面: 1. 数据加载:通过设置数据源,可以从服务器端或本地加载数据。可以通过URLJSON、对象数组等方式来加载数据数据加载完成后,BootstrapTable会将数据展示在表格中。 2. 分页功能:BootstrapTable提供了分页功能,可以通过设置每页显示的行数、当前页码等参数来控制分页效果。可以实现翻页,快速定位到指定页码等功能。 3. 排序功能:可以通过设置sortable属性来启用列排序功能。用户可以点击表头来进行升序或降序排序,方便快速查找和筛选数据。 4. 搜索功能:可以通过设置search属性来启用搜索功能。用户可以通过输入关键词来搜索表格数据,只显示包含该关键词的行数据,方便数据的查找和筛选。 5. 编辑功能:BootstrapTable提供了编辑功能,允许用户对表格中的数据进行修改。可以通过设置editable属性来启用编辑功能,用户可以双击单元格进行编辑,并将修改后的数据提交到服务器端或本地保存。 6. 删除功能:可以通过设置deleteRow方法来删除表格中指定的行数据。用户可以选择一行或多行进行删除操作,并将删除的数据从表格中移除。 7. 增加功能:可以通过设置addRow方法来添加新的行数据。用户可以通过填写表格中的空白行,将新的数据添加到表格中。 总而言之,BootstrapTable通过提供丰富的功能和样式,简化了开发者的数据交互操作。无论是数据加载、分页、排序、搜索、编辑、删除还是增加功能,都可以通过简单的配置和调用方法来实现,提高了开发效率和用户体验。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值