easyUI_datagrid组件的使用及举例

最新推荐文章于 2024-03-18 21:27:04 发布

西米露U

最新推荐文章于 2024-03-18 21:27:04 发布

阅读量469

点赞数

分类专栏： easyui datagrid 文章标签： java 数据库 javascript 数据分析

本文链接：https://blog.youkuaiyun.com/m0_46699799/article/details/106946397

版权

本文介绍了easyUI的datagrid组件，它提供丰富的数据展示和操作功能。首先，展示了静态实现datagrid组件的方式及其局限性；接着，通过JavaScript和JSON数据导入，增加了灵活性；最后，详细说明了如何结合数据库，通过web层处理数据，实现动态加载，包括数据库操作、数据封装、Web层处理和前端JS交互。文章提供了完整的代码示例和效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

datagrid组件

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

静态实现datagrid组件

代码

在这里插入图片描述

效果

在这里插入图片描述
这种的数据是定死了的，不灵活。
第二种是利用js和json文件来导入数据

使用Javascript

代码

在这里插入图片描述

效果

在这里插入图片描述
这种基于上一种比较灵活，但是还是不能满足我们的开发需求，我们如果要从数据库表中得到数据的话，就需要第三种方式——web层编写datagrid

举例

需求：

显示所有数据
分页
模糊查询

这里举例用的是第三种方法举例

代码

用到的数据库表的sql文件：

INSERT INTO t_easyui_user_version1
   (`SerialNo`, `Menuid`, `uid`, `uname`, `upwd`)
VALUES
   ('1', '001', '001', '张三', '123456');

INSERT INTO t_easyui_user_version1
   (`SerialNo`, `Menuid`, `uid`, `uname`, `upwd`)
VALUES
   ('2', '002', '002', '李四', '123456');

INSERT INTO t_easyui_user_version1
   (`SerialNo`, `Menuid`, `uid`, `uname&#

最低0.47元/天解锁文章