Javascript 将 jqGrid 自定义导航添加到顶部工具栏

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3929896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 06:41:06  来源:igfitidea点击:

Adding jqGrid Custom Navigation to Top Toolbar

javascriptajaxjqgrid

提问by Alan Storm

Is it possible to add navigation items to the "top pager" in a jqGrid? And if so, what's the syntax for doing so?

是否可以将导航项添加到 jqGrid 中的“顶部寻呼机”?如果是这样,这样做的语法是什么?

I have an HTML snippet on my page that looks like this

我的页面上有一个 HTML 片段,看起来像这样

<table id="mygrid">
</table>
<div id="mygrid_pager"></div>

And then an jqGrid initialization that looks something like this

然后是一个 jqGrid 初始化,看起来像这样

$('#mygrid').jqGrid({
    ..., //full config string removed for brevity,
    pager:jQuery('#mygrid'),
    toppager:true
}); 
$('#mygrid').jqGrid('navGrid', '#mygrid_pager'),{
    'add':false,
    'del':false,
    'edit':false,
    'search':false,
    'refresh':false,
    'cloneToTop':true,  
}).navButtonAdd('',{...}); //config navbutton string for button removed for brevity

A "top pager" with the id of #mygrid_toppager is automatically inserted into the page, but its custom buttons (which appear on the bottom pager) don't come along for the ride.

id 为#mygrid_toppager 的“顶部寻呼机”会自动插入到页面中,但它的自定义按钮(出现在底部寻呼机上)不会出现。

I see that there's a "cloneToTop" optionincluded for the navGrid, but its description seems confusing, and I can only assume I'm using it wrong.

看到 navGrid包含一个“cloneToTop”选项,但它的描述似乎令人困惑,我只能假设我使用它是错误的。

Clones all the actions from the bottom pager to the top pager if defined. Note that the navGrid can be applied to the top pager only. The id of the top pager is a combination of grid id and "_toppager"

如果定义,将所有操作从底部寻呼机复制到顶部寻呼机。请注意,navGrid 只能应用于顶部分页器。top pager的id是grid id和“_toppager”的组合

My understanding of the option is it will take buttons added to the bottom pager, and clone them to the top. However, the description then goes on to say "the navGrid can be applied to the top pager only, which doesn't make any sense since you're cloning it. The pont being, I clearly have a deep misunderstanding of how the API is supposed to be used.

我对该选项的理解是它将按钮添加到底部寻呼机,并将它们克隆到顶部。但是,描述接着说“navGrid 只能应用于顶部寻呼机,这没有任何意义,因为您正在克隆它。问题是,我显然对 API 的方式有很深的误解应该被使用。

If anyone can point me in the right direction (even just to a working example somewhere) I'd appreciate it. I'd prefer to do this through official APIs, as opposed to clever DOM manipulation, as seen elsewhere on StackOverflow.

如果有人能指出我正确的方向(即使只是指向某个地方的工作示例),我将不胜感激。我更喜欢通过官方 API 来做到这一点,而不是像 StackOverflow 上其他地方看到的那样巧妙的 DOM 操作

回答by Oleg

OK, it seems that I found a way which looks like better. The idea is to use navButtonAddwith the "#list_toppager_left"instead of "#pager".

好吧,看来我找到了一种看起来更好的方法。这个想法是navButtonAdd"#list_toppager_left"而不是一起使用"#pager"

I modified the old answerso, that one custom button are added on the top of the navigation toolbar together with one standard button. Other elements from the top navigation toolbar will be removed. The results will looks like alt text

我修改了旧答案,以便在导航工具栏的顶部添加一个自定义按钮和一个标准按钮。顶部导航工具栏中的其他元素将被删除。结果看起来像 替代文字

You can see the corresponding demo live here.

您可以在此处查看相应的演示。