Table急速完美搭建后台管理系统,Table快速完美搭

作者:计算机知识

Bootstrap Table是遵照 Bootstrap 的 jQuery 表格插件,通过轻易的装置,就可以具备无敌的单选、多选、排序、分页,以及编辑、导出、过滤(扩张)等等的功能:

Bootstrap Table是依赖 Bootstrap 的 jQuery 表格插件,通过轻易的设置,就足以享有庞大的单选、多选、排序、分页,以及编辑、导出、过滤(增加)等等的功效:

Bootstrap Table火速完美搭建后台管理种类,

Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

现行做的3个app管理以及后台配置种类,必要针对区别的城市作相应的定制化的陈设,对有些后台数据也做一些来得和操作,所以每多少个模块基本都会有报表的展现方式,那样做的益处正是直观方便操作。对于用怎么着table插件,无疑就是bootstrap table了,成效壮大文书档案完善,并且大家项目里也是根据bootstrap布局的,所以就采取了他,接下去就贴一些门类代码来展现(仅供参谋),本身也做一下笔记。

率先是用到了bootstrap的Tab来切换区别的表格用于体现,切换菜单代码如下:

Bwin必赢亚洲 1

1     <div class="report-count">被举报次数:${count}次</div>
2       <ul class="report-btn nav nav-tabs" id="myTab" >
3              <li class="pending active"><a href="#padding" onclick="freashTable(0)"  data-toggle="tab">待处理:${stateCountList[0]}次</a><i class=""></i></li>
4              <li class="success-report"><a href="#success-report" onclick="freashTable(1)" data-toggle="tab">举报成立:${stateCountList[1]}次</a></li>
5              <li class="fail-report"><a href="#fail-report" onclick="freashTable(2)" data-toggle="tab">举报不成立:${stateCountList[2]}次</a></li>
6        </ul> 

View Code

Bwin必赢亚洲,深信不疑对于bootstrap并不面生,给每贰个索要切换的价签 加上{data-toggle="tab"},并且增加锚点用于相配到相应的切换的子内容{锚点:href="#padding"},切换对应的字内容代码如下:

Bwin必赢亚洲 2

  <div class="table-view tab-content">
                        <div class=" tab-pane fade in active"  id="padding">
                            <div class="table-header clear">
                                <c:forEach items="${complainCount1}" varStatus="i" var="c" >
                                    <div>${c.complain_reason}:${c.count}次</div>
                                </c:forEach>
                            </div>
                            <div class="line addStyle"></div>
                            <div>
                                <table class="table"></table>
                            </div>
                        </div>
                        <div class="tab-pane fade"  id="success-report">
                            <div class="table-header clear">
                                <c:forEach items="${complainCount2}" varStatus="i" var="c" >
                                    <div>${c.complain_reason}:${c.count}次</div>
                                </c:forEach>
                            </div>
                            <div class="line addStyle"></div>
                            <div>
                                <table class="table"></table>
                            </div>
                        </div>
                        <div class="tab-pane fade"  id="fail-report">
                            <div class="table-header clear">
                                <c:forEach items="${complainCount3}" varStatus="i" var="c" >
                                    <div>${c.complain_reason}:${c.count}次</div>
                                </c:forEach>
                            </div>
                            <div class="line addStyle"></div>
                            <div>
                                <table class="table"></table>
                            </div>
                        </div>
                    </div>

View Code        

Table急速完美搭建后台管理系统,Table快速完美搭建后台管理系统。透过给每二个急需切换子内容成分设置相应上述锚点的id{#padding},并且毫不忘了给外层容器加(tab-content),给子成分容器加class(tab-pane fade in active),有active的正是私下认可选中的。每3个子剧情都有3个table成分,所以那边正是大家须要的table,切换每一种tab就能够刷新展现相应的table数据。这里大家利用动态的生成table的法子加载数据。

Bwin必赢亚洲 3

 1 var $table=$('.table')
 2 function initTable(index){
 3      $table.bootstrapTable({
 4         url: '${basePath}/interacts/complain/getComplainList?pkid=' $("#pkid").val() '&state=' index,  //请求数据地址url
 5         height: getHeight(),  //获取行高
 6         striped: true,  //设置为 true 会有隔行变色效果
 7         search: true, //为true会有搜索框
 8         showRefresh: true, //为true有刷新按钮
 9         showColumns: true,  //是否显示 内容列下拉框
10         minimumCountColumns: 2,//当列数小于此值时,将隐藏内容列下拉框
11         clickToSelect: true,  //点击行是checkbox或者rediobox选中
12         detailView: true,  //设置为 true 可以显示详细页面模式。table第一行会有 号,点击会出现更详细的该行信息
13         detailFormatter: 'detailFormatter',  //格式化详细页面模式的视图。
14         pagination: true, //展示有分页
15         paginationLoop: false,  //循环分页
16         sidePagination: 'server',  //设置在哪里进行分页,可选值为 'client' 或者 'server'。设置 'server'时,必须设置 服务器数据地址(url)或者重写ajax方法
17         silentSort: false,  //设置为 false 将在点击分页按钮时,自动记住排序项。仅在 sidePagination设置为 server时生效19         escape: true, //转义HTML字符串,替换 &, <, >, ", `, 和 ' 字符.
20         searchOnEnterKey: true, //设置为 true时,按回车触发搜索方法,否则自动触发搜索方法
21         idField: 'systemId', //指定主键
22         maintainSelected: true, //设置为 true 在点击分页按钮或搜索按钮时,将记住checkbox的选择项
23         toolbar: '#toolbar', //一个jQuery 选择器,指明自定义的toolbar 
24         columns: [
25                 {field: 'complain_reason', title: '举报类型',align: 'center'},
26                 {field: 'nick_name', title: '举报人',align: 'center'},
27                 {field: 'create_time', title: '举报时间',formatter:'timeFormat' },
28                 {field: 'complain_state', title: '举报状态',formatter:'stateFormat'}
29                 {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
30             ]
31         });
32 }    

View Code

上述正是初步化table的函数,传index是为着切换时候请求例外的地点刷新不相同的table,因为在每3个tab切换菜单都有onclick事件函数 freashTable(index),table的保有应用的布局笔者都在上述代码中做了讲明,想看跟详细的配置请看官网配置(

1 function timeFormat(value,row,index){
2     value = row.modifyTime==null?value:row.modifyTime;
3     return new Date(parseInt(value)).toLocaleString().replace(/:d{1,2}$/,' ');
4 }

相应的田野先生为action的那一行正是操作按键了,格式化操作开关代码如下:

Bwin必赢亚洲 4

1 function actionFormatter(value, row, index) {
2     return [
3         '<a class="update" href="javascript:;" onclick="editdateAction(''   row.systemId   '')" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a> ',
4         '<a class="delete" href="javascript:;" onclick="deleteRowAction('' row.systemId '')" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
5     ].join('');
6 }

View Code

 同期分页bootstrap已经提供了完整的计划(包涵每页呈现的行数,分页开关,总条数和总页数等等)可是尚未跳转到内定行,所以需求大家自个儿写他的体裁定位到相应的分页栏,不过她有相关的章程提供,

selectPage就是跳到钦点页,我们能够协和系1个措施:

Bwin必赢亚洲 5

1 function goPage(){
2     var page=$('#pageNum').val();
3     $table.bootstrapTable('selectPage',page)
4 }

View Code

在用其情势时候,要$table.bootstrapTable('selectPage',page)使用。

Table神速完美搭建后台管理系列, Bootstrap Table是依据 Bootstrap 的 jQuery 表格插件,通过轻便的装置,就足以享有无敌的单选、多选、...

于今做的2个app处理以及后台配置连串,须求针对分化的都会作相应的定制化的安排,对有些后台数据也做一些来得和操作,所以各个模块基本都会有报表的展现情势,那样做的利润就是直观方便操作。对于用哪些table插件,无疑便是bootstrap table了,成效壮大文书档案完善,并且大家项目里也是依靠bootstrap布局的,所以就分选了她,接下去就贴一些种类代码来展现(仅供参谋),自个儿也做一下笔记。

当今做的一个app管理以及后台配置种类,要求针对分裂的城阙作相应的定制化的布署,对一些后台数据也做一些彰显和操作,所以每2个模块基本都会有报表的显现格局,那样做的功利正是直观方便操作。对于用什么样table插件,无疑正是bootstrap table了,成效强大文书档案完善,并且大家项目里也是依靠bootstrap布局的,所以就分选了她,接下去就贴一些类型代码来显示(仅供参谋),本身也做一下笔记。

首先是用到了bootstrap的Tab来切换差别的报表用于体现,切换菜单代码如下:

首先是用到了bootstrap的Tab来切换差异的报表用于体现,切换菜单代码如下:

Bwin必赢亚洲 6Bwin必赢亚洲 7

 <div class="report-count">被举报次数:${count}次</div>
  <ul class="report-btn nav nav-tabs" id="myTab" >
    <li class="pending active"><a href="#padding" onclick="freashTable(0)" data-toggle="tab">待处理:${stateCountList[0]}次</a><i class=""></i></li>
    <li class="success-report"><a href="#success-report" onclick="freashTable(1)" data-toggle="tab">举报成立:${stateCountList[1]}次</a></li>
    <li class="fail-report"><a href="#fail-report" onclick="freashTable(2)" data-toggle="tab">举报不成立:${stateCountList[2]}次</a></li>
  </ul>
1     <div class="report-count">被举报次数:${count}次</div>
2       <ul class="report-btn nav nav-tabs" id="myTab" >
3              <li class="pending active"><a href="#padding" onclick="freashTable(0)"  data-toggle="tab">待处理:${stateCountList[0]}次</a><i class=""></i></li>
4              <li class="success-report"><a href="#success-report" onclick="freashTable(1)" data-toggle="tab">举报成立:${stateCountList[1]}次</a></li>
5              <li class="fail-report"><a href="#fail-report" onclick="freashTable(2)" data-toggle="tab">举报不成立:${stateCountList[2]}次</a></li>
6        </ul> 

相信对于bootstrap并不生分,给每四个必要切换的标签 加上{data-toggle="tab"},并且增加锚点用于相称到相应的切换的子内容{锚点:href="#padding" rel="external nofollow" },切换对应的字内容代码如下:

View Code

<div class="table-view tab-content">
      <div class=" tab-pane fade in active" id="padding">
       <div class="table-header clear">
        <c:forEach items="${complainCount1}" varStatus="i" var="c" >
         <div>${c.complain_reason}:${c.count}次</div>
        </c:forEach>
       </div>
       <div class="line addStyle"></div>
       <div>
        <table class="table"></table>
       </div>
      </div>
      <div class="tab-pane fade" id="success-report">
       <div class="table-header clear">
        <c:forEach items="${complainCount2}" varStatus="i" var="c" >
         <div>${c.complain_reason}:${c.count}次</div>
        </c:forEach>
       </div>
       <div class="line addStyle"></div>
       <div>
        <table class="table"></table>
       </div>
      </div>
      <div class="tab-pane fade" id="fail-report">
       <div class="table-header clear">
        <c:forEach items="${complainCount3}" varStatus="i" var="c" >
         <div>${c.complain_reason}:${c.count}次</div>
        </c:forEach>
       </div>
       <div class="line addStyle"></div>
       <div>
        <table class="table"></table>
       </div>
      </div>
     </div> 

深信对于bootstrap并不目生,给每多个亟待切换的价签 加上{data-toggle="tab"},并且增添锚点用于相配到相应的切换的子内容{锚点:href="#padding"},切换对应的字内容代码如下:

 通过给每二个必要切换子内容成分设置相应上述锚点的id{#padding},并且毫不忘了给外层容器加(tab-content),给子成分容器加class(tab-pane fade in active),有active的正是暗许选中的。每二个子内容都有三个table成分,所以那边正是我们供给的table,切换每二个tab就能够刷新展现相应的table数据。这里大家采用动态的生成table的艺术加载数据。

Bwin必赢亚洲 8Bwin必赢亚洲 9

var $table=$('.table')
function initTable(index){
  $table.bootstrapTable({
  url: '${basePath}/interacts/complain/getComplainList?pkid=' $("#pkid").val() '&state=' index, //请求数据地址url
  height: getHeight(), //获取行高
  striped: true, //设置为 true 会有隔行变色效果
  search: true, //为true会有搜索框
  showRefresh: true, //为true有刷新按钮
  showColumns: true, //是否显示 内容列下拉框
  minimumCountColumns: 2,//当列数小于此值时,将隐藏内容列下拉框
  clickToSelect: true, //点击行是checkbox或者rediobox选中
  detailView: true, //设置为 true 可以显示详细页面模式。table第一行会有 号,点击会出现更详细的该行信息
  detailFormatter: 'detailFormatter', //格式化详细页面模式的视图。
  pagination: true, //展示有分页
  paginationLoop: false, //循环分页
  sidePagination: 'server', //设置在哪里进行分页,可选值为 'client' 或者 'server'。设置 'server'时,必须设置 服务器数据地址(url)或者重写ajax方法
  silentSort: false, //设置为 false 将在点击分页按钮时,自动记住排序项。仅在 sidePagination设置为 server时生效19   escape: true, //转义HTML字符串,替换 &, <, >, ", `, 和 ' 字符.
  searchOnEnterKey: true, //设置为 true时,按回车触发搜索方法,否则自动触发搜索方法
  idField: 'systemId', //指定主键
  maintainSelected: true, //设置为 true 在点击分页按钮或搜索按钮时,将记住checkbox的选择项
  toolbar: '#toolbar', //一个jQuery 选择器,指明自定义的toolbar 
  columns: [
    {field: 'complain_reason', title: '举报类型',align: 'center'},
    {field: 'nick_name', title: '举报人',align: 'center'},
    {field: 'create_time', title: '举报时间',formatter:'timeFormat' },
    {field: 'complain_state', title: '举报状态',formatter:'stateFormat'}
    {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
   ]
  });
}
  <div class="table-view tab-content">
                        <div class=" tab-pane fade in active"  id="padding">
                            <div class="table-header clear">
                                <c:forEach items="${complainCount1}" varStatus="i" var="c" >
                                    <div>${c.complain_reason}:${c.count}次</div>
                                </c:forEach>
                            </div>
                            <div class="line addStyle"></div>
                            <div>
                                <table class="table"></table>
                            </div>
                        </div>
                        <div class="tab-pane fade"  id="success-report">
                            <div class="table-header clear">
                                <c:forEach items="${complainCount2}" varStatus="i" var="c" >
                                    <div>${c.complain_reason}:${c.count}次</div>
                                </c:forEach>
                            </div>
                            <div class="line addStyle"></div>
                            <div>
                                <table class="table"></table>
                            </div>
                        </div>
                        <div class="tab-pane fade"  id="fail-report">
                            <div class="table-header clear">
                                <c:forEach items="${complainCount3}" varStatus="i" var="c" >
                                    <div>${c.complain_reason}:${c.count}次</div>
                                </c:forEach>
                            </div>
                            <div class="line addStyle"></div>
                            <div>
                                <table class="table"></table>
                            </div>
                        </div>
                    </div>

如上正是开始化table的函数,传index是为了切换时候请求例外的地方刷新差异的table,因为在每三个tab切换菜单都有onclick事件函数 freashTable(index),table的有所应用的布署笔者都在上述代码中做了讲授,想看跟详细的配备请看官方网址配置()。columns配置每一行,田野是对应的每1列要显得的字段key值,title对应的是每一列的头顶,formatter是格式化每1列的自定义函数,上边只显示时间格式化函数代码:

本文由bwin必赢发布,转载请注明来源

关键词: 必赢游戏