Easyui中DataGrid（数据表格）

最新推荐文章于 2024-08-14 12:36:58 发布

Smootht

最新推荐文章于 2024-08-14 12:36:58 发布

阅读量975

点赞数 3

分类专栏： easyui 文章标签： html java javascript mysql

本文链接：https://blog.csdn.net/Smootht/article/details/106933883

版权

本文介绍了Easyui中的DataGrid组件，它是一个强大的数据表格，支持选择、排序、分组和编辑。详细讲解了两种在jsp页面实现DataGrid的方式，包括通过HTML表格和JavaScript动态创建，并展示了实践操作步骤，包括界面创建、js文件配置和最终效果。同时强调了查阅API文档的重要性。

摘要由CSDN通过智能技术生成

1.DataGrid简介

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

2.实现过程

2.1jsp页面的代码块（两种方式）

第一种

从现有的表格元素中创建DataGrid，在HTML中定义列、行和数据

<table class="easyui-datagrid">   
    <thead>   
        <tr>   
            <th data-options="field:'code'">编码</th>   
            <th data-options="field:'name'">名称</th>   
            <th data-options="field:'price'">价格</th>   
        </tr>   
    </thead>   
    <tbody>   
        <tr>   
            <td>001</td><td>名称1</td><td>2323</td>   
        </tr>   
        <tr>   
            <td>002</td><td>名称2</td><td>4612</td>   
        </tr>   
    </tbody>   
</table>