antd框架表單數據獲取設置

// 設置列表的表單資源數據
// data 爲獲取的數據源, columns對應表頭的數組隊列
setDataSource = (data, columns) => {數組

const dataSource = []
for (var i = 0; i < data.length; i++) {
  const colObj = {}
  colObj.key = i
  for (var k = 0; k < columns.length; k++) {
    if (columns[k].includes('CNT')) {
      colObj[columns[k]] = milliFormat(data[i][k])
    } else if (columns[k].includes('RATE')) {
      colObj[columns[k]] = toPercent(data[i][k])
    } else {
      colObj[columns[k]] = data[i][k]
    }
  }
  dataSource.push(colObj)
}
return dataSource

}spa

//設置列表的表頭數據 3d

export const setColumns = (columnsData, pointFilter,type) => {code

const columns = []
for (var i = 0; i < columnsData.length; i++) {
  let obj = {}
  obj.title = columnsData[i]
  obj.dataIndex = columnsData[i]
  obj.key = columnsData[i]
  obj.align = 'center'
  let filters = []
  if (type === 'compare') {
    obj.width = 100
    obj.fixed = 'left'
  }
  if (typeof (pointFilter[i][0]) == 'string') {
    for (var k = 0; k < pointFilter[i].length; k++) {
      let filter = {}
      filter.text = pointFilter[i][k]
      filter.value = pointFilter[i][k]
      filters.push(filter)
    }
    obj.filters = filters
    obj.onFilter = (value, record) => record[obj.dataIndex].indexOf(value) === 0
    obj.filterMutiple = true
    obj.sorter = function (a, b) {
      return a[obj.dataIndex].localeCompare(b[obj.dataIndex])
    }
  }
  if (columnsData[i].includes('CNT')) {
    obj.sorter = function (a, b) {
      return toNumber(a[obj.dataIndex]) - toNumber(b[obj.dataIndex])
    }
  } else if (columnsData[i].includes('RATE')) {
    obj.sorter = function (a, b) {
      return parseFloat(a[obj.dataIndex].slice(0, -1)) - parseFloat(b[obj.dataIndex].slice(0, -1))
    }
  }
  if (columnsData[i] == 'BUF_RATE') {
    obj.render = function (text, record, index) {
      const data = parseFloat(text.slice(0, -1))
      if (data > 8) {
        return (<span className="yellow">{record.BUF_RATE}</span>)
      } else if (data > 4 && data <= 8) {
        return (<span className="red">{record.BUF_RATE}</span>)
      } else {
        return (<span>{record.BUF_RATE}</span>)
      }
    }
  }
  columns.push(obj)
}
return columns

}orm

// pointData ['河北省','電信',45246,0.32546,0.005456],[...]
// columndata ['province', 'stp', cnt, buffer, abort]
// 生成關於省份的去重的數組
export const initTablePoints = (pointData, columnData) => {blog

let initPoints = []
for (var k = 0; k < columnData.length; k++) {
    let point = []
    for (var i = 0; i < pointData.length; i++) {
        point.push(pointData[i][k])
    }
    var pointMap = [...new Set(point)]
    initPoints.push(pointMap)

}
return initPoints

}
最終效果圖:
5.jpg隊列

相關文章
相關標籤/搜索