资讯专栏INFORMATION COLUMN

Bootstrap-Table 总结

Airmusic / 1516人阅读

摘要:总结文件传参直接将需要的参数置于方法中,例如注意中的是获取文本框的值,在表格加载完后,在文本框中输入了值,再调用方法,同样可以实现传值服务器数据的请求方式服务器数据的加载地址设置为会有隔行变色效果服务器返回的数据类型设置为会在底部显示分

Bootstrap-Table 总结

jQuery Java Bootstrap-Table

JS文件

</>复制代码

  1. 传参:直接将需要的参数置于 queryParams 方法中,例如 line:formData
    注意: queryParams 中的 queryStr 是获取文本框的值,在表格加载完后,在文本框中输入了值,再调用 reLoad 方法,同样可以实现传值

</>复制代码

  1. var prefix = contpath+"equip/eqEqequip"
  2. $(function() {
  3. load(formData);
  4. });
  5. function load(formData) {
  6. $("#exampleTable")
  7. .bootstrapTable(
  8. {
  9. method : "get", // 服务器数据的请求方式 get or post
  10. url : prefix + "/list", // 服务器数据的加载地址
  11. showRefresh : true,
  12. showToggle : true,
  13. showColumns : true,
  14. iconSize : "outline",
  15. toolbar : "#exampleToolbar",
  16. striped : true, // 设置为true会有隔行变色效果
  17. dataType : "json", // 服务器返回的数据类型
  18. pagination : true, // 设置为true会在底部显示分页条
  19. // queryParamsType : "limit",
  20. // //设置为limit则会发送符合RESTFull格式的参数
  21. singleSelect : false, // 设置为true将禁止多选
  22. // contentType : "application/x-www-form-urlencoded",
  23. // //发送到服务器的数据编码类型
  24. pageSize : 10, // 如果设置了分页,每页数据条数
  25. pageNumber : 1, // 如果设置了分布,首页页码
  26. //search : true, // 是否显示搜索框
  27. showColumns : true, // 是否显示内容下拉框(选择显示的列)
  28. sidePagination : "server", // 设置在哪里进行分页,可选值为"client" 或者 "server"
  29. clickToSelect: true, // 单击行即可以选中
  30. queryParams : function(params) {
  31. return {
  32. //说明:传入后台的参数包括offset开始索引,limit步长,sort排序列,order:desc或者,以及所有列的键值对
  33. limit: params.limit,
  34. offset:params.offset,
  35. queryStr : $("#searchName").val(),
  36. line:formData
  37. //line: $(".val-hide").val()
  38. };
  39. },
  40. // //请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果
  41. // queryParamsType = "limit" ,返回参数必须包含
  42. // limit, offset, search, sort, order 否则, 需要包含:
  43. // pageSize, pageNumber, searchText, sortName,
  44. // sortOrder.
  45. // 返回false将会终止请求
  46. columns : [
  47. {
  48. checkbox : true
  49. },
  50. {
  51. field : "eqCode",
  52. title : "设备编码"
  53. },
  54. {
  55. field : "eqName",
  56. title : "设备名称"
  57. },
  58. {
  59. field : "eqTypeName",
  60. title : "设备分类"
  61. },
  62. {
  63. field : "eqSpec",
  64. title : "规格"
  65. },
  66. {
  67. field : "model",
  68. title : "型号"
  69. },
  70. {
  71. field : "manufacturer",
  72. title : "生产厂家"
  73. },
  74. {
  75. field : "facNumber",
  76. title : "出厂编号"
  77. },
  78. {
  79. field : "startDate",
  80. title : "开始使用日期"
  81. },
  82. {
  83. field : "useDeptName",
  84. title : "使用部门"
  85. },
  86. {
  87. field : "eqState",
  88. title : "设备状态",
  89. formatter : function(value, row, index) {
  90. if (value == "0") {
  91. return "在用";
  92. } else if (value == "1") {
  93. return "备用";
  94. } else if (value == "2") {
  95. return "检修";
  96. }else if(value == "3"){
  97. return "停用";
  98. }else if(value == "4"){
  99. return "待报废";
  100. }else if(value == "5"){
  101. return "报废";
  102. }
  103. }
  104. },
  105. {
  106. field : "dutyUser",
  107. title : "责任人"
  108. },
  109. {
  110. title : "操作",
  111. field : "id",
  112. align : "center",
  113. formatter : function(value, row, index) {
  114. var s = " ";
  115. var e = " ";
  116. var d = " ";
  117. var f = " ";
  118. return s + e ;
  119. }
  120. } ]
  121. });
  122. }
  123. // 重载表格
  124. function reLoad() {
  125. $("#exampleTable").bootstrapTable("refresh");
  126. }
Controller

</>复制代码

  1. 注意: params 中包含获取的数据

</>复制代码

  1. @ResponseBody
  2. @GetMapping("/list")
  3. @RequiresPermissions("equip:eqEqequip:eqEqequip")
  4. public PageUtils list(@RequestParam Map params){
  5. //查询列表数据
  6. String orgcode = ShiroUtils.getUser().getOrgCode();
  7. params.put("orgCode", orgcode);
  8. params.put("audFlag", "1");
  9. params.put("eqState", "5");
  10. Query query = new Query(params);
  11. List eqEqequipList = eqEqequipService.list(query);
  12. int total = eqEqequipService.count(query);
  13. PageUtils pageUtils = new PageUtils(eqEqequipList, total);
  14. return pageUtils;
  15. }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94832.html

相关文章

  • bootstrap-table实现表头固定以及列固定

    摘要:之前使用写了一个报表表格,最近突然找到我,说让我看看能不能将表格的表头和第一列进行固定,这样的话方便查看数据,于是,我开始了苦逼的研究起来,毕竟我是个后端啊,对于前端的样式问题,特别是小功能,烦的一批这里就记录下我的研究成果一引入和引入 之前使用bootstrap写了一个报表表格,最近突然找到我,说让我看看能不能将表格的表头和第一列进行固定,这样的话方便查看数据,于是,我开始了苦逼的研...

    B0B0 评论0 收藏0
  • Bootstrap-table 部分浏览器显示不出来

    摘要:一问题近日,写了一个项目,但是在别人的电脑上显示不出来,在自己的电脑上能显示,有些浏览器也是能显示,但部分浏览器就是显示不出来。核心双核浏览器双核主要是谷歌和,但如果某些浏览器其中有个内核的版本过低,就会造成显示不出来表格。一、问题   近日,写了一个ASP.Net项目,但是bootstrap-table在别人的电脑上显示不出来,在自己的电脑上能显示,有些浏览器也是能显示,但部分浏览器就是显...

    eccozhou 评论0 收藏0
  • Mybatis-Plus和bootstrap-table集成 demo

    摘要:页面用户列表展示的列表初始化初始化使表格带有条纹在表格底部显示分页工具栏标识哪个字段为主键名片格式设置为时显示名片布局显示隐藏列显示刷新按钮复选框只能选择一条记录是否显示右上角的 JSP页面 用户列表 ...

    hsluoyz 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<