Bootstrap table的后台数据的获取

Bootstrap table的后台数据的获取

最近做了一个项目，牵涉到bootstrap table的使用，但是由于是第一次了解这个插件，所以对这个插件的后台数据获取有一些不了解，在网上多方查找资料后，最终才弄出来，在这里也记录一下操作流程，就当做个笔记了。

代码前提：
- 前端的bootstrap table的代码已经写好，只需要加入后台，前端代码就不再自习介绍，只是说一些简单的配置。
- 使用的是struts2框架。

现在正是开始：
由于我负责的功能是将数据库里的表单信息，通过bootstrap table传到页面上显示。所以首先考虑的就是把值传到前端。
而且我们的项目定位的是服务器，所以按照服务器的标准来配置。

---

首先我们先放出插件的主要代码：

            url : 'firmSoftTable.action', // 请求后台的URL（*）            method : 'post', // 请求方式（*）post/get            contentType: "application/x-www-form-urlencoded",//post请求的话就加上这个句话            toolbar : '#toolbar', // 工具按钮用哪个容器            striped : true, // 是否显示行间隔色            cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）            pagination : true, // 是否显示分页（*）            sortable : false, // 是否启用排序            sortOrder : "asc", // 排序方式            queryParams : oTableInit.queryParams,// 传递参数（*）            sidePagination : "server", // 分页方式：client客户端分页，server服务端分页（*）            pageNumber : 1, // 初始化加载第一页，默认第一页            pageSize : 10, // 每页的记录行数（*）            pageList : [ 10, 25, 50, 100 ], // 可供选择的每页的行数（*）            search : false, // 是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大            strictSearch : true,            showColumns : false, // 是否显示所有的列            showRefresh : false, // 是否显示刷新按钮            minimumCountColumns :2, // 最少允许的列数            clickToSelect : true, // 是否启用点击选中行            height : "",// 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度            uniqueId : "ID", // 每一行的唯一标识，一般为主键列            showToggle : false, // 是否显示详细视图和列表视图的切换按钮            cardView : false, // 是否显示详细视图            detailView : false, // 是否显示父子表            locale: "zh-CN", //中文支持            queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的                      return {//这里的params是table提供的                          offset: params.offset,//从数据库第几条记录开始                          limit: params.limit//找多少条                      };                  },  

其中：我们使用的是post请求方式，所以必须加上下面这句话，如果不加的话，后台可能会接受不到数据，具体的后面再介绍。

contentType: "application/x-www-form-urlencoded",

重点来了：我们怎样连接到后台的action？
在代码里面有个url的属性，而url后面的值就是要使用的action的名字。我的路径如下：

url : 'firmSoftTable.action', // 请求后台的URL（*）

---

由于bootstrap插件只接受JSON数据，所以我们需要重新配置一下struts2的xml文件：

<package name="firm-table" extends="json-default"  namespace="/" >        <action name="firmSoftTable" method="firmAdminSoft" class="firmAdminAction">            <result name="success" type="json">                <param name="root">returndata</param>            </result>        </action></package>

因为后台传回的是JSON数据，不能通过常规的配置来进行传输，所以我们要重新创建一个package，然后继承只“json-default”。然后在返回类型中写上type=”json”。如果常规的package直接写返回类型为json的话会报错。然后param的name为root，原因是root是表示返回对象的层级为根部。所以一般我们都写root。

---

然后回到后台的代码：
我们首先将数据库的数据拿出来，放在一个List的列表里，并且将每个对象设为Map类型。怎样取数据这就不罗列了。
由于我们的对象是服务端，所以我们会将数据分页，而分页的前端代码上面已经写出，值得注意的是：

queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的                      return {//这里的params是table提供的                          offset: params.offset,//从数据库第几条记录开始                          limit: params.limit//找多少条                      };                  },

这一段代码，由于我们需要将数据分布读出来，所以我们就需要前端和后端进行协商，怎么读数据，所以这里就是关键。

• offset：表示已经读了多少条数据。
• limit：表示分页后，每页的信息个数。

---

我们需要将这两个数据传回后台。然后进行接收，在这里如果不加上前面的contentType这句话，是接收不到数据的。
下面是整个后台所有的信息：

public String firmAdminSoft() throws UnsupportedEncodingException{        System.out.println("------------查看所有的软件信息------------");        HttpServletRequest request = ServletActionContext.getRequest();        HttpSession session = request.getSession();        int id=(int) session.getAttribute("id");// 登录厂商        //获取一页显示的个数        String limit1=request.getParameter("limit");        int limit=Integer.parseInt(limit1);        //获取已经显示的个数，然后除以一页的个数就是页数        String offset1=request.getParameter("offset");        int offset=Integer.parseInt(offset1)/limit;        //初始化最大的读取个数        int max=0;        System.out.println("已经进来了...");        System.out.println("页数为"+offset);        System.out.println("页面大小为"+limit);        //获取数据库中所有的数据        List <SoftInfo>allsoft=this.firmAdminService.firmAdminSoft(id); //      session.setAttribute("allsoft", allsoft);        if(allsoft!=null){            System.out.println("成功取得"+allsoft.size()+"条数据...");        }else{            System.out.println("查询失败...");        }//      System.out.println("softInfo"+allsoft);        JSONArray arr=new JSONArray();        //判定最大的读取个数        if(offset*limit+limit<=allsoft.size()){            max=offset*limit+limit;        }else{            max=allsoft.size();        }        //读取数据        for(int i=offset*limit;i<max;i++){            JSONObject ob=new JSONObject();            //将单独的数据装进json数据            Map map=(Map)allsoft.get(i);            ob.put("softid", map.get("softid"));            ob.put("name", map.get("name"));            ob.put("type", map.get("type"));            ob.put("date", map.get("date").toString());            ob.put("serial", map.get("serial"));            ob.put("username", map.get("username"));            ob.put("state", map.get("state"));            //装进数组            arr.add(ob);        }        JSONObject ob=new JSONObject();        //放置数据        ob.put("rows", arr);        //放置所有的数据个数        ob.put("total", allsoft.size());        String returndata=ob.toString();        System.out.println("成功转换"+returndata.length()+"大小的数据...");        //转换编码        ServletActionContext.getResponse().setCharacterEncoding("UTF-8");        PrintWriter out;        try {            out=ServletActionContext.getResponse().getWriter();            out.println(returndata);            out.flush();             out.close();         } catch (IOException e) {            e.printStackTrace();        }          return "success";    }

解释一下这些代码内容：

• 首先我们先接收前端传回的已经读取的信息个数和每页信息个数。
  然后从数据库中取得数据。通过计算，来求得应该从多少条数据取到多少条数据，也就是从offset*limit——max的个数。这里也可以在开始的时候不除以limit，直接最小值就是offset。

• 在代码中，会看到，我们将List表中所有的对象全部拿出来，单独放在JSONObject中，是因为在取对象的时候，我们已经将对象转化为Map类型，而在对象中我们有一个属性date的类型为Date，如果不通过toString的方式，直接转化为JSONObject的话，前端会出现一大串的数字，而不是时间。
  当然如果没有这种特殊需求的话，可以直接将List表单转化为JSONArray数组。然后再放进JSONObject中进行返回。
  服务端的注意读取数据的个数，客户端的话就不需要注意了，直接读取的最大值就是数据的总数。

• 我们将所有数据的JSON数组放进一个JSONObject中后，需要主要的是要加入rows和total字段，rows表示传回的数据，value也就是jsonArray数组，然后total表示所有数据的总数，注意，是所有的数据的总数，不是单次传回的数据的总数，否则不能翻页。最后将总的JSONObject toString就好了。注意toString的变量值的名字要和xml里面result的里面的值要一样，对应。

• 我们主要到还有一条语句是
  ServletActionContext.getResponse().setCharacterEncoding(“UTF-8”);
  这条语句的作用是将中文进行编码，之前我在返回值的时候，中文全部是？？？？，所以就加了这句话，然后就OK了。

• 最后的步骤：PrintWriter out;
  将要返回的值returndata进行out.println就OK了。

我们来看一下效果：

---

所有的步骤也算是完了，如果还有什么疑惑的地方请大家在下面评论，知道的肯定会解答。错误的地方，请大家指出来，共同进步，谢谢。