使用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 ...
随机推荐
- linux系统中的单引号和双引号
一.为什么用quoting 前面说到,命令行在内容上主要由literal(一般文字)和meta(元字符)组成,而meta又由IFS.CR和其他字符组成(如=,$, > 等),通常这些原元字符都有 ...
- 访问tomcat出现java.lang.IllegalStateException No output folder错误解决方法
访问tomcat出现java.lang.IllegalStateException: No output folder错误解决方法 问题:tomcat分为安装版和解压缩版,解压缩版如果解压到安装盘,在 ...
- 【原创】cython and python for kenlm
未经允许不可转载 Kenlm相关知识 Kenlm下载地址 kenlm中文版本训练语言模型 如何使用kenlm训练出来的模型C++版本 关于Kenlm模块的使用及C++源码说明 加载Kenlm模块命令 ...
- hra控件自动绑定
1.前台js代码 $.ajax({ type: "post", url: 'AlmMarketScenarioDetailManage.aspx?_method=queryPane ...
- Java中比较容易混淆的知识点
1. equals() 和 == 运算符 - equals是方法, 而==是运算符(当然也可以说是广义上的方法, 或者最终都是调用方法). - equals() 是从Object类中继承来的, ...
- CodeForces 342A Xenia and Divisors (水题)
题意:给定 n 个数(小于等于7),让你把它分成 m 组,每组有三个数,且满足,a < b < c,并且 a 能整除 b,b 能整除 c. 析:对于这个题,因为题目说了是不大于7的,那么一 ...
- Word2013文章如何直接发布到CSDN博客
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- 编写高质量代码改善C#程序的157个建议——建议134:有条件地使用前缀
建议134:有条件地使用前缀 在.NET的设计规范中,不建议使用前缀.但是,即便是微软自己依然广泛的使用这前缀. 最典型的前缀是m_,这种命名一方面是考虑到历史沿革中的习惯问题,另一方面也许我们确实有 ...
- SOAP协议初级指南 (一)
SOAP(Simple Object Access Protocal) 技术有助于实现大量异构程序和平台之间的互操作性,从而使存在的应用能够被广泛的用户所访问.SOAP是把成熟的基于HTTP的WEB技 ...
- C++ 调用C++写的类库的2种方法之一(隐式链接)
一:创建C++ DLL类库,名称:Dll1 1.Dll1.h /*#ifndef Dll_API #else #define Dll_API _declspec(dllimport) #endif * ...