html5表格树,jquery插件treegrid树状表格的使用方法详解（.Net平台）

首先，需要在项目中引入treegrid插件的相关文件，包括js和css文件。可以在官网上下载最新版本的插件。

然后，在html页面中创建一个表格，指定id属性和class属性为"treegrid"，并定义表头和表身。

接下来，需要在js文件中编写代码来初始化treegrid插件，实现树状表格的展示和交互。具体步骤如下：

1. 引入treegrid插件的js文件。

2. 在页面加载完成后，获取表格元素，并调用treegrid方法进行初始化。

$(function () {
    var table = $('#myTable');
    table.treegrid({
        // 插件参数
    });
});

3. 配置插件参数，包括表格数据、列定义、排序方式、是否显示折叠图标等。

table.treegrid({
    // 数据相关参数
    idField: 'id', // 数据的id字段名
    treeField: 'name', // 树形结构的字段名
    parentField: 'parentId', // 父节点的id字段名
    data: myData, // 表格数据

    // 列定义
    columns: [[
        { field: 'id', title: 'ID', width: 50 },
        { field: 'name', title: '名称', width: 200 },
        { field: 'price', title: '价格', width: 100 }
    ]],

    // 排序方式
    sortName: 'name',
    sortOrder: 'asc',

    // 显示折叠图标
    expanderExpandedClass: 'glyphicon glyphicon-minus',
    expanderCollapsedClass: 'glyphicon glyphicon-plus'
});

4. 可以通过插件提供的方法来实现树状表格的交互，如展开、折叠、选中、取消选中等。

// 展开节点
table.treegrid('expand', nodeId);

// 折叠节点
table.treegrid('collapse', nodeId);

// 选中节点
table.treegrid('select', nodeId);

// 取消选中
table.treegrid('unselect', nodeId);

以上就是使用treegrid插件创建树状表格的详细步骤。需要注意的是，插件的具体使用方式可能因版本不同而略有差异，建议在使用前查看官方文档。