easygrid datagrid 列移动插件开发

本文介绍了一款基于easygrid的列移动插件开发过程。该插件通过DOM操作实现表头拖拽移动,避免了表格刷新及数据重载,提高了用户体验。

easygrid datagrid 列移动插件开发

今天,分享一个之前 项目需求开发的 一款 easygrid datagrid 列移动插件,这款插件是在 别人的轮子之上修改而来的

别人的轮子

总的思想是 通过 改变 datagrid options 选项中的 columns ,然后 重新加载数据,实现列移动

  1. 通过拖拽实现 表头的移动
  2. 通过 改变 datagrid options 选项中的 columns ,重新声明一次表格,然后 重新加载数据,实现列移动

有个弊端在于, 需要重新声明一次表格,如果存在表头和 表footer都重新刷新,当然将刷新之前的 footer options 保存下来,后面再次声明 footer 一样可以解决问题

轮子之上的修改

总的思想是: 通过 dom 操作 改变 datagrid panel 区域的 列单元移动

  1. 通过拖拽实现表头移动
  2. 通过 dom 操作 改变 datagrid panel 区域的 列单元移动

优点在于,省去了对表格的刷新以及重新加载数据

demo 网址

https://github.com/wwwpalmercom/jQuery_duplicate/tree/master/column_moving_last_version

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值