提出问题:

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地址载入数据的插件的数据设计建议的更多相关文章

  1. bootstrap table 服务器端分页--ashx+ajax

    1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-T ...

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

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

  3. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  4. 新的表格展示利器 Bootstrap Table

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

  5. 新的表格展示利器 Bootstrap Table Ⅰ

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

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

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

  7. bootstrap table 保留翻页选中数据

    $(function () { $('#exampleTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-al ...

  8. C# Bootstrap table之 分页

    效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...

  9. [转]C# Bootstrap table之 分页

    本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...

随机推荐

  1. Opencv Shi-Tomasi角点检测

    #include <iostream>#include <opencv2/opencv.hpp> using namespace std;using namespace cv; ...

  2. 关于iOS URL缓存机制原理解析

    关于URL缓存机制中   利用request对象判断是否缓存   其实request是否相等的判断依据是URLString是否相等

  3. Ubuntu Phone开箱上手

    在昨晚举行的发布会上Canonical和硬件厂商BQ进行合作,推出了首款面向消费市场的Ubuntu手机--Aquaris E4.5,带来了与常见的iPhone和Android机完全不同的操作体验,设备 ...

  4. Linux虚拟机安装配置手册(版本:7.3)

    一.准备 ①.安装VMWare 安装步骤省略.我这里使用的版本如下: ②.Linux系统镜像文件: 建议使用最新版本的Linux系统.有些组件对系统内核版本要求比较高,有可能会产生错误. 我这里使用的 ...

  5. mybatis常用方法总结

    mybatis的强大特性之一就是动态SQL.我们在写复杂查询的时候,会发现复杂查询包括了各种各样的判断,我们很难一鼓作气的写出完美的查询.动态SQL语句可以帮助我们拼接不同的SQL语句,而已让我们的代 ...

  6. CENTOS7 YUM安装BOOST1.53(静态版本)

    按照之前的博文更新163的源之后,执行: yum install boost-static.i686 yum install boost-devel.i686 yum install boost-do ...

  7. Python - excel 详解

    安装 pip install xlrd        # 读xlspip install xlwt     # 写xlspip install xlutils     # 改写xls 读取 Excel ...

  8. 为啥final类型的map或者arraylist可以修改数据 而final类型的String变量不可以修改数据呢

    比如 final   Map  map =new  HashMap();    可以往map里put数据final   List  list =new  ArrayList();   可以往list里 ...

  9. 【转】彻底理解ThreadLocal

    ThreadLocal是什么 早在JDK 1.2的版本中就提供Java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地 ...

  10. C# SendKeys用法

    功能:将一个或多个按键消息发送到活动窗口,就如同在键盘上进行输入一样. 语法:SendKeys.Send(string keys);SendKeys.SendWait(string keys); 说明 ...