В фоновом режиме управления мы будем использовать большое количество компонентов табличной формы для импорта и экспорта различных отчетов.В некоторых сценариях нам необходимо визуально анализировать данные отчета и динамически генерировать визуальные диаграммы.На основе приведенных выше сценариев автор резюмирует некоторые практическиеTableНавыки разработки компонентов, чтобы фронтенд-разработка больше не была сложной.
классический
- Легко научить вас, как перетаскивать компоненты, масштабировать, масштабировать с несколькими контрольными точками и создавать отчеты о данных с помощью перетаскивания.
- Схема конструкции визуальной строительной платформы методом перетаскивания на основе компоновки естественного потока
- Реализация визуального редактора страницы H5 на основе React+Koa - H5-Dooring
Демонстрация эффекта
технический пункт
- выполнитьTableДинамический рендеринг
- TableСортировка, сортировка по нескольким столбцам, пользовательский поиск
- Пакетный импортExcelвизуализация данныхTable
- БудуTableДанные экспортируются какExcelдокумент
- на основеTableАвтоматически генерировать многомерные визуальные отчеты от данных
- реализовать простойTableредактор
Выше приведены несколько часто используемых бизнес-подсценариев, а затем автор предложит вам реализовать их один за другим.
Техническая реализация
1. РеализацияTableДинамический рендеринг
Как правило, когда мы отрисовываем таблицы, большинство из них заранее записывают структуру таблицы, что лучше, чем предварительное ее определение.columnsЗатем запросите данные из бэкенда для заполнения формы следующим образом:
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
];
const dataSource = [
{
key: '1',
name: '徐小夕',
age: 18,
address: '杭州夕湖区',
}
];
<Table dataSource={dataSource} columns={columns} />
Хотя этот бизнес-сценарий может удовлетворить требования большинства систем фонового управленияTableтребования, вы также можете использоватьantdилиelementпостроить, но дляlowcodeС точки зрения системы многие модули неопределенны, нам нужнопротокола такжеданныеводитьTableрендеринга.
Например, мыH5-DooringФорма настроена в , и мы хотим статистически проанализировать данные формы. Поскольку элементы формы неопределенны, мы не можем определить форму заранее.table schema.
Как сделать это динамическиTableЧто? Вот идея для всех, основанных на ограничениях слоя протокола Data + Protocol. аналогично иностранномуSAPПлатформа с низким кодом, полностью основанная наodataпротокол, мы можем ограничить формат отправки данных формы, а затем объединить данные, отправленные пользователем, для динамического извлеченияTableнужныйcolumns, и, наконец, визуализироватьTableкомпонент.
Уровень протоколаВ основном он ограничивает типы отображения различных полей, таких как строки, кнопки, ссылки, метки и т. д. После отправки формы пользователь будет нести соответствующий уровень протокола.flagи введенные пользователем значения, которые полезны для нашего синтаксического анализатора для отображенияTableВы можете отображать разные типы для разных столбцов следующим образом:
Автор просто реализуетdemo, следующим образом:
// table数据源
let tableData = res.map((item:any,i:number) => ({ ID: nanoid(8), ...item }));
let baseRow = tableData[0],
keys = Object.keys(baseRow);
setColumns(() => {
const baseColumn = keys.map(item => {
return {
title: item,
dataIndex: item,
key: item,
width: item === 'ID' ? 0 : null,
render: (v:any) => {
if(typeof v === 'object') {
return <>
{
v.map(item => <Tag color="#2F54EB">{ item.label || item }</Tag>)
}
</>
}
return item === 'ID' ? '' : v
}
}
})
baseColumn.push({
title: '操作',
key: 'operation',
fixed: 'right',
width: 100,
render: (row) => <a onClick={() => handleDel(row)}>删除</a>,
})
return baseColumn
})
Выше мы реализовали динамическийTableСхема рендеринга, использованная в кейсеreact, вы также можете использовать знакомыйvue3.0.
2. TableСортировка, сортировка по нескольким столбцам, пользовательский поиск
TableСортировка, реализация многоколоночной сортировки тоже очень проста, нужно только настроитьTableзаголовок, продвигает поле сортировки кTableпубликаState, и, наконец, сортировать по идентификатору сортировки и методу сортировки, В настоящее время antd4.0 уже поддерживает сортировку по нескольким столбцам, вы можете напрямую обратиться к обучению следующим образом:Для пользовательского поиска это начало статьиdemoДля поиска по отображаемому столбцу мы можем реализовать следующие решения:
const getColumnSearchProps = dataIndex => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
ref={node => {
searchInput = node;
}}
placeholder={`Search ${dataIndex}`}
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Space>
<Button
type="primary"
onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
icon={<SearchOutlined />}
size="small"
style={{ width: 90 }}
>
搜索
</Button>
<Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
重置
</Button>
</Space>
</div>
),
filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
onFilter: (value, record) =>
record[dataIndex]
? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
: '',
onFilterDropdownVisibleChange: visible => {
if (visible) {
setTimeout(() => searchInput.select(), 100);
}
},
render: text =>
searchedColumn === dataIndex ? (
<Highlighter
highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
searchWords={[searchText]}
autoEscape
textToHighlight={text ? text.toString() : ''}
/>
) : (
text
),
});
На данный момент нам нужно только динамически генерироватьcolumnsДобавьте настраиваемый заголовок для каждого столбца:
{
title: item,
dataIndex: item,
key: item,
...getColumnSearchProps(item)
}
antd4.0Также есть подробные методы использования, которые автор не будет здесь вводить по одному.Эффекты следующие:Каждый может такжеH5-DooringПроверьте конкретный эффект в фоновом режиме управления.
3. Пакетный импортExcelвизуализация данныхTable
Во многих бэкэндах анализа данных нам нужно обрабатывать много электронных таблиц, используя традиционныеexcelМетод ручного ввода постепенно будет упразднен.Например, разные каналы собрали много бизнес-данных и отсортировали их в excel.Как быстро сохранить в свою бэкенд-систему?Общая идея такова:
- Введите по одному через форму
- Файл фонового синтаксического анализа преобразуется в стандартизированную структуру данных, которую можно хранить в базе данных.
- Интерфейсная реализация импортаexcel, автоматически синхронизировать данные
Так как первое решение слишком неэффективно, то оно подходит для ручного ввода пользователями C. Мы его пока проигнорируем. Автор реализует третье решение. Идея реализации такова:
Здесь мы используемXLSXЭта библиотека в сочетании сFileReader API, мы проходимFileReaderполучатьexcelдвоичные данные файла, затем передаются вXLSXРазобрать в jsobject, наконец написано авторомвизуализатор таблицыгенерировать в соответствии со спецификациейtableСтруктура данных Исходный код выглядит следующим образом:
// 解析并提取excel数据
let reader = new FileReader();
reader.onload = function(e) {
let data = e.target.result;
let workbook = XLSX.read(data, {type: 'binary'});
let sheetNames = workbook.SheetNames; // 工作表名称集合
let draftArr = {}
sheetNames.forEach(name => {
let worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表
for(let key in worksheet) {
// v是读取单元格的原始值
if(key[0] !== '!') {
if(draftArr[key[0]]) {
draftArr[key[0]].push(worksheet[key].v)
}else {
draftArr[key[0]] = [worksheet[key].v]
}
}
}
});
// 得到table合法的数据产物
const sourceData = Object.values(draftArr);
}
reader.readAsBinaryString(file);
получить легальныйtableПосле источника данных мы можем выполнить динамическую визуализацию, упомянутую в первом разделе.Tableлогика.
С помощью вышеуказанных методов мы можем создать любую структуруexcelИмпорт форм.После импорта мы можем автоматически отправлять запросы на сохранение их в нашем бизнес-фоне.
4. будетTableДанные экспортируются какExcel
Точно так же выше мы ввелиexcelимпортtable, мы также можем использоватьTableЭкспортировать вexcel, для распространения и локализации данных, таких как наши недавние популярные онлайн-документы и другие приложения. Автор кратко рассказывает об идеях реализации здесь:
То есть обратный синтаксический анализ, о котором мы говорили в Разделе 3.excelФайл создан автором с использованиемjs-export-excelОсновываясь на этой библиотеке, автор реализовал готовый метод, чтобы избежать выжигания мозгов и строительства колес.
import ExportJsonExcel from 'js-export-excel';
const generateExcel = () => {
let option:any = {}; //option代表的就是excel文件
let dataTable = []; //excel文件中的数据内容
let len = list.length;
if (len) {
for(let i=0; i<len; i++) {
let row = list[i];
let obj:any = {};
for(let key in row) {
if(typeof row[key] === 'object') {
let arr:any = row[key];
obj[key] = arr.map((item:any) => (typeof item === 'object' ? item.label : item)).join(',')
}else {
obj[key] = row[key]
}
}
dataTable.push(obj); //设置excel中每列所获取的数据源
}
}
let tableKeys = Object.keys(dataTable[0]);
option.fileName = tableName; //excel文件名称
option.datas = [
{
sheetData: dataTable, //excel文件中的数据源
sheetName: tableName, //excel文件中sheet页名称
sheetFilter: tableKeys, //excel文件中需显示的列数据
sheetHeader: tableKeys, //excel文件中每列的表头名称
}
]
let toExcel = new ExportJsonExcel(option); //生成excel文件
toExcel.saveExcel(); //下载excel文件
}
5. На основеTableАвтоматически создавать многомерные визуальные отчеты на основе данных
В системе фонового управления иBIНа платформе мы столкнемся с большим количеством анализа данных и показом отчетов, а затем автор расскажет, как основываться наTableГенерация динамических данныхОтчет многомерного визуального анализа.
Автор ввел понятие чрезмерного объема в предыдущей статье.Для анализа данных нам также необходимо рассмотреть понятие анализируемых измерений, например, что анализируется и что не анализируется.Например, у нас есть другая таблица, которая содержит следующую структуру:Для контактной информации она не поддается измерению, то есть не имеет значения для анализа индекса, поэтому мы не должны анализировать ее при автоматической генерации многомерного анализа.На основе этого принципа мы разрабатываем простую схему автоматической генерации отчета многомерной визуализации.
5.1 Получение размерных данных на основе источников данных
Мы измеряем размер с атрибутом диапазона для генерации данных измерения, код выглядит следующим образом:
const generateDistData = (key:string, list:any) => {
let distDataMap:any = {},
distData = []
list.forEach((item:any) => {
// 当前纬度的类别
let curKey = typeof item[key] === 'object' ? item[key][0].label : item[key];
if(distDataMap[curKey]) {
distDataMap[curKey]++;
}else {
distDataMap[curKey] = 1;
}
})
// 生成目标数组
for(let key in distDataMap) {
distData.push({name: key, value: distDataMap[key]})
}
return distData
}
На данный момент нам нужно только получить значение данных определенного измерения в соответствии с полем измерения, а затем отобразить его с помощью компонента визуализации.
5.2 Создание визуального отчета на основе параметра
мы используем@ant-design/charts, код показан ниже:
<div className={styles.anazlyHeader}>
<div className={styles.anazlyItem}>
<span>分析纬度: </span>
<Select style={{ width: 120 }} onChange={(v) => handleAnazlyChange(0, v)} defaultValue={keys[0]}>
{
keys.map((item,i) => {
return <Option value={item} key={i}>{ item }</Option>
})
}
</Select>
</div>
</div>
<div className={styles.anazlyContent}>
{
!!config && <Pie {...config} />
}
</div>
Эффект следующий:
6. Реализуйте простойTableредактор
выполнитьTableРедактор на самом деле является авторомКак создать отчет анализа многомерной визуализации данных одним щелчком мыши на интерфейсебыл детально проанализирован и интегрирован вH5-Dooringв редакторе визуальных компонентов , в частностиdemoследующим образом:
Кому интересно, может изучить.
наконец
Автор все еще обновляетсяH5редакторH5-Dooring, чтобы недавно синхронизировать функцию:
- Исправить ошибку выбора библиотеки изображений
- Добавьте провинциальные и муниципальные каскадные компоненты
- Добавьте возможность массового импорта данных Excel.
- Добавить пользовательскую проверку формы
- Аудиокомпоненты добавляют автоматическое управление воспроизведением, циклическое воспроизведение и другие элементы конфигурации.
- Добавить горизонтальный скользящий компонент
найти его полезным? Любимый, если хотите, кстатиотличныйЧто ж, ваша поддержка - моя самая большая поддержка! Поиск в WeChat »Интересный разговор о фронтенде», откройте для себя больше интересных игр H5, webpack, node, gulp, css3, javascript, nodeJS, визуализацию данных на холсте и другие интерфейсные знания и реальный бой.