页面生成表格方式总结

@(JAVA开发)

页面生成表格方式总结

在正常的企业级开发中，无可避免的我们总会碰到各种各样的表格，尤其是各种管理系统，而将后台传输过来的数据数据以表格的形式展现出来也就是一个不可避免的问题了。
在这里我简单的介绍一下自己遇到的几种生成表格的方式。

直接拼凑

这个方法很简单，原理就是直接在JS的each 循环里面把需要展现出来的dom和数据一起拼起来。耗时耗力不说，还很容易出错。代码和下面类似，如果遇到需要修改的地方，更是很难以维护。

bb.append( "<tr><td bgcolor='#FFFFCC'>"+ j +"</td><td bgcolor='#FFFFCC' ><a href='#' onclick='return <span style="color: #ff0000;">showNewsContent("+totalString[i].newsid +")'>"</span> + totalString[i].newsname + "</a></td>"                 + "<td bgcolor='#FFFFCC'>" + totalString[i].newsinputtime + "</td>"   + "</tr>");  

这一点有点类似servlet 在前端输出那些html 元素，所以被jsp等基本取代了。

jquery datatable

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
分页，即时搜索和排序 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API

datatable 官网

直接上代码 表格结构如下图

<div class= "box-content">                <table id= "roleTab" class ="table table-striped table-bordered" align= "center">                     <thead>                          <tr>                               <th >角色编号 </th>                               <th >角色姓名 </th>                               <th >角色类型 </th>                               <th >生效时间 </th>                               <th >失效时间 </th>                               <th >角色状态 </th>                               <th >角色标记 </th>                               <th >操作用户 </th>                               <th >操作时间 </th>                               <th >角色操作 </th>                          </tr>                          <tbody id= "roleTbaleTH">                          </tbody>                     </thead>                </table>           </div>

接下来是js方法

function getDateTbale(){  $( "#roleTab")..DataTable({ ajax: {       url: "<%=basePath %>rest/role/getAllRoleData",// 跳转到 action      type : 'post',          cache : false,          async : false,          dataType : 'json' }, "autoWidth" : false, //禁止自动计算列宽 serverSide: true,//分页，取数据等等的都放到服务端去 processing: false,//载入数据的时候是否显示“载入中” ordering: false,//排序操作在服务端进行，所以可以关了。 searching: false,//取消模糊查询 bDestory: true,//是否可以销毁 bSort: false, //排序功能 columns: [               { data: "roleId" },//这个字段对应json返回数据里面的字段               { data: "roleName" },               { data: "roleType" },               { data: "effTime" },               { data: "expTime" },               { data: "status" },               { data: "remark" },               { data: "operStaff" },               { data: "operTime" },               { data: "as" },           ],           "columnDefs" : [//这个是对某一列的附加操作。targets代表第几个列 从0开始，具体参数去找API 并且c代表data                          {                              "targets": [9],                              "data": "id" ,                              render: function (a, b, c, d) {                                  var context ="<input type='button' class='btn btn-info btn-sm' value='修改 ' onclick='uppTable(\""+ c.roleId+ "\")'>"                                  + "<input type='button' class='btn btn-danger btn-sm' value='删除' onclick='delTable(\""+ c.roleId+ "\")'>"                                   + "<input type='button' class='btn btn-warning btn-sm' value='授权' onclick='getSelectId(\""+c.roleId+ "\")'>" ;                                  return context;//代表某一列填充的数据，我这里面写了几个按钮。                              }                          },                          {                              "targets": [3],                              "data": "id" ,                              render: function (a, b, c, d) {                                         if(c.effTime!="" &&c.effTime!=null){ return getLocalTime(c.effTime);}                                        else {return "" ;}                              }                          },                          {                              "targets": [4],                              "data": "id" ,                              render: function (a, b, c, d) {                                         if(c.expTime!="" &&c.expTime!=null){ return getLocalTime(c.expTime);}                                        else {return "" ;}                              }                          }                      ],                      "language": {                          "processing" : "载入中请稍后",//处理页面数据的时候的显示                          "lengthMenu" : "_MENU_ 条记录每页",                          "zeroRecords" : "没有找到记录",                          "info": "显示第 _START_ - _END_ 项(共计 _TOTAL_ 项)",                          "infoEmpty" : "无记录",                          "infoFiltered" : "(从 _MAX_ 条记录过滤)",                          "paginate": {                              "previous": "上一页" ,                              "next":  "下一页"                          }                      },                      "sPaginationType" : "bootstrap",                      "dom": "<'row'<'#mytool.col-md-6'><'col-md-6'f>r>" +                              "t" +                              "<'row'<'col-md-2'i><'col-md-10'l><'col-md-12 center-text'p>>"  });

}

从这些中可以看出，columns 对应了表格中相应的字段，再也无需手工拼接表格，只要用返回data对应好表格中的显示字段，就可以显示出了表格的数据。这一点就是很方便的。

那么还有一个很实际的问题就是，需要对某些特殊的字段进行处理的时候，比如，这一列是操作列表，比如数据库存储的字段是int 而页面显示需要显示的是其对应的意义。所以就用到了其columnDefs 对特殊的列进行处理。具体用法看上面的代码和官网的API .这样就满足了大部分的表格。

而datatable 中是带有分页插件的，这一部分我会在分页插件的总结中提到。

总体来说，datatable 很强大，在不考虑其风格而注重功能的应用中是不错的选择。

接下来就是功能更加灵活不仅仅局限在表格的handlebar

handlebars

官网

handlebars 一个语义模板库，通过对view和data的分离来快速构建web模板。它采用”Logic-less template”（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译.

简单的说，就是你可以在htmi 页面里面写好一段js代码，这里面就是模板，里面有数据的表达式可以填充进去需要从后台动态获取的数据，这样方便的动态的生成页面内容。

还是上代码。

首先是html部分

<script id="content-template" type="text/x-handlebars-template">            {{#each rows}}                        <tr>             <td><a href="{{detailUrl}}" class="blue-label" >{{name}}</a></td>             <td>{{mobileNo}}</td>             <td>{{compName}}</td>             <td>{{deptName}}</td>             <td>{{loginId}}</td>             <td>{{transformat status}}</td>             <td>{{roleNames}}</td>               <td>                 <a href="{{updateUrl}}" class="blue-label" >{{transModify status}}</a>                 <a href="javascript:void(0);" class="blue-label single-status-link"  data-status="{{status}}"  data-loginid="{{loginId}}" data-ajax-request-url="<%= this.getServletContext().getContextPath() %>/rest/user/changePortalUserStatusOnLoginId ">{{transSwitch status}}</a>                 <%-- <a href="javascript:void(0);" class="blue-label sinale-password-link"   data-loginid="{{loginId}}"  data-ajax-request-url="<%= this.getServletContext().getContextPath() %>/rest/user/initializationPortalPwd?loginId={{loginId}} ">{{transReset status}}</a> --%>                 <a href="javascript:void(0);" class="single-licensed-link   blue-label impower-btn" data-toggle="modal" data-loginid="{{loginId}}" data-target="#acct-licensed-modal" data-ajax-request-url="<%= this.getServletContext().getContextPath() %>/rest/user/selectRolesAndPortalUserRolesByLoginId">{{transAuth status}}</a>              </td>            </tr>             {{/each}}        </script>

简单的说，这一段都是一段js，也就是说在页面加载的时候如果不被调用是不会显示出来的。
下面这一段是要填充的表格，很明显内容是要填充到body部分。

 <!--数据表格-->        <div class="datatable-wrapper">            <table class="datatable" id="acct-list-dtb" data-ajax-request-url=" <c:url value="/rest/user/getPortalUserList"/>">                <thead>                <tr>                    <th width="10%">姓名</th>                    <th width="13%">手机号码</th>                    <th width="11%">公司</th>                    <th width="11%">部门</th>                    <th width="10%">登陆账号(工号)</th>                    <th width="10%">状态</th>                    <th width="13%">角色</th>                    <th width="22%">操作</th>                </tr>                </thead>                <tbody id="content">                </tbody>            </table>        </div>

那么接下来就是js部分

UserManagement.prototype.renderUserManagementContent = function(pageIndex){        $.ajax({            url: $acctListDtb.data('ajax-request-url'),            type: 'POST',            data: queryConds,            dataType: 'json'        }).done(function (data) {        }).always(function(data){            var datas = {                rows: data.data,                totalRecords:data.recordsTotal,            };           // var pageIndex = pno;//索引页            var totalRecords = datas.totalRecords;//总记录数            var total = Math.ceil(totalRecords/PAGE_RECOREDS);//总页数            Handlebars.registerHelper("transformat",function(value){                            if(value==0){                              return "停用";                            } if(value==1){                              return "启用";                            }                            if(value==2){                              return "锁定";                            }                          });            //拼接DOM            $content.handlebars($contentTemplate, datas, 'html');        });    };

首先页面发送请求，获取数据，然后handlebars 就会自动根据数据中的字段匹配上，页面{{mobileNo}}这样类似的数据。填充上。

content.handlebars(contentTemplate, datas, ‘html’);

方法里面的html指的是填充方式，datats 指的是需要填充的数据。

那么问题来了，需要特殊处理某一个列怎么办呢？

Handlebars.registerHelper

这样就是注册一个方法，在我的代码里面有例子，{{transformat status}}
这个transformat 指代的就是注册的函数，后面的表示传入的参数，根据相应的注册方法，返回处理后的结果在页面上。

具体的就请参考API。