0

我想在 JQueryUI 小部件（First、Prev、Next、Last）中创建 4 个分页按钮，尽可能少地重复代码。我有一个这样的工作示例（在小部件工厂插件中的函数中）：

    var pager = document.createElement( 'span' );

    var names = ['start','prev','next','end'];
    var labels = ['First','Prev','Next','Last'];

    for (var i = 0; i < names.length; i++) {    
        var pagerButton = document.createElement( 'button' );
        $(pagerButton).button({icons: { primary: "ui-icon-seek-" + names[i]}, label: labels[i]});
        $(pagerButton).attr('name', names[i]);
        pager.appendChild(pagerButton);
        this._on(pagerButton, {
            click: function(event) {
                alert('You clicked ' + event.target.name);
            }
        });  
    }
    this.element.find('.pager').empty().append(pager);

这具有我需要的功能，但我觉得应该有一种更简洁的方式来使用 JQuery 执行此操作。

注意：需要注意的几点：

  1. 自然，警报将被更有用的功能所取代。
  2. 如果需要多语言，名称和标签会分开。
  3. 我看过 jqGrid 和数据表。我想要一些更简单的东西（只是 ajax、分页、排序），而且这对我来说是一个学习练习（它不是为了工作）。我不需要第三方 JQuery 库的建议。
  4. 随意指出我在上面的代码片段中犯下的任何异端邪说。

更新好吧，我想出了如何让事件声明脱离循环：

        this._on(pager, {
            'click button': function(event) {
                alert('You clicked ' + event.currentTarget.name);
            }
        });

（按建议使用 currentTarget）。

这给我留下了：

    for (var i = 0; i < names.length; i++) {    
        var pagerButton = document.createElement( 'button' );
        $(pagerButton).button({icons: { primary: "ui-icon-seek-" + names[i]}, label: labels[i]});
        $(pagerButton).attr('name', names[i]);
        pager.appendChild(pagerButton);
    }

这可能没问题。它只是认为可能有一种“更多的 jquery”方法（即使用一些适用于所有选定元素的聪明函数。

4

1 回答 1

1

很难说完全正确，因为没有确切的场景，所以我只是在写我会做的事情。

首先，您的代码对我来说看起来不错。这是jsFiddle

如您所见，我已将其更改为event.target，event.currentTarget因为 currentTarget 是您创建的按钮，而 target 是为显示精美按钮而创建的 span $UI。

我的第一个 Html 布局将在下面

<div class="data" data-currentPage="0" data-currentData="/personal">
   <div class="list"></div>
   <div class="pager">Where your buttons will be</div> 
</div>

您在一页中使用独立的多个列表的原因。在按钮事件中，您可以通过 $(event.currentTarget).parent("div.data") 到达主 div 并根据 currentPage 和 currentData 您可以请求任何您想要的当前数据，我将使用 URL 和发布请求我会发送页面数据。但是您只需使用枚举类别的简单文本并将其作为参数发送。您还可以在数据中保留一个 JSON 对象，这取决于您。

要使用当前页面和数据获取数据，您可以获取 div.list 的完整 html 并直接绑定它或返回 JSON 列表对象并通过 JS 循环绑定它。这取决于您和您的系统，例如，如果您已经拥有 MVC Web API，只需使用它获取数据。

对于多语言支持，我从未开发过这样的东西，但下面是我的代码。

保留语言

var labelsData = {};
labelsData["en"] = ['First','Prev','Next','Last'];
labelsData["fr"] = ['le First','le Prev','le Next','le Last'];

并找出客户端语言，您可以使用以下代码

//jQuery probably have something short for the below line but logic is the same
//just find out en-US or just en
var language = window.navigator.userLanguage || window.navigator.language;
language = language.split("-")[0];
var labels = labelsData[language]; // labels so you can use your code
if (!labels)
    labels = labelsData["en"]; //Default

如果语言是由后端决定的，只需渲染它。

希望这可以帮助。

于 2013-06-17T00:54:24.050 回答