使用bootstrap-table等自动使用ajax地址载入数据的插件的数据设计建议
提出问题:
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等闭包中。
使用bootstrap-table等自动使用ajax地址载入数据的插件的数据设计建议的更多相关文章
- bootstrap table 服务器端分页--ashx+ajax
1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-T ...
- bootstrap table 分页只显示分页不显示总页数等数据
搜了下没找到解决方案,就用CSS来解决了. 把paginationDetailHAlign:"right",使pagination-detail的class为.pull-right ...
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- 新的表格展示利器 Bootstrap Table
1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...
- 新的表格展示利器 Bootstrap Table Ⅰ
1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...
- BootStrap Table和Mybatis Plus实现服务端分页
一.后台java代码(Mybatis Plus分页) (1)Mybatis Plus分页的配置,在mybatis的xml文件中增加如下配置(Mybatis Plus官方文档:http://baomid ...
- bootstrap table 保留翻页选中数据
$(function () { $('#exampleTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-al ...
- C# Bootstrap table之 分页
效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...
- [转]C# Bootstrap table之 分页
本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...
随机推荐
- XIb中使用tableview报错UIViewAlertForUnsatisfiableConstraints
1.使用断点工具并不能找出错误,最后仔细看了下报错信息 2.报错信息 [LayoutConstraints] Unable to simultaneously satisfy constraints. ...
- 通过snmp监控linux
一.linux snmpd安装 yum install -y net-snmp net-snmp-utils 二.snmp的配置(vim /etc/snmp/snmpd.conf) com2sec n ...
- HttpMessageConverter和ContentNegotiatingViewResolver
HttpMessageConverter 在SpringMVC中,可以使用@RequestBody和@ResponseBody两个注解,分别完成请求报文到对象和对象到响应报文的转换,HttpMessa ...
- 轻松搭建持续集成工具jenkins
1.Jenkins介绍1)什么是持续集成随着软件开发复杂度的不断提高,团队开发成员间如何更好地协同工作以确保软件开发的质量已经慢慢成为开发过程中不可回避的问题.尤其是近些年来,敏捷(Agile) 在软 ...
- Go 网络编程笔记
前言: 本文是学习<<go语言程序设计>> -- 清华大学出版社(王鹏 编著) 的2014年1月第一版 做的一些笔记 , 如有侵权, 请告知笔者, 将在24小时内删除, 转载请 ...
- maven添加阿里仓库
1.修改settings.xml 在maven的settings.xml 文件里配置mirrors的子节点,添加如下mirror <mirror> <id>nexus-aliy ...
- 【转载】redis.conf文件详解
转载地址:http://blog.csdn.net/zhutulang/article/details/51969760 Redis.conf文件可以在github上查看,下面是我整理的其中的配置项( ...
- WordPaster2项目变化
1.1.1. jsp 1.引入json2.min.js 2.控件名称改为WordPasterManager 3.文件保存逻辑更新,直接使用控件生成的文件名称 1.1.2. asp.net 1.引入js ...
- after modifying system headers, please delete the module cache at
5down votefavorite 2 I don't know how I modified a iOS SDK file, but Xcode say I did. Here is what t ...
- Arch Linux freemind中文乱码
原因:jre没有可用的中文字体 解决方法: (1) 安装中文字体,例如文泉驿微黑 pacman -S wqy-microhei (2) jre字体目录下建立fallback,并链接中文字体作为后备字体 ...