使用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 ...
随机推荐
- spring aop两种配置方式
基于注解的Spring AOP开发 简单案例快速入门 定义目标类接口和实现类 /** * Created by zejian on 2017/2/19.*/ //接口类 public interfac ...
- SliceBox
SliceBox相当于一个轮播图插件,只不过是3D的. 先来查看它能实现的效果: 官网:http://tympanus.net/codrops/2011/09/05/slicebox-3d-image ...
- Ubuntu命令行下安装、卸载、管理软件包的方法
一.Ubuntu中软件安装方法 1.APT方式 (1)普通安装:apt-get install softname1 softname2 -; (2)修复安装:apt-get -f install so ...
- Perl 学习笔记-输入输出
1.读取标准输入<STDIN>(行输入操作=> 读取一行直到换行符) chomp($line = <STDIN>); # 读取一行并去掉最后的换行符(不会自动去掉) pr ...
- thinkphp+memcache缓存例子
public function dailyRelays() { $history = I('post.history'); $da = new \Home\Model\DailyrelayModel( ...
- 编写高质量代码改善C#程序的157个建议——建议120:为程序集指定强名称
建议120:为程序集指定强名称 虽然强名称在设计之初有防止被未授权的第三方软件非法执行程序的作用,但是因为它的破解方法并不难,所以现在强名称更多的意义在于它可以避免出现“DLL HELL”现象. “D ...
- 【转载】python计算文件的行数和读取某一行内容的实现方法
一.计算文件的行数 最简单的办法是把文件读入一个大的列表中,然后统计列表的长度.如果文件的路径是以参数的形式filepath传递的,那么只用一行代码就可以完成我们的需求了: count = len(o ...
- Spring Cache介绍和使用
Spring Cache 缓存是实际工作中非经常常使用的一种提高性能的方法, 我们会在很多场景下来使用缓存. 本文通过一个简单的样例进行展开,通过对照我们原来的自己定义缓存和 spring 的基于凝视 ...
- Linux系统优化及状态监控
1.查看系统进程命令 top 进入后可按s 加时间,指定多长时间刷新一次 2.查看cpu信息 cat /proc/cpuinfo 3.查看内存信息 cat /proc/meminfo 4.清理内存:主 ...
- Linq聚合操作之Aggregate,Count,Sum,Distinct源码分析
Linq聚合操作之Aggregate,Count,Sum,Distinct源码分析 一:Linq的聚合运算 1. 常见的聚合运算:Aggregate,Count, Sum, Distinct,Max, ...