bootstraptable表格columns 隐藏方法


隐藏:  visible: false,

显示:visible: true,
visible属性没有true或者false,是visible,invisible和gone。
visible:可见的;
invisible:不可见,但占空间;
gone:不可见,也不占空间,控件从布局上消失了。

/**
 *定义前端js脚本类
 *@author
 *@since
 */
var toDo = function () {}
/**
 *类方法定义
 */

toDo.prototype = {
  $table: $("#toDoListTable"),
  queryUrl: "toDoListQuery.jssp?open",
  toDo: function () { //构造方法

  },
  show: function () { //用于页面解析绑定类的入口方法
  /**
  * this.srcElement 为当前对象 this.docWidget 为当前对象定义的_json数据
  */
  },
  init: function () {
  //传的参数为offset从第几条开始,limit就是一页显示多少条
  //访问url,返回的data的格式:{"total":"17","rows":[{"id":null,"defName":"公司发文"},{"id":null,"defName":"公司收文"}]}
  var ssd = $("#SF_fileType").val()=="收文";
  var b = false;
  var d = true;
  var _state = $("#taskStates").val().split(",")[0];
  if (_state == "2") {
  b = true;
  d = false;
  }
  //获取templateId对应的文中类型。如果有必要可以放入session缓存。
  var docTypes = JSON.parse(this.get("type.jssp"));
  $_tableBoot = this.$table.bootstrapTable({
  onLoadSuccess: function () { //加载成功时执行

  },
  url: this.queryUrl,
  sidePagination: "server", //服务端设置分页
  //totalRows:19, //总条数,当sidePagination为server时填写,不为server时,这个值等于data的长度;也可以根据url访问的数据回来的对象data中的total
  pageSize: 15, //一页显示多少条
  pagination: true, //可以进行分页
  clickToSelect: true,
  pageList: [15], //可以进行的分页条数选择
  cache: false,
  queryParams: this.queryParams,
  columns: [{
  field: 'applyTitle',
  title: '标题',
  width: '30%',
  formatter: function (value, row, index) {
  var valueShow = "";
  if (value && value != "") {
  //valueShow = value.length > 14 ? (value.substring(0, 13) + "...") : value;
  valueShow = value;
  } else {
  // value = "无标题"
  value = "";
  valueShow = value;
  }
  return '<a class="stLink" style="color:#333;text-decoration:none;" οnclick="toDoObj.applyTitleFun(this)" title="' + value + '" href="javascript:void(0)" piid="' + row.piid + '" tiid="' + row.tiid + '">' + valueShow + '</a>';
  }
  },
  {
  field: 'templateId',
  title: '类别(文种)',
  width: '20%',
  formatter: function (value, row, index) {
  return docTypes[value];
  }

  },

  {
  //visible: (_state == "10" ? false : true),
  visible: ssd,
  field: 'nodeName',
  title: b ? '处理状态' : '当前状态',
  width: '20%',
  formatter: function (value, row, index) {
  var val = "";
  if (value != undefined)
  val = value;
  return val;
  }
  }, {
  visible: b,
  field: 'nodeId',
  title: '当前状态',
  width: '20%',
  formatter: function (value, row, index) {
  if (b) {
  var userId = "【docUser.userId】";
  var url = "state.jssp?piid=" + row.piid + "&state=" + row.state + "&userId=" + userId;
  var name = wish.get(url).trim();
  if (row.applyTitle == undefined)
  name = "";
  return name;
  }
  return value;
  }
  }, {
  visible: b,
  field: 'owner',
  title: '处理人',
  width: '10%',
  formatter: function (value, row, index) {
  if (b) {
  var url = "dealer.jssp?piid=" + row.piid + "&state=" + row.state;
  var name = wish.get(url).trim();
  return name;
  }
  return value;
  }
  }, {
  visible: ssd,
  field: 'sendDeptName',
  title: '来文单位',
  width: '15%',
  formatter: function (value, row, index) {
  if(ssd && row.piid) {
  var url = "sendDept.jssp?open&piid=" + row.piid;
  var name = wish.get(url).trim();
  return name;
  }
  return value;
  }
  }, {
  field: 'createTime',
  title: '到达时间',
  width: '20%',
  formatter: this.dealWithDate
  }, {
  visible: d,
  field: 'priority',
  title: '紧急度',
  width: '10%',
  formatter: function (value, row, index) {
  if (value == 1) {
  var yb = "普通"
  return yb;
  } else if (value == 2) {
  var jj = "急"
  return jj;
  } else if (value == 3) {
  var tj = "特急"
  return tj;
  } else {
  //var ybb = "普通";
  var ybb = "";
  return ybb;
  }
  }
  }
  ]
  });
    // var formulaCode = uniflow.getFileTypeConf("qfw").get("serNumConf");
  },
  /**
  * 查询所调用的参数
  * @param params
  * @returns {{defId: (*|jQuery), start: *, length: *}}
  */
  queryParams: function (params) {
  var temp = {
  subject: $("#subject").val(),
  taskStates: $("#taskStates").val(),
  SF_fileType: $("#SF_fileType").val(),
  start: params.offset + 1,
  length: params.limit
  }
  //alert(JSON.stringify(temp))
  return temp;
  },

  /**
  * 点击查询按钮调用的方法
  * @returns {boolean}
  */

  selectToDoClick: function () {
  var para = {
  query: {
  subject: $("#subject").val(),
  taskStates: $("#taskStates").val(),
  SF_fileType: $("#SF_fileType").val(),
  start: 1,
  length: 15
  },
  silent: true,
  //url : this.processQueryUrl
  };
  this.$table.bootstrapTable('refresh', para);
  return false;
  },
  applyTitleFun: function (ths) {
  var task = $.create("wrdp.uniflowApp.Task");
  var piid = $(ths).attr("piid");
  var tiid = $(ths).attr("tiid");
  //task.open({piid:piid,tiid:tiid,appSystem:$("#systemName").val()});
  task.open({
  piid: piid,
  tiid: tiid
  });
  },
  dealWithDate: function (value, row, index) {
  var format = function (time, format) {
  var t = new Date(time);
  var tf = function (i) {
  return (i < 10 ? '0' : '') + i
  };
  return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
  switch (a) {
  case 'yyyy':
  return tf(t.getFullYear());
  break;
  case 'MM':
  return tf(t.getMonth() + 1);
  break;
  case 'mm':
  return tf(t.getMinutes());
  break;
  case 'dd':
  return tf(t.getDate());
  break;
  case 'HH':
  return tf(t.getHours());
  break;
  case 'ss':
  return tf(t.getSeconds());
  break;
  };
  });
  };
  if (value != undefined) {
  var value = format(value, 'yyyy-MM-dd HH:mm:ss');
  } else {
  value = "";
  }
  return value;
  }
Bootstrap Table 是一个基于Bootstrap框架的可定制化表格插件,可以帮助我们快速地创建出美观且功能丰富的表格。下面是Bootstrap Table的使用方法: 1. 引入必要的文件 在HTML头部引入必要的文件:jQuery、BootstrapBootstrap Table。 ```html <head> <meta charset="UTF-8"> <title>Bootstrap Table</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.css"> </head> ``` 2. 创建表格 在HTML中定义一个table元素,并添加一个唯一的id。在这个table元素上使用`data-url`属性指定数据源的URL,使用`data-pagination`属性启用分页。 ```html <table id="table" data-toggle="table" data-url="data.json" data-pagination="true" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Name</th> <th data-field="price">Price</th> </tr> </thead> </table> ``` 3. 配置表格 在JavaScript中配置表格,可以设置表格的一些属性,如分页、搜索、排序等等。以下是一些常用的配置: ```javascript $(function(){ $('#table').bootstrapTable({ // 分页相关 pagination: true, // 是否启用分页 pageNumber: 1, // 初始页码 pageSize: 10, // 每页显示的记录数 pageList: [10, 20, 50, 100], // 可选的每页显示记录数 sidePagination: 'client', // 分页方式:client/client-side(前端分页)、server/server-side(后端分页) // 搜索相关 search: true, // 是否启用搜索 searchText: '', // 默认搜索文本 searchOnEnterKey: true, // 搜索时是否支持回车键 strictSearch: true, // 是否启用精确搜索 // 排序相关 sortable: true, // 是否启用排序 sortOrder: 'asc', // 初始排序方式 sortName: 'id', // 初始排序字段 // 工具栏相关 showRefresh: true, // 是否显示刷新按钮 showToggle: true, // 是否显示切换视图按钮 showColumns: true, // 是否显示隐藏按钮 toolbar: '#toolbar', // 自定义工具栏 // 数据相关 url: 'data.json', // 数据源URL method: 'get', // 获取数据的方式(get/post) dataType: 'json', // 数据类型 columns: [ {field: 'id', title: 'ID'}, {field: 'name', title: 'Name'}, {field: 'price', title: 'Price'} ] // 定义 }); }); ``` 4. 自定义工具栏 可以使用HTML代码定义自己的工具栏,并在表格配置中指定`toolbar`选项。 ```html <div id="toolbar"> <button class="btn btn-default" type="button" onclick="alert('refresh')"> <span class="glyphicon glyphicon-refresh"></span> </button> <button class="btn btn-default" type="button" onclick="alert('toggle')"> <span class="glyphicon glyphicon-th-list"></span> </button> <button class="btn btn-default" type="button" onclick="alert('columns')"> <span class="glyphicon glyphicon-th"></span> </button> </div> ``` 5. 其他功能 Bootstrap Table 还提供了很多其他功能,如自定义样式、自定义事件、ajax加载数据等等,可以根据需求进行配置。完整的使用手册可以参考官方文档:https://bootstrap-table.com/docs/getting-started/introduction/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值