jqGrid将导航按钮及自定义按钮添加到表格顶部

       在一个项目中,表格插件使用的是jqGrid,操作按钮都在底部分页工具栏的最左侧,让领导看了一下页面,领导说要把操作按钮全部放到表格的顶部,在网上查了一下,找到如下两种方法:

1.添加toolbar: [true,"top"]配置(可参考http://trirand.com/blog/jqgrid/jqgrid.html中New in version 3.1->Toolbars and userdata 中的样例代码)

2.将分页工具栏放到表格的顶部,但我测试时,会在顶部和底部都出现分页工具栏(可能是我配置的不对)

在项目中按钮都是通过jqGrid的navGrid和navButtonAdd方法添加的,如果使用方法一,则我需要将按钮全部重新定义一次,修改量太大,如果使用方法二,则会出现两个分页工具栏,且领导只让分页工具栏显示在表格的底部,故放弃上述两种方法。

        这时我就再想,能不能给jqGrid添加一个扩展呢,最后想到一种扩展思路:在表格的顶部创建一个和底部分页工具栏一样的div(不包含分页按钮等内容),然后在调用navGrid和navButtonAdd方法时,将按钮渲染到顶部创建的这个div中,于是分析jqGrid源码及前台渲染的html。

      经过不断的尝试,按照上面的思路,终于写出了这个扩展,该扩展添加了如下配置项:

<
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值