zoukankan      html  css  js  c++  java
  • [转]bootstrap table本地数据使用方法

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

    data对应columns进行组合

     var columns = [
                {
                    field: 'fid',
                    title: '编号',
                    align: 'center',
                    halign: 'center',
                    valign: 'middle',
                     '50%'
                }, {
                    field: 'realval',
                    title: '施工状态',
                    formatter: function (index, row) {
                        var d = row['realval'];
                        if (d == 1.0) {
                            return '完工'
                        }
                        return '未完工';
                    },
                    align: 'center',
                    halign: 'center',
                    valign: 'middle',
                     '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);
    
  • 相关阅读:
    js简单排序
    js希尔排序
    js直接插入排序
    大数运算
    IOC和AOP的理解 (持续更新)
    频发事件的缓存技巧
    执行上下文深入解析(Execution Context)
    二分
    HDU 3790 最短路径问题 (双重权值)
    浅谈Targan算法
  • 原文地址:https://www.cnblogs.com/dirgo/p/9602848.html
Copyright © 2011-2022 走看看