使用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 ...
随机推荐
- sqlserver三种数据集合运算
2.1 并集运算(UNION) (1)UNION ALL(不删除重复行) Code: 1 SELECT empID,empName,position,degree 2 FROM Employees ...
- code1052 地鼠游戏
贪心算法,从后往前 来自codevs的题解: 我的纠结思考过程:如果每一秒都没有重复的地鼠出现 那么肯定是一个一个挨着打如果有重复的地鼠 那么要考虑打那个更优 当然是选分值最大的 单纯这样想很合理 但 ...
- Ubuntu命令行下安装、卸载、管理软件包的方法
一.Ubuntu中软件安装方法 1.APT方式 (1)普通安装:apt-get install softname1 softname2 -; (2)修复安装:apt-get -f install so ...
- 修复jqgrid setgridparam postdata 的多次查询条件累加
//根据elements查询出的参数个数的不同,而传递不同个数的查询参数 start var elements = node.attributes.text.split(","); ...
- servlet介绍
1.首先说Servlet API:servlet的命名:server+applet Servlet的框架是由两个Java包组成的:javax.servlet与javax.servlet.http. 在 ...
- Spring框架总结(十二)
问题引入: 程序的“事务控制”, 可以用aop实现! 即只需要写一次,运行时候动态植入到业务方法上. 一个业务的成功: 调用的service是执行成功的,意味着service中调用的所有的d ...
- HDU 5977 Garden of Eden (树分治+状态压缩)
题意:给一棵节点数为n,节点种类为k的无根树,问其中有多少种不同的简单路径,可以满足路径上经过所有k种类型的点? 析:对于路径,就是两类,第一种情况,就是跨过根结点,第二种是不跨过根结点,分别讨论就好 ...
- linux 管道与重定向
命令行shell数据流有如下定义: 通过管道和重定向可以控制CLI的数据流
- 关于HTTP协议传输与接收数据的相关内容
第一篇: HTTP请求报文和HTTP响应报文 http://www.cnblogs.com/biyeymyhjob/archive/2012/07/28/2612910.html 第二篇: 深入浅出U ...
- [SIP01]SIP Header Fields里面各字段用途
INVITE sip:bob@biloxi.com SIP/2.0 Via: SIP/2.0/UDP pc33.atlanta.com;branch=z9hG4bK776asdhds Max-Forw ...