当前位置:Gxlcms > JavaScript > bootstrap Table的一些小操作

bootstrap Table的一些小操作

时间:2021-07-01 10:21:17 帮助过:3人阅读

本文实例为大家分享了bootstrap Table的操作代码,供大家参考,具体内容如下

  1. function HQCreatTable(ob) {
  2. var option = {
  3. cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
  4. scrollX: true,
  5. scrollY:true,
  6. striped: true, //使表格带有条纹 //是否显示行间隔色
  7. sidePagination: "client",//分页方式:client客户端分页,server服务端分页(*)
  8. pagination: true, //在表格底部显示分页工具栏
  9. pageNumber: 1, //初始化加载第一页,默认第一页
  10. pageSize: 10,
  11. pageList: [ 10,15],//可供选择的每页的行数(*)
  12. showColumns: false,//是否显示所有的列
  13. sortable: true, //是否启用排序
  14. clickToSelect: true,//是否启用点击选中行
  15. showRefresh: false, //显示刷新按钮
  16. //search: false,//是否显示右上角的搜索框
  17. //toolbar: '#toolbar', //工具按钮用哪个容器
  18. uniqueId: "ID", //每一行的唯一标识,一般为主键列
  19. undefinedText: "",
  20. toolbarAlign: 'left',
  21. exportDataType: "all", //basic', 'all', 'selected'.
  22. }
  23. if (ob.rowStyle) {
  24. option.rowStyle = ob.rowStyle;//行样式 是函数
  25. }
  26. //排序
  27. if (ob.sortOrder) {
  28. option.sortOrder = ob.sortOrder;
  29. } else {
  30. option.sortOrder = "desc";
  31. }
  32. if (ob.sortName) {
  33. option.sortName = ob.sortName;
  34. }
  35. if (ob.showExport) {
  36. option.showExport = ob.showExport;//导出Excel
  37. }
  38. if (ob.showFooter) {
  39. option.showFooter = ob.showFooter;//是否显示统计页脚
  40. }
  41. if (ob.searchAlign) {
  42. option.searchAlign = ob.searchAlign;
  43. }
  44. if (ob.num) {
  45. option.pageSize = ob.num;//每页的记录行数(*)
  46. }
  47. if (ob.data) {
  48. option.data = ob.data;
  49. } else {
  50. option.data = [];
  51. }
  52. if (ob.search) {
  53. option.search = ob.search;
  54. }
  55. if (ob.columns) {
  56. option.columns = ob.columns;
  57. }
  58. if (ob.onClickRow) {
  59. option.onClickRow = ob.onClickRow;
  60. }
  61. if (ob.onDblClickRow) {
  62. option.onDblClickRow = ob.onDblClickRow;
  63. }
  64. if (ob.onDblClickRow) {
  65. option.onDblClickRow = ob.onDblClickRow;
  66. }
  67. if (ob.onCheck) {
  68. option.onCheck = ob.onCheck;
  69. }
  70. if (ob.onAll) {
  71. option.onAll = ob.onAll;
  72. }
  73. if (ob.onLoadSuccess) {
  74. option.onLoadSuccess = ob.onLoadSuccess;
  75. }
  76. if (ob.toolbar) {
  77. option.toolbar = ob.toolbar;
  78. }
  79. if (ob.singleSelect || ob.singleSelect == false) {
  80. option.singleSelect = ob.singleSelect
  81. } else {
  82. option.singleSelect = true;//禁止多选
  83. }
  84. if (ob.maintainSelected) {
  85. option.maintainSelected = ob.maintainSelected;
  86. } else {
  87. option.maintainSelected = false;//设置为 true 在点击分页按钮或搜索按钮时,将记住checkbox的选择项
  88. }
  89. if (ob.detailView) { option.detailView = ob.detailView; }
  90. if (ob.onExpandRow) {
  91. option.onExpandRow = ob.onExpandRow;
  92. }
  93. if (ob.onEditableSave) {
  94. option.onEditableSave = ob.onEditableSave;
  95. }
  96. $(ob.id).bootstrapTable('destroy');
  97. $(ob.id).bootstrapTable(option);
  98. if (ob.data) {
  99. $(ob.id).bootstrapTable('load', ob.data);
  100. }
  101. }

前端分页的Table配置函数

  1. <table id="Table3" data-row-style="rowStyle"></table>
  2. //行根据数据变色
  3. function rowStyle(row, index) {
  4. var classes = ['success'];
  5. var classes1 = ['danger'];
  6. var classes2 = ['warning'];
  7. if (row.bed_msg==0) {
  8. return {
  9. classes: classes2
  10. };
  11. }else{
  12. if (row.status == 1) {
  13. return {
  14. classes: classes1
  15. };
  16. } else {
  17. return {
  18. classes: classes
  19. };
  20. }
  21. }
  22. }

根据每行数据的一个字段的值来改变行的背景色(class好像只能调用他本来默认的那几个,很久之前写的忘记了是不是这样的)

  1. formatter: function (value, row, index) {
  2. // 根据row.列名 那状态确定返回 true/false
  3. if (row.status == 1) {
  4. return {
  5. disabled: true
  6. };
  7. }
  8. }

这个是根据每行数据的一个字段的值来是否禁用选择框(我在之前项目需要做结算,已结算的和未结算的在一起,因此需要这个),formatter还可以写别的函数,比如根据1,0值改成其对应的值

  1. footerFormatter: function (data) {
  2. return data.reduce(function (sum, row) {
  3. return accAdd(sum, row["Selmoney"]);
  4. }, 0) + "元";
  5. }

footerFormatter是必须之前的配置Table时,showFooter属性为true,否则不会显示。我写这个是前端分页的话是Table所有数据的Selmoney值的总和,后端分页的话则是当页数据的总和。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行