【JQuery】创建动态表格（使用部分easyui组件）

最新推荐文章于 2023-08-06 07:24:54 发布

粥粥周周舟舟

最新推荐文章于 2023-08-06 07:24:54 发布

阅读量1.2k

点赞数

分类专栏： datagrid easyui jquery 文章标签： jquery easyui datagrid

本文链接：https://blog.csdn.net/weixin_42717849/article/details/92796925

版权

本文介绍了如何使用jQuery结合EasyUI组件创建动态表格，详细讲述了从使用datagrid遇到的问题，到通过HTML结构配合jQuery动态生成表格并初始化组件的解决过程。涉及到表格的复杂表头、统计列、单元格事件处理、新增、修改和删除操作，以及jQuery方法和input事件的运用。

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

一直用easyui创建表格，忽然要用到jquery的时候真的是很不熟悉，在各种试错中浪费了很多时间，好在终于也是接近尾声了，接下来把思路理一理。

以下分别为原型图和效果图，数据为后台获取，动态生成的：
这是原型图这是效果图

之前的表格使用的都是easyui datagrid，这次也想使用easyui datagrid。注意这种复杂表头的定义，对于“出发”，“到达”等这种并没有实际对应值的列，需要定义：field: ''，否则表头是不能正常显示的。
表的内容也可以调取查询方法正常显示。
对于表尾，可以使用footer来定义统计列，
问题： 对于之后的总额这行没有办法定义，所以这个表格无法使用easyui datagrid进行渲染。

使用 thead, tfoot, tbody在html中画出表格结构，其中thead和tfoot是直接在html中定义好的，tbody部分的内容需要在js中动态生成。每个单元格都包含一个input框，其中项目列为组合框，设置好对应的包含行索引的id。
需要调用部分easyui组件。easyui numberbox以及eas

关注

专栏目录