当前位置: 首页 > news >正文

[转]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);

相关文章:

  • vue系列自定义指令(三)
  • 源码安装Nginx以及用systemctl管理
  • 以实例说明微服务拆分(以SpringCloud+Gradle)
  • ELK
  • python 小数据池,is and ==,decode ,encode
  • 牛客网NOIP赛前集训营-普及组(第一场)
  • Centos 7 超简单yum源安装MongoDB
  • 这可能是把ZooKeeper概念讲的最清楚的一篇文章
  • 零基础怎样快速学习web前端?
  • 使用SecureCRT的SFTP在WINDOWS与LINUX之间传输文件
  • Elastic+logstash+filebeat做Nginx日志分析
  • Python全栈 Web(JavaScript DOM树、DOM对象、BOM对象)
  • 分布式事务柔性事务解决方案:可靠消息最终一致性(异步确保型) —— 三、生产者实战...
  • MVC过滤器详解
  • 利用ZYNQ SOC快速打开算法验证通路(6)——利用AXI总线实时配置sysGen子系统
  • canvas 高仿 Apple Watch 表盘
  • CODING 缺陷管理功能正式开始公测
  • gitlab-ci配置详解(一)
  • SAP云平台运行环境Cloud Foundry和Neo的区别
  • SpriteKit 技巧之添加背景图片
  • Stream流与Lambda表达式(三) 静态工厂类Collectors
  • Tornado学习笔记(1)
  • XForms - 更强大的Form
  • 百度小程序遇到的问题
  • 工作踩坑系列——https访问遇到“已阻止载入混合活动内容”
  • 买一台 iPhone X,还是创建一家未来的独角兽?
  • 如何使用Mybatis第三方插件--PageHelper实现分页操作
  • 双管齐下,VMware的容器新战略
  • 深度学习之轻量级神经网络在TWS蓝牙音频处理器上的部署
  • [地铁译]使用SSD缓存应用数据——Moneta项目: 低成本优化的下一代EVCache ...
  • python最赚钱的4个方向,你最心动的是哪个?
  • shell使用lftp连接ftp和sftp,并可以指定私钥
  • ​​快速排序(四)——挖坑法,前后指针法与非递归
  • ###51单片机学习(2)-----如何通过C语言运用延时函数设计LED流水灯
  • #include<初见C语言之指针(5)>
  • #Linux杂记--将Python3的源码编译为.so文件方法与Linux环境下的交叉编译方法
  • (C语言)strcpy与strcpy详解,与模拟实现
  • (env: Windows,mp,1.06.2308310; lib: 3.2.4) uniapp微信小程序
  • (LNMP) How To Install Linux, nginx, MySQL, PHP
  • (转)我也是一只IT小小鸟
  • **登录+JWT+异常处理+拦截器+ThreadLocal-开发思想与代码实现**
  • .describe() python_Python-Win32com-Excel
  • .net core 连接数据库,通过数据库生成Modell
  • .NET Core、DNX、DNU、DNVM、MVC6学习资料
  • .Net 访问电子邮箱-LumiSoft.Net,好用
  • .NET 解决重复提交问题
  • .net打印*三角形
  • .NET大文件上传知识整理
  • .Net接口调试与案例
  • .Net中间语言BeforeFieldInit
  • [ C++ ] template 模板进阶 (特化,分离编译)
  • [ vulhub漏洞复现篇 ] Django SQL注入漏洞复现 CVE-2021-35042
  • []Telit UC864E 拨号上网
  • [ACTF2020 新生赛]Include
  • [Android] 修改设备访问权限