bootstraptable使用localStorage保存上次的显示列

本文链接：https://blog.youkuaiyun.com/Think_and_work/article/details/113868132

思路

存：使用bootstraptable自带的onColumnSwitch将对应的field和checked存到localStorage
取：获取localStorage的数据，将columns对应的field的visible替换

onColumnSwitch：

这个是bootstrap自带的方法，是指点击显示隐藏列的按钮时会触发的事件
在这里插入图片描述

 //field表示你勾选的列，checked表示是否勾选，把这两个发送给后端即可
      onColumnSwitch: function (field, checked) {
      //如果缓存中存在funList
        if(localStorage.getItem("funList")!=null){
        //获取缓存
          let columns=localStorage.getItem("funList")
          //将其转为json格式
          let jsonColumns=JSON.parse(columns)
          //遍历json
          for (let i = 0; i < jsonColumns.length; i++) {
          //如果该json里面存在该功能id的话，将field对应的checked,即true或者false赋值,
            if (jsonColumns[i].funid = getCookie("funid")) {
              jsonColumns[i][field] = checked
              funList[i]=jsonColumns[i]
            }
          }
          //然后重新覆盖LocalStorage缓存
          localStorage.setItem("funList",JSON.stringify(funList))
        }else{
          //否则新建json
          let funJson={
            funid:getCookie("funid"),
          }
          //将visible:false的存进来
          funJson[field]=checked
          //将其放置到funList数组中
          funList.push(funJson)
          //设置缓存
          localStorage.setItem("funList",JSON.stringify(funList))
        }
      },

获取缓存数据

 /*
    * 
    * 根据缓存显示列
    * */
    //如果缓存非空,获取缓存的数据
    if(localStorage.getItem("funList")!=null){
      var funList1=localStorage.getItem("funList")
      var funList2=JSON.parse(funList1)
      //遍历缓存json
      for (let i = 0; i < funList2.length; i++) {
        //获取当前funid
        if(getCookie("funid")==funList2[i].funid){
         //遍历columns,将columns里面的值换成缓存里面的值
          for (let j = 0; j < columns.length; j++) {
            var fieldTemp=columns[j].field
            if(funList2[i][fieldTemp]!=null){
              columns[j].visible=funList2[i][fieldTemp]
            }
          }
        }
      }
    }

完整代码

import { Component, OnInit } from '@angular/core';

import {HttpClient, HttpHeaders} from '@angular/common/http';

//从index.js获取方法
declare var $: any;
declare var url: any;
declare var is_success: any;
declare var ajax:any;
declare var visible:any;
declare var setCookie: any;
declare var getCookie: any;
import {SysRoleComponent} from '../sys-role/sys-role.component';
import get = Reflect.get;
//Component
@Component({
  selector: 'app-device-operate',
  templateUrl: './device-operate.component.html',
  styleUrls: ['./device-operate.component.css']
})
//


export class DeviceOperateComponent implements OnInit {

  constructor(private http: HttpClient,private role: SysRoleComponent, ) { }


  address; TEL; REMARK;

// 多语言
  lang;  universal;

// 样式
  in; display;
  jk=false;

  //设备详情
  el;
  site;
  wi;
  he;
  img
  src
  dein;dedisplay
  x_position
  y_position
  site_code
  area
  device_id
  site_id
  tite
  opratio=0
  natop="97px"
  cv=true

  device_name
  event_desc
  event_time
  switchh
  onoff='bootstrap-switch-on'
  margin='margin-left: 0px;'
  columns


  ngOnInit(): void {
    // 获取所有多语言翻译
    this.lang = JSON.parse($('#cooke')[0].innerHTML).data;
    //将functionId存入cookie
    let funid= document.getElementById('device-operate').innerHTML;
    if(funid!='Crisis Center'){setCookie("funid",funid,2)}
    else {funid  = getCookie("funid")}
    console.log("funid>>>>>>>>>>>>>"+getCookie("funid"))

    // 表格
    this.system_dept_table();
    this.selectDeviceType();







  }
//回车事件
  onEnter(): void {
    this.refreshEventList();
  }

  refreshEventList(){
    $("#dept_table").bootstrapTable("refresh")
  }

  commAddress
  deviceTypeId
  deviceName
  deptId
  // 表格
  system_dept_table(){

    this.deviceTypeId=$("#selectDevice").val()
    this.commAddress=$("#commAddress").val()
    this.deviceName=$("#deviceName").val()

    var funList=[]
    //表格
    const columns = [
      {field: 'device_id', title: this.lang['sys.device_info.deviceId'], visible : false},//设备ID
      {field: 'device_name', title: this.lang['sys.device_info.deviceName'] ,visible : true},//设备名称
      {field: 'device_type_name', title: this.lang['sys.device_info.deviceType'], visible :true},//设备名称
      {field: 'install_address', title: this.lang['sys.device_info.install_address'], visible: true},//安装地址
      {field: 'comm_address', title: this.lang['sys.device_info.comm_address'],  visible:true},//通讯地址
      {field: 'terminal_type_name', title: this.lang['sys.terminal_info.typeName'], visible: false},//终端类型
      {field: 'terminal_name', title: this.lang['sys.terminal_info.name'],  visible:true},//终端名称
      {field: 'projects_name', title: this.lang['sys.site_info.projects_name'], visible:true },//展会名称
      {field: 'site_code', title: this.lang['sys.site_info.site_code'],  visible:true},//展位名称
      {field: 'event_desc', title: this.lang['sys.equip_info.event_desc'],  visible:true},//最后告警运行状态
      {field: 'rent_status', title: this.lang['sys.device_operate.rent_status'],  visible:true},//租用状态
      {field: 'index', title: this.lang['universal.operation'], align: 'center', width: 150, switchable: false,
        formatter(value, row, index, field){
          let result = '';
          result += '<button type=\'button\' οnclick=\'sys_dept_edit(' + '"' + row.device_id + '"' + ')\' class=\'btn btn-primary btn-sm q1\'>' +
            '<span class=\'glyphicon glyphicon-edit\'></span>' +
            '</button>\n&nbsp;';
          return result;
        }
      }
    ];

    /*
    * 根据缓存显示列
    * */
    //如果缓存非空,获取缓存的数据
    if(localStorage.getItem("funList")!=null){
      var funList1=localStorage.getItem("funList")
      var funList2=JSON.parse(funList1)
      //遍历缓存json
      for (let i = 0; i < funList2.length; i++) {
        //获取当前funid
        if(getCookie("funid")==funList2[i].funid){
         //遍历columns
          for (let j = 0; j < columns.length; j++) {
            var fieldTemp=columns[j].field
            if(funList2[i][fieldTemp]!=null){
              columns[j].visible=funList2[i][fieldTemp]
            }
          }
        }
      }
    }


    //表格数据获取
    var t=this
    $('#dept_table').bootstrapTable({
      contentType: 'application/x-www-form-urlencoded',
      url: url() + '/device/getAllDeviceInfoAndFindDeviceInfoByCondition',
      ajaxOptions: {
        headers: {Authorization: document.getElementById('token').innerHTML}
      },
      method: 'post',
      toolbar: '#table_toolbar',
      columns,
      uniqueId: 'id',
      showRefresh: true,
      showToggle: false,
      showColumns: true, // 显示或隐藏列
      cache: false,
      striped: true,
      clickToSelect: true,
      singleSelect: true,
      sidePagination: 'server',
      pagination: true,
      paginationLoop: true,
      smartDisplay: false,
      pageNumber: 1,
      pageSize: 10,
      pageList: [10, 20, 100],
      // 重写请求函数，如果是查询将带上查询条件
      queryParams(params) {
        //
        params.pageNum = params.offset;
        params.pageSize = params.limit;

        // if($("#selectDevice").val()==''){
          params.deviceTypeId='a.device_type_id'
          // console.log(params.deviceTypeId)
        // }else{
        //   params.deviceTypeId = $("#selectDevice").val()
        // }
        params.commAddress = $("#commAddress").val()
        params.deviceName=$("#deviceName").val()
        return params;
      },

      responseHandler(data){
        console.log("columns>>>>>>>>>>>>>>>>>>>"+columns)
        console.log(data)
        return { rows: is_success(data).result,
          total: is_success(data).total,};
      },



      //field表示你勾选的列，checked表示是否勾选，把这两个发送给后端即可
      onColumnSwitch: function (field, checked) {
        if(localStorage.getItem("funList")!=null){
          let columns=localStorage.getItem("funList")
          let jsonColumns=JSON.parse(columns)
          for (let i = 0; i < jsonColumns.length; i++) {
            if (jsonColumns[i].funid = getCookie("funid")) {
              jsonColumns[i][field] = checked
              funList[i]=jsonColumns[i]
            }
          }
          localStorage.setItem("funList",JSON.stringify(funList))
        }else{
          //funJson
          let funJson={
            funid:getCookie("funid"),
          }
          //将visible:false的存进来
          funJson[field]=checked
          funList.push(funJson)
          localStorage.setItem("funList",JSON.stringify(funList))
        }
      },



      onLoadSuccess(data){
        const funid= document.getElementById('device-operate').innerHTML;
        t.role.getFunctionOpera(funid);

      },
      onPostBody(){
        const funid= document.getElementById('device-operate').innerHTML;
        t.role.getFunctionOpera(funid);
      },



    });

  }
  /**
   * 筛选设备类型
   */
  list
  selectDeviceType(){
    var v=this
    $.ajax({
      url: url() + '/xml/device_oprate/deviceType',
      headers: {Authorization: document.getElementById('token').innerHTML},
      method: 'get',
      async: false,
      success(data) {
        v.list=is_success(data)
        // console.log(v.list)
      }
    });

  }

  item={device_id:"",atc:""}
  sys_dept_edit(){
    //属性为device_id
    this.item.device_id=document.getElementById('sys_dept_edit').innerHTML;
    this.jk=true
  }


  register(){
    ajax("/register",{})
    alert("已发送自动注册任务，预计五分钟后生效")
  }




}