将按钮添加到 jqGrid 顶部工具栏 [英] Adding button to jqGrid top toolbar

问题描述

看起来 jqGrid 的默认工具栏总是在底部.下一页/上一页等按钮和用于选择每页行数的下拉菜单将始终显示在网格底部.

Looks like the default toolbar for jqGrid is always at the bottom. Buttons like Next/Prev page and the dropdown to select the number of rows per page will always show at the bottom of the grid.

我找到了一种添加自定义顶部工具栏并将自定义按钮推入其中的方法.

I found a way to add a custom top toolbar and push custom buttons into it.

真正需要的是一种将默认功能(如分页)添加到网格顶部而不是底部的方法.

What a really need is a way to add default functionality (like paging) to the top of the grid, instead the bottom.

推荐答案

我不明白为什么拥有顶部工具栏如此重要.您是否使用不分页或网格中有很多行，如果不滚动就看不到底部工具栏?还是有别的原因?

I don't understand why it's so important to have top toolbar. Do you use no paging or have to many rows in the grid, that one can not see bottom toolbar without scrolling? Or there is another reason?

jqGrid 有 boolean toppager 参数(参见 设置选项grid) 来创建额外的顶部页面.您可以显示工具栏查看工具栏参数，但我不确定您使用与 jqGrid 相同的术语.查看 jqGrid Demos 上的演示(展开3.1 版中的新功能").可能你的意思是导航栏?

There is boolean toppager parameter of jqGrid (see setting options for the grid) to create additional top pager. You can display a toolbar see toolbar parameter, but I am not sure that you use the same terminology as jqGrid. Look at demo on jqGrid Demos (expand "New in version 3.1"). Probably you mean a navigation bar?

一般 jqGrid 会显示 HTML 片段并用一些预定义的 div 元素划分所有部分.导航栏将放置在 id="pg_pager" 和 class="ui-pager-control" 的 div 内.例如，您可以针对 jQuery 操作 jqGrid 以将此 div 移动到其他位置.如果你实现了这样的移动，你应该每次在 gridComplete 事件句柄中重做这个(或者在另一个完成事件被触发之后).

Generally jqGrid will display HTML fragment and divide all with some predefined div elements. Navigation bar will be placed inside the div with id="pg_pager" and class="ui-pager-control". You can manipulate jqGrid with respect of jQuery for example to move this div on the other place. If you implement such movement, you should redo this every time inside gridComplete event handle (or after one other completion event are fired).

EDITED:对于 jQuery('#element_to_be_moved').insertAfter('#existing_element') 或 jQuery('#element_to_be_moved').insertBefore('#existing_element').在 jqGrid 页脚单元格中继承"主网格中单元格的 CSS 我描述了一些重要的 div 的名称，它们是 jqGrid 的一部分.祝你在编码方面取得成功.

EDITED: It is easy to move an existing HTML fragment to another place with respect of jQuery('#element_to_be_moved').insertAfter('#existing_element') or jQuery('#element_to_be_moved').insertBefore('#existing_element'). In jqGrid footer cells "inherits" CSS from cells in the main grid I described names of some important div's which are parts of jqGrid. I wish you much success in coding.

这篇关于将按钮添加到 jqGrid 顶部工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！