四、bootstrap-Table

一、bootstrap-Table基础表格

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Dashboard | Nadhif - Responsive Admin Template</title><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script></head><body><table id="mytab" class="table table-hover"></table><script>var data=[{"id":0,"name":"Item 0","price":"$0"},{"id":1,"name":"Item 1","price":"$1"},{"id":2,"name":"Item 2","price":"$2"},{"id":3,"name":"Item 3","price":"$3"},{"id":4,"name":"Item 4","price":"$4"},{"id":5,"name":"Item 5","price":"$5"},{"id":6,"name":"Item 6","price":"$6"},{"id":7,"name":"Item 7","price":"$7"},{"id":8,"name":"Item 8","price":"$8"},{"id":9,"name":"Item 9","price":"$9"},{"id":10,"name":"Item 10","price":"$10"},{"id":11,"name":"Item 11","price":"$11"},{"id":12,"name":"Item 12","price":"$12"},{"id":13,"name":"Item 13","price":"$13"},{"id":14,"name":"Item 14","price":"$14"},{"id":15,"name":"Item 15","price":"$15"},{"id":16,"name":"Item 16","price":"$16"},{"id":17,"name":"Item 17","price":"$17"},{"id":18,"name":"Item 18","price":"$18"},{"id":19,"name":"Item 19","price":"$19"},{"id":20,"name":"Item 20","price":"$20"}];$('#mytab').bootstrapTable({data:data,queryParams: "queryParams",toolbar: "#toolbar",sidePagination: "true",striped: true, // 是否显示行间隔色//search : "true",
                uniqueId: "ID",pageSize: "5",pagination: true, // 是否分页
                sortable: true, // 是否启用排序
                columns: [{field: 'id',title: '登录名'},{field: 'name',title: '昵称'},{field: 'price',title: '角色'},{field: 'price',title: '操作',width: 120,align: 'center',valign: 'middle',formatter: actionFormatter,},]});//操作栏的格式化function actionFormatter(value, row, index) {var id = value;var result = "";result += "<a href='javascript:;' class='btn btn-xs green' οnclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";result += "<a href='javascript:;' class='btn btn-xs red' οnclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";return result;}</script></body>
</html>

BootstrapTable的属性一览表:

    url: '/Home/GetDepartment',         //请求后台的URL（*）method: 'get',                      //请求方式（*）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: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大strictSearch: true,showColumns: true,                  //是否显示所有的列showRefresh: true,                  //是否显示刷新按钮minimumCountColumns: 2,             //最少允许的列数clickToSelect: true,                //是否启用点击选中行height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度uniqueId: "ID",                     //每一行的唯一标识，一般为主键列showToggle:true,                    //是否显示详细视图和列表视图的切换按钮cardView: false,                    //是否显示详细视图detailView: false,                   //是否显示父子表
            columns: [{
}]

如果我们想要再将这一列显示的时候就要用到：showColumns属性。当showColumns为true的时候，会在表格上方产生一个下拉框，如图所示：

bootstrap-Table列过滤的功能

免去扩展表格搜索框的烦恼具体步骤：

https://www.bootcdn.cn/bootstrap-table/
<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/extensions/filter-control/bootstrap-table-filter-control.js"></script>

　　定义表格属性及表头属性

<table id="tb_roles" data-filter-control="true"><thead><tr><th data-field="ROLE_NAME" data-filter-control="select">角色名称</th><th data-field="DESCRIPTION" data-filter-control="input">角色描述</th><th data-field="ROLE_DEFAULTURL" data-filter-control="input">角色默认页面</th></tr></thead></table>

因为这里定义了表头的属性，所以，js初始化的时候就不用定义列了。

二、bootstrap-Table基础表格

转载于:https://www.cnblogs.com/fger/p/10955345.html

四、bootstrap-Table相关推荐

ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十四节--后台工作者HangFire与ABP框架Abp.Hangfire及扩展...
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 HangFire与Quartz.NET相比主要是HangFire的内置提供集成化的控制台,方便后台查看及监控,对于 ...
ABP+AdminLTE+Bootstrap Table权限管理系统第四节--仓储,服务,服务接口及依赖注入
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 AbpModule 在ABP框架中,仓储,服务,这块算是最为重要一块之一了.ABP框架提供了创建和组装模块的基础, ...
bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
bootstrap table教程--使用入门基本用法
笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...
bootstrap table使用参考
https://www.cnblogs.com/landeanfen/p/5821192.html 转载阅读目录一.x-editable组件介绍二.bootstrapTable行内编辑初始方案 ...
JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
原文:JS组件系列--Bootstrap Table 表格行拖拽(二:多行拖拽) 前言:前天刚写了篇JS组件系列--Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的 ...
bootstrapr表格父子框_JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）...
前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
二、bootstrap table 父子表和行列调序
http://blog.csdn.net/yin767833376/article/details/52153443 前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍 ...
一、bootstrap table 初体验
http://blog.csdn.net/yin767833376/article/details/52153487 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法 ...

四、bootstrap-Table

一、bootstrap-Table基础表格

BootstrapTable的属性一览表:

bootstrap-Table列过滤的功能

免去扩展表格搜索框的烦恼具体步骤：

二、bootstrap-Table基础表格

四、bootstrap-Table相关推荐

最新文章

热门文章