提出问题:

bootstrap-table 可以根据ajax地址load的json数据。这个json数据一般就是数据库中查询的结果,而数据库中存放的数据一般不是用户友好的,比如数据表示一般使用简洁id或者英文,而将数据的具体定义放在其他位置。

举个例子:

表格1: ***,**** ,类型id

表格1数据达到几万行,而数据中,类型id是个数字,类型id的解释意义在其他表格中存放,一共只有三个类型。

如果我们直接载入表格1数据,那么在前端展示中,显示的类型id是一串数字,显然是不友好的。

解决这个问题的办法有以下几种:

1.在客户端定义对类型id的解释,某个id对应某个中文名称,这个对应关系实际就是数据库中的对应关系,但是由于这边类型只有几种,可以在代码中写死,不需要重新查询数据库。

优点:简单容易实现,不占用网络流量

缺点:代码写死,以后存在数据库中类型增删同时需要修改这部分代码。如果这样的代码一多,维护成为一件非常可怕的事情。

2.在服务端就将返回数据替换为显示的格式与意义。这个数据库查询时候直接获取,在服务器里面修改代码就可以实现

优点:客户端直接显示即可,简单

缺点:占用流量变大,一个字节的内容变为多个字节。

3.将类型id这种数据单独使用ajax查询获取数据,在客户端获取对应关系

优点:占用流量小,代码集中,具备自适应性来应对未来的数据改变

缺点:客户端需要增加一个ajax查询,由于该查询是的数据量非常小,也会很快。

综上所述:

我认为第三种方法最好,这个不但可以将表现与具体数据分隔开,使得展示的代码更加集中易于修改。并且占用网络流量也不多。

注意:

请求表现格式的代码不能直接放入data-formatter中,这样做的话,会导致每读一行都会请求表现数据,这个数据可以放在全局变量里面进行复用,或者放在jquery等闭包中。

转载于:https://www.cnblogs.com/yasmi/p/4911053.html

使用bootstrap-table等自动使用ajax地址载入数据的插件的数据设计建议相关推荐

  1. bootstrap table 分页只显示分页不显示总页数等数据

    搜了下没找到解决方案,就用CSS来解决了. 把paginationDetailHAlign:"right",使pagination-detail的class为.pull-right ...

  2. bootstrap table 服务端分页

    bootstrap table分页功能分为前端分页和服务端分页两种,前端分页是一次性把数据全部查询到前端,再在前端页面进行分页,当数据量较少时可以使用前端分页,但当数据量较大时,前端分页就不太适用了, ...

  3. BootStrap Table和Mybatis Plus实现服务端分页

    一.后台java代码(Mybatis Plus分页) (1)Mybatis Plus分页的配置,在mybatis的xml文件中增加如下配置(Mybatis Plus官方文档:http://baomid ...

  4. java导出Excel(POI模式 Ajax下载 Post传参) bootstrap table getVisibleColumns获取显示的列

    工具类 (正式使用) package com.qyj.utils;import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson. ...

  5. bootstrap table通过ajax获取后台数据展示在table

    1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...

  6. bootstrap Table API和一些简单使用方法

    官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回"rows"."& ...

  7. BootStrap Table:表格参数

    官方文档地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 引入BootStrap Table 引入 bootstrap.c ...

  8. Bootstrap Table 中文文档(完整翻译版)

    表格参数: 名称 标签 类型 默认 描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格. classes data-classes String ...

  9. Bootstrap Table API 中文版(完整翻译文档)

    /* * *$('#table').bootstrapTable({}); *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽 *最大可能结合尽可能 ...

最新文章

  1. 【整理】NSTimer使用及注意事项
  2. 目标代码文件、可执行文件和库
  3. Ubuntu下安装vscode c++环境
  4. 深拷贝、浅拷贝以及引用传递和按值传递的区别与联系
  5. uniapp 刷新后数据都没有了_环境温度传感器都没有连接,竟然还会有数据?
  6. 那篇让汤普金斯进入梦境的相对论演讲
  7. Qt工作笔记-qmake和uic(对Qt底层的进一步认识)
  8. 023-数据结构与算法系列
  9. Doc命令行执行php中文乱码问题
  10. python免费教程发布页
  11. VS studio源代码管理辅助工具sourceoffsite使用过程中的错误解决方法
  12. 关于扫码点餐多人实时共享订单的思考
  13. PKG安装包的管理与文件格式分析
  14. PyG搭建GCN实现链接预测
  15. openwrt设置网络共享
  16. 前端漂亮的字体 font-family
  17. Metasploit-模块介绍
  18. MongoDB学习系列 -- 数据库、集合、文档的CURD
  19. 映客2020.12.16一面面经
  20. 美国主机网站建设中的安全性和隐私保护措施

热门文章

  1. 网络知识科普 | 你未必了解的DNS
  2. 微服务架构·基础篇,傻瓜看了都会
  3. 5分钟图解Hbase列式存储
  4. 详解Node.js包的工程目录与NPM包管理器的使用_node.js
  5. Android 面试 - 有关Service的面试题
  6. Android --- 单一控件覆盖其他控件的方法
  7. java调用方法的变量_JAVA类的方法调用和变量(全套)
  8. yum 更新_CentOS7 - 使用yum-cron自动更新软件
  9. 盘点全球最美的15座数据中心
  10. 5G边缘计算与算力网络(PPT)