JS 컴포넌트 시리즈 [최종장]의 부트스트랩 테이블 테이블 컴포넌트 아티팩트_javascript 기술

부트스트랩 테이블 시리즈:

JS 테이블 컴포넌트 아티팩트 부트스트랩 테이블(기본 버전)에 대한 자세한 설명

JS 컴포넌트 시리즈의 부트스트랩 테이블 테이블 컴포넌트 아티팩트 [최종장]

JS 컴포넌트 시리즈의 부트스트랩 테이블 컴포넌트 아티팩트 [2. 상위-하위 테이블 및 행 및 열 순서]

Bootstrap Table은 라디오 선택, 체크박스, 정렬, 페이징, 열 표시/숨기기, 고정 제목 스크롤 테이블, 반응형 디자인 및 Ajax 로딩을 지원하는 테이블 형태의 가볍고 기능이 풍부한 데이터 표시입니다. 데이터, 클릭으로 정렬된 열, 카드 보기 등이 있습니다. 그래서 이번 글에서는 JS 컴포넌트 시리즈 [마지막 장]의 부트스트랩 테이블 컴포넌트 아티팩트를 소개하겠습니다. 함께 배워볼까요!

1. 효과 표시

1. 테이블 행 스타일

예를 들어 주문 페이지를 표시해야 한다는 요구사항이 있습니다. 상태가 다른 주문은 그림과 같이 다른 색상을 표시합니다.

2. 테이블 인라인 편집

첫 번째 기사에서 몇몇 정원 친구들이 블로거에게 인라인 편집 효과가 지원되는지 물었고 대답은 '그렇다'였습니다. 먼저 효과를 살펴보겠습니다.

수정 전

셀 데이터를 클릭하세요

수정 후

3. 표 행과 열 병합

블로거들은 특히 페이지 보고서를 작성할 때 행과 열을 병합해야 하는 필요성이 매우 일반적이라고 생각합니다. 먼저 효과를 살펴보겠습니다.

현재 페이지가 완전히 표시되지 않습니다. 클릭하여 들어가서 살펴보세요. 어때요? 효과는 나쁘지 않습니다.

4. 테이블 데이터 내보내기

테이블 데이터 내보내기와 관련하여 부트스트랩 테이블은 기본, 전체, 선택의 세 가지 내보내기 모드를 지원합니다. 즉, 현재 페이지 데이터 내보내기, 전체 데이터 내보내기, 선택한 데이터 내보내기입니다. 또한 일반적인 Excel, xml, json 및 기타 형식과 같은 여러 유형의 파일 내보내기를 지원합니다.

현재 페이지를 Excel로 내보내기

테이블의 모든 데이터 내보내기

선택한 행 데이터 내보내기

다른 형식의 파일 내보내기는 기본적으로 엑셀과 동일하므로 효과가 표시되지 않습니다.

2. 테이블 행 스타일 코드 예시

테이블 행의 스타일 설정과 관련하여 다른 기능은 가장 기본적인 기능 중 하나입니다. 이를 세 번째 기사에 넣은 이유는 무엇입니까? 블로거는 이 기능이 어디에서나 유용할 수 있다고 생각하기 때문입니다. 물론 효과는 어렵지 않습니다. jQuery를 사용하여 tr의 배경색을 설정할 수도 있습니다. 그러나 블로거는 부트스트랩 테이블이 행의 배경색을 설정하는 메커니즘을 제공하므로 이를 사용하는 것이 어떻겠습니까? 내장 API. 어떻게하는지 봅시다.

폼 초기화 시

　　　　 //初始化Table
$('#tb_order').bootstrapTable({
url: '/TableStyle/GetOrder', //请求后台的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, //是否显示父子表
rowStyle: function (row, index) {
//这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (row.ORDER_STATUS == "待排产") {
strclass = 'success';//还有一个active
}
else if (row.ORDER_STATUS == "已删除") {
strclass = 'danger';
}
else {
return {};
}
return { classes: strclass }
},
columns: [{
checkbox: true
}, {
field: 'ORDER_NO',
title: '订单编号'
}, {
field: 'ORDER_TYPE',
title: '订单类型'
}, {
field: 'ORDER_STATUS',
title: '订单状态'
}, {
field: 'REMARK',
title: '备注'
}, ]
}); 

사실 핵심은 이 매개변수에 있습니다.

　　　　　　　rowStyle: function (row, index) {
//这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (row.ORDER_STATUS == "待排产") {
strclass = 'success';//还有一个active
}
else if (row.ORDER_STATUS == "已删除") {
strclass = 'danger';
}
else {
return {};
}
return { classes: strclass }
}, 

bootstrap table支持5中表格的行背景色，分别是'active', 'success', 'info', 'warning', 'danger'这五种，至于每种对应的背景颜色，将代码运行起来就可看到。关于这个方法的返回值，博主第一次用的时候也研究了好久，按照bootstrap table的规则，必须返回一个json格式的对象型如： { classes: strclass } 。

三、表格行内编辑代码示例

关于表格行内编辑，需要使用bootstrap table扩展的几个js文件。

1、引入额外的js文件

<link rel="stylesheet" href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
<script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script> 

2、在cshtml页面定义表格时，添加两个属性

<table id="tb_departments">
<thead>
<tr>
<th data-field="Name" data-editable="true">部门名称</th>
<th data-field="ParentName">上级部门</th>
<th data-field="Level" data-editable="true">部门级别</th>
<th data-field="Desc" data-editable="true">描述</th>
</tr>
</thead>
</table> 

如果是在js里面初始化，写法如下：

{
field: "name",
title: "名称",
editable:true
}

3、在js里面初始化表格的时候注册编辑保存的事件

$('#tb_departments').bootstrapTable({
url: '/Editable/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, //每页的记录行数（*）
onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/Editable/Edit",
data: { strJson: JSON.stringify(row) },
success: function (data, status) {
if (status == "success") {
alert("编辑成功");
}
},
error: function () {
alert("Error");
},
complete: function () {
}
});
}
}); 

重点还是看看这个事件的处理方法　　

　onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/Editable/Edit",
data: { strJson: JSON.stringify(row) },
success: function (data, status) {
if (status == "success") {
alert("编辑成功");
}
},
error: function () {
alert("Error");
},
complete: function () {
}
});
} 

对应的方法里面需要自己处理保存的逻辑。四个参数field, row, oldValue, $el分别对应着当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。

四、表格行列合并代码示例

表格的行列合并功能不用引用其他的js文件，只需要在cshtml页面使用table的colspan和rowspan即可实现。

1、cshtml页面

<table id="tb_report">
<thead>
<tr>
<th colspan="4" data-valign="middle" data-align="center">第一季度</th>
<th colspan="4" data-valign="middle" data-align="center">第二季度</th>
<th colspan="4" data-valign="middle" data-align="center">第三季度</th>
<th colspan="4" data-valign="middle" data-align="center">第四季度</th>
<th data-field="TotalCount" rowspan="2" data-valign="middle" data-align="center">年度汇总</th>
</tr>
<tr>
<th data-field="JanCount" data-align="center">一月</th>
<th data-field="FebCount" data-align="center">二月</th>
<th data-field="MarCount" data-align="center">三月</th>
<th data-field="FirstQuarter" data-align="center">第一季度</th>
<th data-field="AprCount" data-align="center">四月</th>
<th data-field="MayCount" data-align="center">五月</th>
<th data-field="JunCount" data-align="center">六月</th>
<th data-field="SecondQuarter" data-align="center">第二季度</th>
<th data-field="JulCount" data-align="center">七月</th>
<th data-field="AguCount" data-align="center">八月</th>
<th data-field="SepCount" data-align="center">九月</th>
<th data-field="ThirdQuarter" data-align="center">第三季度</th>
<th data-field="OctCount" data-align="center">十月</th>
<th data-field="NovCount" data-align="center">十一月</th>
<th data-field="DecCount" data-align="center">十二月</th>
<th data-field="ForthQuarter" data-align="center">第四季度</th>
</tr>
</thead>
</table> 

2、js初始化并无特殊

$('#tb_report').bootstrapTable({
url: '/GroupColumns/GetReport', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
}); 

怎么样，有没有很简单。当然，有人说了，你都可以不用js初始化，直接在cshtml里面用table的属性去设置url、分页等信息。确实，如果我们看过它的api，会发现它初始化的每一个属性都对应一个table的属性。型如

如果你的表格没有一些特殊的事件需要处理，这样是完全没有问题的。

五、表格数据导出代码示例

表格数据的导出功能也需要一些扩展的js支持。

1、引入额外的js文件

<script src="~/Content/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
<script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>

2、js初始化的时候

　$('#tb_departments').bootstrapTable({
url: '/Export/GetDepartment', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
clickToSelect:true,
showExport: true, //是否显示导出
exportDataType: "basic", //basic', 'all', 'selected'.
columns: [{
checkbox: true
}, {
field: 'Name',
title: '部门名称'
}, {
field: 'ParentName',
title: '上级部门'
}, {
field: 'Level',
title: '部门级别'
}, {
field: 'Desc',
title: '描述'
}, ]
}); 

还是来看重点：这两个属性

showExport: true, //是否显示导出
exportDataType: "basic", //basic', 'all', 'selected'.
showExport表示是否显示导出的按钮，exportDataType表示导出的模式是当前页、所有数据还是选中数据。

六、总结

以上就是功能的效果以及实现的简单代码。博主发现有几个问题有待解决。

1、行内编辑的功能是每一个单元格提交到后台，这样会造成数据库的频繁操作，感觉不太合适。不知道有没有更好的方式，每行提交到后台。

2、导出的功能虽然很好用，但是遗憾的是不支持IE浏览器，博主试过官网上面的example，好像IE也导出不了。待验证。

以上所述是小编给大家介绍的JS组件系列之Bootstrap table表格组件神器【终结篇】的相关内容，希望对大家有所帮助！