关键词：
最近在使用bootStrap Table 的表格功能有一些自己的理解写下来分享一下
主要用的是一个bootStrapTable 和 jquery 的混合开发 具体怎样引入bootStrap Table 我就不一一详解了直接上代码
htm代码
<table id="table0">
</table>
js代码
var $table = $(‘#table0‘);//jq获取指定table
$table.bootstrapTable({//这是对指定table的初始话bootStrap 表格设置
url: ApiUrls.SupplierGetPagedList + "?ApproveState=Approved", //这个里面的ApiUrls是url链接的集合，bootStrap默认的是get的一个提交方式"?ApproveState=Approved"是get方法的查询参数
contentType: "application/x-www-form-urlencoded",//提交的信息类型
search: true, //搜索框
pageSize: "10",
pageNumber: "1",
singleSelect:true,//是否单选
sidePagination: "server",//设置在哪里进行分页，可选值为 ‘client‘ 或者 ‘server‘。设置 ‘server‘时，必须设置服务器数据地址（url）或者重写ajax方法。
pagination: true,//设置为 true 会在表格底部显示分页条。
silentSort: false, //设置为 false 将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效.
showRefresh: true, //是否显示刷新按钮
showColumns: false, //内容列下拉框
showHeader: true, //是否显示列头
toolbar: ".button_tow_one",//插入到表头的方法
sortable: true,//设置为false 将禁止所有列的排序。
sortOrder: "asc",//定义排序方式，‘asc‘ 或者 ‘desc‘。//正序 倒序
striped: true,//设置为 true 会有隔行变色效果。
pageList: [10, 20, 50, 100],
clickToSelect: true,//设置 true 将在点击行时，自动选择 rediobox 和 checkbox。
onSearch: function (text) {//bootStrap Table 上方会有一个快速搜索的输入框这个方法就是对应的快速框的搜索方法
$table.bootstrapTable(‘refresh‘, { url: ApiUrls.SupplierGetPagedList + "?ApproveState=Approved&Name="+text+"" });
},
maintainSelected: true,//设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
queryParams: function queryParams(params) {//其中输出的params是此表搜索的参数每次表格刷新就会执行
str.pageSize=this.pageSize
str.PageIndex=this.pageNumber
params = str
return params;
},
onCheck: function (row) {//选择某行触发
// clickRow[0] = row
obtainSupplyAgreement(row)
checkType=true
},
onUncheck: function (row) {//选择某行触发
checkType=false
$(‘#tab-1 table tbody‘).html(‘‘)
},
onClickRow: function (row) {//点击某行出发
// obtainSupplyAgreement(row)
},
columns: [{//对应的是thead 表头 表格数据加载完成后会根据下面的field一一对应数据
checkbox: true,
align: ‘center‘
}, {
field: ‘Code‘,
title: ‘供应商编码‘,
}, {
field: ‘Name‘,
title: ‘供应商名称‘,
}, {
field: ‘Contacter‘,
title: ‘联系人‘,
}, {
field: ‘Telephone‘,
title: ‘联系电话‘,
}, {
field: ‘ApproveState‘,
title: ‘审核状态‘,
formatter: function formatter(value) {//自定义你的输出结果 你可以在其中自定义你的输出 如果你想表格内 该列是一个输入框 只要 return input 对应的代码就行
if (value == ‘Rejected‘) {
return ‘拒绝‘
} else if (value == ‘Pending‘) {
return ‘待审核‘
} else if (value == ‘Approved‘) {
return ‘通过‘
}
}
},{
field: ‘Status‘,
title: ‘状态‘,
formatter: function formatter(value) {
if (value==1) {
return ‘启用‘
} else if (value == ‘0‘) {
return ‘禁用‘
}
}
}, {
field: ‘Email‘,
title: ‘电子邮箱‘,
}, {
field: ‘Fax‘,
title: ‘传真‘,
}
]
});
只要把这个代码复制完成可以完成基本的表格应用
如何来使用bootstraptable
你好，使用bootstraptable方法：bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，具有简便灵活，快速前端开发... 查看详情
如何来使用bootstraptable
使用bootstraptable方法：bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，具有简便灵活，快速前端开发的优势... 查看详情
bootstraptable使用小记
varTableInit=function(){varoTableInit=newObject();//初始化TableoTableInit.Init=function(){$(‘#tb_rolelist‘).bootstrapTable({url:‘/Role/GetList‘,//请求后台的URL（*）method:‘get‘,//请求方式（*）toolbar:‘#toolbar‘,//工具按 查看详情
bootstraptable使用实例
一、bootstrapTable简单使用：<linkrel="stylesheet"href="./static/libs/bootstrap/css/bootstrap.css"><linkrel="stylesheet"href="./static/libs/bootstrap-table-master/bootstrap-table.css"><scriptsr 查看详情
bootstraptable使用实例
一、bootstrapTable简单使用：<linkrel="stylesheet"href="./static/libs/bootstrap/css/bootstrap.css"><linkrel="stylesheet"href="./static/libs/bootstrap-table-master/bootstrap-table.css"><scriptsr 查看详情
bootstraptable使用总结
使用bootstraptable可以很方便的开发后台表格，对数据进行异步更新，编辑。下面就来介绍一下bootstraptable的详细使用方法：因为之前在官网也找了很久的教程，源码感觉隐藏的比较隐秘，其他扩展功能也很难找到，其实都在：http:... 查看详情
bootstraptable的使用
前言：BootstrapTable基于Bootstrap，Bootstrap基于jquery，所以需要引入jquery后再引入bootstrap。<linkhref="${ctx}/assets/plugins/bootstrap/css/bootstrap.min.css"rel="stylesheet"><linkrel="stylesheet"href="${ctx}/as 查看详情
如何来使用bootstraptable
参考技术Abootstraptable是一个非常不错的，基于bootstrap的插件，它扩展和丰富了bootstrap表格的操作，如格式化表格，表格选择器，表格工具栏，分页等等。 查看详情
bootstraptable使用心得
序号显示带分页信息的连续编号，在序号列添加以下格式化代码即可。{field:‘number‘,title:‘序号‘,align:‘center‘,width:45,formatter:function(value,row,index){varpageSize=$(‘#logList‘).bootstrapTable(‘getOptions‘).pageSize,pageNum=$(‘#logLi 查看详情
bootstraptable的使用小结
...一下，毕竟有些时候没有使用到这个方式很有用，在使用bootstraptable的时候，选择当前已经选择的节点的事件中的ID的值 当前rows中有很多的数据，但是我只需要id这一个值，这个时候进行操作就非常的简单了。$.map(data,function(... 查看详情
bootstraptable的使用小结
...一下，毕竟有些时候没有使用到这个方式很有用，在使用bootstraptable的时候，选择当前已经选择的节点的事件中的ID的值 当前rows中有很多的数据，但是我只需要id这一个值，这个时候进行操作就非常的简单了。$.map(data,function(... 查看详情
如何来使用bootstraptable
参考技术Abootstrap的table是handstable，你需要下载这个样式table的css和js；handsontable的核心方法如下：varhot=newHandsontable(document.getElementById('example'),data:data,colHeaders:['日期','地点','商品','单价','销量'... 查看详情
bootstraptable使用总结之前端样式设计(代码片段)
...按钮。在实现的时候也是找了很多的资料，后头在参考了bootstraptable怎么实现自定义按钮列的操作的时候，发现了可以return一个HTML代码块到相应的table里面，就参照这个思路实现了我的想法。一：设定bootstrap样式知识点1的参考代... 查看详情
如何来使用bootstraptable
...可以新建一个单独的html文件复制如下代码来测试一下：BootstrapTable 参考技术Bbootstraptable是一个非常不错的，基于bootstrap的插件，它扩展和丰富了boot 查看详情
bootstraptable使用
bootstraptablegitaddresshttps://github.com/wenzhixin/bootstrap-table 引入文件<linkrel="stylesheet"href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/><linkrel="stylesheet"href=" 查看详情
使用 BootstrapTable 添加行时使用 CellStyle
】使用BootstrapTable添加行时使用CellStyle【英文标题】：UsingCellStylewhenaddingrowswithBootstrapTable【发布时间】：2018-06-2005:19:54【问题描述】：我有一个带有按钮的引导表，用于添加新的数据行。我想在插入时为每个新行的某一列（text2... 查看详情
bootstraptable错误
异常：Cannotreadproperty‘field‘ofundefined场景：使用BootStrapTable展示数据时，控制台报错解决：给table加上thead和tbody标签 异常：使用tablednd插件时，onDrap方法不调用解决：给tr标签加id属性 查看详情
bootstraptable使用及遇到的问题
本人前端菜鸟一枚，最近使用bootstraptable实现表格，记录一下以便日后翻阅，废话不多说，先看效果图：1、首先说下要实现该效果需要添加的css样式及所需的js文件，具体下载地址就不粘贴了(因为太懒)<linkrel="stylesheet"href="css/b... 查看详情