treelist 使用实例

treelist 是一个常用的树形表格控件，其使用示例如下：

1. 引入treelist组件和样式文件：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqtreegrid/5.5.22/jqtreegrid.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqtreegrid/5.5.22/tree.jquery.js"></script>

2. 创建treelist容器：

<div id="treeGrid"></div>

3. 初始化treelist：

$(function() {
    $('#treeGrid').treegrid({
        // 设置treelist的列信息
        columns: [{
            id: 'id',
            text: '编号',
            width: 100,
            align: 'center',
            dataIndex: 'id'
        }, {
            id: 'name',
            text: '名称',
            width: 200,
            align: 'left',
            dataIndex: 'name'
        }, {
            id: 'price',
            text: '价格',
            width: 100,
            align: 'right',
            dataIndex: 'price'
        }],
        // 设置treelist的数据
        data: [{
            id: 1,
            name: '商品1',
            price: 100,
            children: [{
                id: 2,
                name: '商品1-1',
                price: 50
            }, {
                id: 3,
                name: '商品1-2',
                price: 60
            }]
        }, {
            id: 4,
            name: '商品2',
            price: 200
        }]
    });
});

4. treelist的其他常用配置：

$('#treeGrid').treegrid({
    // 省略columns和data配置
    // 设置treelist的高度
    height: 300,
    // 设置是否显示行号
    rownumbers: true,
    // 设置是否显示表头
    showHeader: true,
    // 设置是否显示水平滚动条
    nowrap: false,
    // 设置是否显示垂直滚动条
    scroll: true,
    // 设置是否允许多选
    multiple: true,
    // 设置是否允许拖拽排序
    reorderable: true,
    // 设置是否允许拖拽改变列宽
    resizable: true,
    // 设置是否允许拖拽改变行高
    rowResizable: false,
    // 设置是否允许展开收缩
    collapsible: true,
    // 设置展开收缩的动画效果
    animate: true
});

以上就是treelist的简单使用示例，更多treelist的使用方法和配置项可以查阅官方文档。