bootstrap-treetable

Приостановка поддержки, спасибо за вашу поддержку!

Проект

Этот проект изначально появился в guns, основан на jquery.treegrid.js и представляет собой дерево. Однако в процессе практического применения было обнаружено, что при большом объёме данных возникают проблемы с производительностью, поэтому от него отказались и заново реализовали соответствующие функции.

Использование аналогично bootstrap-table.

PS: Если вам не нужны фиксированные столбцы, рекомендуется использовать версию 1.0.6.

Обновление от 12 февраля 2019 года

• Исправлена проблема с передачей параметров при обновлении BootstrapTreeTable.prototype.refresh.

Обновление от 6 декабря 2018 года

• Изменение размера окна приводит к адаптации заголовка.
• Исправление ошибки параметра bordered.
• Устранение проблемы, когда фиксированный столбец не отображается, если таблица не выходит за пределы ширины.
• Исправлено сворачивание и разворачивание.

Обновление от 1 декабря 2018 года

• Решена проблема невозможности выбора строки при нажатии на флажок.
• Добавлен параметр field для столбцов, в настоящее время поддерживается только левый фиксированный столбец, и фиксированный столбец нельзя скрыть (рекомендуется использовать одинаковую ширину для всех фиксированных столбцов).

Обновление от 3 ноября 2018 года — не рекомендуется к использованию [эта версия нестабильна и содержит ошибки, рекомендуется использовать предыдущую версию. Автор в последнее время очень занят и может потребоваться некоторое время...]

• Повторно реализован фиксированный thead.
• Совместимость с bootstrap4, то есть стиль V4 кажется немного большим, эта проблема здесь не решается.
• Встроен ICON, поскольку bootstrap4 больше не имеет ICON. Если он вам не нравится, вы можете заменить его, используя собственные параметры.
• Новые параметры width, toolColumnsClass, toolRefreshClass.

Обновление от 12 октября 2018 года

• Переработана структура кода, следуя примеру кода автора BootstrapTable.
• Добавлено событие 'onAll', 'onClickCell', 'onDblClickCell', 'onClickRow', 'onDblClickRow', 'onLoadSuccess', 'onLoadError'.
• Метод destroy добавлен.

Обновление от 29 сентября 2018 года

• Конденсированный и hover параметры добавлены.
• Некоторые стили bordered исправлены.
• Проблема с выравниванием ширины заголовка при появлении полосы прокрутки решена.
• Некоторые стили исправлены, чтобы быть ближе к исходному bootstrap.

Обновление от 25 сентября 2018 года

• Параметр showRefresh добавлен.
• Ошибка showColumns исправлена.
• Код частично переработан.

Обновление от 19 сентября 2018 года

• Методы toggleRow, expandRow, collapseRow, expandAll, collapseAll, showColumn, hideColumn добавлены.
• Параметр showTitle добавлен, чтобы указать, следует ли отображать содержимое поля с помощью свойства title (отформатированные данные не будут отображаться).
• Параметр showColumns добавлен, чтобы определить, показывать ли раскрывающийся список содержимого столбца.
• Демо обновлено.

Обновление от 8 сентября 2018 года

• Параметры столбцов align, valign и visible добавлены.
• Оптимизирован CSS-стиль.

Обновление от 31 августа 2018 года

• Оптимизация метода appendData, который больше не обновляет всю таблицу, а если идентификатор добавляемых данных повторяется, используется последняя запись.
• Поскольку проблема выбора данных была решена, настройка кода удалена, parentCode заменён на parentId, rootCodeValue заменён на rootIdValue, конфигурация упрощена.

Обновление от 23 августа 2018 года

• Сжатие дочерних строк оптимизировано, сохранение записей о развёртывании после сжатия.
• getSelections метод оптимизирован, возвращаемые данные больше не являются данными отображаемого столбца, а являются исходными данными.
• Новый метод appendData добавлен, почему это appendData вместо appendChildNode? Потому что можно добавить любые данные в таблицу (формат данных такой же, как у исходных данных), но пока это всё ещё обновление всей таблицы.

DEMO 1

<table id="demo"></table>
var treeTable = $('#demo').bootstrapTreeTable({
    columns: [{
        title: '菜单名称',
        field: 'menuName',
        width: '20%',
        formatter: function(value,row, index) {
            if (row.icon == null || row == "") {
                return row.menuName;
            } else {
                return '<i class="' + row.icon + '"></i> <span class="nav-label">' + row.menuName + '</span>';
            }}
    }],
    data:[{
        "id": 1,
        "menuName": "系统管理",
        "parentId": 0,
        "icon": "glyphicon glyphicon-thumbs-up"
    }, {
        "id": 2,
        "menuName": "系统监控",
        "parentId": 0,
        "icon": "glyphicon glyphicon-thumbs-up"
    }, {
        "id": 100,
        "menuName": "用户管理",
        "parentId": 1,
        "icon": "#"
    }, {
        "id": 101,
        "menuName": "角色管理",
        "parentId": 1,
        "icon": "#"}]
});

DEMO 2

<div id="demo-toolbar" class="btn-group" role="group">
  <button type="button" class="btn btn-default">新增</button>
  <button type="button" class="btn btn-default">编辑</button>
  <button type="button" class="btn btn-default">删除</button>
</div>
<table id="demo"></table>
var treeTable = $('#demo').bootstrapTreeTable({
    type: 'get',                   // 请求方式（*）
    url: "./data.json",            // 请求后台的URL（*）
    ajaxParams : {},               // 请求数据的ajax的data属性
    toolbar: "#demo-toolbar",      //顶部工具条
    expandColumn : 1,              // 在哪一列上面显示展开按钮
    columns: [{
        field: 'selectItem',
        checkbox: true
     },{
        title: '菜单名称',
        field: 'menuName',
        width: '20%',
        formatter: function(value,row, index) {
            if (row.icon == null || row == "") {
                return row.menuName;
            } else {
                return '<i class="' + row.icon + '"></i> <span class="nav-label">' + row.menuName + '</span>';
            }}}
]);

Все параметры таблицы

id: 'id',                                                   // значение выбранного элемента, используемое для установки отношений родитель-потомок
parentId: 'parentId',                                       // используется для установки отношений родитель-потомок
rootIdValue: null,                                          // установить значение идентификатора корневого узла----можно указать корневой узел, по умолчанию null,"",0,"0"
data: null,                                                 // набор данных для построения таблицы
type: "GET", **Запрос данных типа ajax**

*url:* null,  
*ajaxParams:* {},  
*expandColumn:* 0,  
*expandAll:* false,  
*expandFirst:* true,  
*striped:* false,  
*bordered:* true,  
*hover:* true,  
*condensed:* false,  
*columns:* [],  
*toolbar:* null,  
*width:* 0,  
*height:* 0,  
*showTitle:* true,  
*showColumns:* true,  
*showRefresh:* true,  
*expanderExpandedClass:* 'bstt-icon bstt-chevron-down',  
*expanderCollapsedClass:* 'bstт-icon bstт-chevron-right',  
*toolRefreshClass:* 'bstт-icon bstт-refresh',  
*toolColumnsClass:* 'bstт-icon bstт-columns'.

**Все параметры столбцов**

*radio:* false,  
*checkbox:* false,  
*field:* undefined,  
*title:* undefined,  
*align:* undefined,  
*valign:* undefined,  
*width:* undefined,  
*visible:* true,  
*fixed:* undefined,  
*formatter:* undefined.

**Методы**

*getSelections,*  
*refresh,*  
*appendData,*  
*toggleRow,*  
*expandRow,*  
*collapseRow,*  
*expandAll,*  
*collapseAll,*  
*showColumn,*  
*hideColumn,*  
*destroy.*

**События**

*onAll,*  
*onLoadSuccess,*  
*onLoadError,*  
*onClickCell,*  
*onDblClickCell,*  
*onClickRow,*  
*onDblClickRow.*

**Пример**

*«Обновление»*

$('#demo').bootstrapTreeTable('refresh');

*«Обновление с параметрами»*

var params = { searchKey:"haha" }; $('#demo').bootstrapTreeTable('refresh',params);

*«Получение выбранных данных»*

var selected = $('#demo').bootstrapTreeTable('getSelections'); //为了兼容bootstrap-table的写法，统一返回数组

*«Добавление данных в таблицу»*

//任意添加数据到表格（数据格式与原数据一样） //注：重复数据将以最后一条为准 var data = [{ "searchValue": null, "createBy": "admin", "createTime": "2018-03-16 11:33:00", "updateBy": null, "updateTime": null, "remark": null, "params": null, "id": 1038, "menuName": "在线查询", "parentName": null, "parentId": 109, "orderNum": "1", "url": "#", "menuType": "F", "visible": 0, "perms": "monitor:online:list", "icon": "#" },{...}]; $('#demo').bootstrapTreeTable('appendData',data);