Слияние кода завершено, страница обновится автоматически
Введение
Layui Table: решение проблемы с большим количеством столбцов данных. Изначально целью было создать удобный в использовании интерфейс, подобный уже существующим решениям.
Поддерживаемые функции:
Контакты:
730991854.Проблемы совместимости
Быстрый старт
layui.config({
base: '../opTable'
}).extend({
opTable: '/opTable'
}).use(['opTable'], function () {
var opTable = layui.opTable.render({
elem: '#test'
, id: '#test'
, url: 'static/test.json'
, toolbar: '#toolDemo'
, cols: [[
{field: 'id', title: 'ID', sort: true}
, {field: 'username', title: '用户名', edit: true}
, {field: 'classify', title: '职业'}
, {field: 'city', title: '城市', edit: true}
, {title: '操作', toolbar: '#barDemo', width: 150, align: "center"}
]]
// Расширенные столбцы конфигурации
, openCols: [
{field: 'sex', title: '性别'}
, {field: 'logins', title: '登录名', edit: true}
, {field: 'sign', title: '签名'}
, {field: 'wealth', title: '财富'}
, {field: 'experience', title: '经验值'}
, {field: 'experience', title: '积分'}
, {field: 'score', title: '分数', edit: true}
]
});
});
Эффект предварительного просмотра
Настраиваемые свойства
Глобальные методы
Методы обратного вызова
layui.opTable.render({
elem: '#test1'
, id: '#test1'
, url: 'static/test.json'
, cols: [[
{field: 'id', title: 'ID', sort: true}
, {field: 'username', title: '用户名', edit: true}
, {field: 'city', title: '城市', edit: true}
]],
/**
* Отображение развёрнутой таблицы: параметры поддерживают все параметры layui
* @param itemData текущая строка данных
* Возвращает: поддерживает все настройки таблицы layui
*
* Примечание: значение параметра lay-filter дочерней таблицы совпадает со значением ID параметра (# удаляется).
*/
openTable: function (itemData) {
return {
// Поскольку одновременно поддерживается развёртывание нескольких таблиц, сборка уникального идентификатора
elem: '#child' + itemData.LAY_INDEX
, id: 'child' + itemData.LAY_INDEX
, url: 'static/test.json'
, page: true
, where: {id: itemData.id}
, cols: [[
{field: 'id', title: 'ID'}
, {field: 'username', title: '用户名'}
, {field: 'logins', title: 'Логин'}
, {field: 'city', title: 'Город'}
, {field: 'classify', title: 'Профессия'}
, {field: 'wealth', title: 'Состояние'}
, {field: 'experience', title: 'Популярность'}
, {field: 'score', title: 'Оценка'}
, {title: 'Операция', toolbar: '#barDemo', ширина: 150}
]]
}
}
});
var opTable = layui.opTable.render({
elem: '#test-tree'
, id: '#test-tree'
, url: 'static/test.json'
, cols: [[
{field: 'id', title: 'ID', sort: true}
, {field: 'username', title: 'Пользователь', edit: true}
, {field: 'city', title: 'Город', edit: true}
]]
/**
``` **Расширение отображения древовидной таблицы**
openTable: function (itemData) { return { elem: '#child_1_' + itemData.LAY_INDEX, id: 'child_1_' + itemData.LAY_INDEX, url: 'static/test2.json', page: true, cols: [ [{field: 'id', title: 'ID', edit: true}], [{field: 'username', title: '用户名'}], [{field: 'logins', title: '登录名'}] ], openTable: function(itemData) { return { elem: '#child_2_' + itemData.LAY_INDEX, id: 'child_2_' + itemData.LAY_INDEX, url: 'static/test2.json', page: true, cols: [ [{field: 'id', title: 'ID', edit: true}], [{field: 'username', title: '用户名'}], [{field: 'logins', title: '登录名'}] ], openTable: function(itemData) { return { elem: '#child_3_' + itemData.LAY_INDEX, id: 'child_3_' + itemData.LAY_INDEX, url: 'static/test2.json', openVisible: false, cols: [ [{field: 'id', title: 'ID', edit: true}], [{field: 'username', title: '用户名'}], [{field: 'logins', title: '登录名'}], [{field: 'city', title: '城市'}], [{field: 'classify', title: '职业'}], [{field: 'wealth', title: '财产值'}], [{field: 'experience', title: '人气值'}], [{field: 'score', title: '分数'}], {title: '操作', toolbar: '#barDemo', width: 150} ], done: function() { // 监听子表 修改 layui.table.on('edit(' + 'child' + itemData.LAY_INDEX + ')', function(obj) { layer.msg(JSON.stringify(obj.data, null, "\t")); }); }, onEdit: function(data) { console.log("表格4修改", data); } } } } } } }, openType: 1, onEdit: function(data) { console.log("表格1修改", data), layer.msg(JSON.stringify(data)); } });
**Эффект предварительного просмотра**
*Изображение не представлено.*
**Расширение содержимого древовидной таблицы из сети**
layui.opTable.render({ elem: '#test2', id: '#test2', url: 'static/test.json', cols: [ [{field: 'id', title: 'ID', sort: true}], [{field: 'username', title: '用户名', edit: true}], [{field: 'city', title: '城市', edit: true}] ], // 展开的列从网络加载 openNetwork: { openCols: [ {field: 'sign', title: '签名'}, {field: 'wealth', title: '财富'}, {field: 'experience', title: '积分'}, {field: 'classify', title: '职业'} ], /** * * @param data 当前行数据 * @param success 成功 * @param message 显示异常消息[没有数据 出错 等] */ onNetwork: function(data, success, message) { // 从网络加载 layui.$.ajax({ type: "get", url: "static/test1.json", dataType: "json", data: {id: data.id}, async: true, success: function(resp) { if (resp.code === 200) { setTimeout(function() { if (data.id === 10000) { message("加载出错"); } else { success(resp.data); } }, 200); } else { message("没有数据"); } }, error: function(err) { message("加载出错"); } }); } } });
**Эффект предварительного просмотра**
*Изображение не представлено.*
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )