HTML5技术

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利) - 懒得安分(2)

字号+ 作者:H5之家 来源:博客园 2015-11-30 09:19 我要评论( )

rowStyle: function (row, index) { strclass = "" ; if (row.ORDER_STATUS == "待排产" ) {strclass = 'success'; // 还有一个active } else if (row.ORDER_STATUS == "已删除" ) {strclass = 'danger' ;} else {

       rowStyle: function (row, index) { 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文件

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

部门名称上级部门部门级别描述

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页面

第一季度第二季度第三季度第四季度年度汇总一月二月三月第一季度四月五月六月第二季度七月八月九月第三季度十月十一月十二月第四季度

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文件

2、js初始化的时候

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Omi树组件omi-tree编写指南 - 【当耐特】

    Omi树组件omi-tree编写指南 - 【当耐特】

    2017-05-02 15:04

  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • 在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    2017-04-28 15:00

  • JS组件系列——自己动手封装bootstrap-treegrid组件 - 懒得安分

    JS组件系列——自己动手封装bootstrap-treegrid组件 - 懒得安分

    2017-04-28 14:02

网友点评
/