Bootstrap中Table如何搭建后台管理系统-创新互联

这篇文章主要为大家展示了“Bootstrap中Table如何搭建后台管理系统”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Bootstrap中Table如何搭建后台管理系统”这篇文章吧。

10年积累的网站设计制作、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站设计后付款的网站建设流程，更有双阳免费网站建设让你可以放心的选择与我们合作。

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

现在做的一个app管理以及后台配置系统，需要针对不同的城市作相应的定制化的配置，对一些后台数据也做一些展示和操作，所以每一个模块基本都会有表格的展现形式，这样做的好处就是直观方便操作。对于用什么table插件，无疑就是bootstrap table了，功能强大文档完善，并且我们项目里也是基于bootstrap布局的，所以就选择了他，接下来就贴一些项目代码来展示（仅供参考），自己也做一下笔记。

首先是用到了bootstrap的Tab来切换不同的表格用于展示，切换菜单代码如下：

 被举报次数：${count}次

待处理：${stateCountList[0]}次

举报成立：${stateCountList[1]}次

举报不成立：${stateCountList[2]}次

相信对于bootstrap并不陌生，给每一个需要切换的标签加上｛data-toggle="tab"｝，并且增加锚点用于匹配到对应的切换的子内容｛锚点：href="#padding" rel="external nofollow" ｝，切换对应的字内容代码如下：


      
       
        
         ${c.complain_reason}：${c.count}次

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} ] }); }

大橙子网站建设，新征程启航

Bootstrap中Table如何搭建后台管理系统-创新互联

其他资讯