Alfresco dojo / jquery可搜索/可排序表

时间:2016-08-25 13:52:51

标签: jquery dojo datatables alfresco-share aikau

我创建了一个自定义页面,列出了所有打开的工作流程。我跟随了Jeff Potts的教程,到目前为止我已经找到了我,但我现在正试图将我的桌子变成一个更加动态的桌面而没有任何成功。

widget js文件看起来像这样

define(["dojo/_base/declare",
    "dijit/_WidgetBase",
    "alfresco/core/Core",
    "alfresco/core/CoreXhr",
    "dojo/dom-construct",
    "dojo/_base/array",
    "dijit/_TemplatedMixin",
    "dojo/text!./templates/AjaxWidget.html",
    ],
    function(declare, _Widget, Core, AlfCoreXhr, domConstruct, array, _Templated, template) {
    return declare([_Widget, Core, AlfCoreXhr, _Templated], {
        templateString: template,
        cssRequirements: [{cssFile:"./css/AjaxWidget.css"}],
        i18nRequirements: [ {i18nFile: "./i18n/AjaxWidget.properties"} ],

        buildRendering: function example_widgets_AjaxWidget__buildRendering() {
            this.widgetTitle       = this.message('widgetTitle');
            this.columnName        = this.message('columnName');
            this.columnDescription = this.message('columnDescription');
            this.inherited(arguments);
        },

        postCreate: function example_widgets_AjaxWidget__postCreate() {
            var url1 = Alfresco.constants.PROXY_URI + "api/people";
            this.serviceXhr({url : url1,
                             method: "GET",
                             successCallback: this._getTasksPerUser,
                             callbackScope: this});
        },


        _getTasksPerUser: function example_widgets_AjaxWidget__getTasksPerUser(response, config) {
                var parentNode = this.containerNode;
                var wfUsers = [];
                array.forEach( response.people, function(person) {
                    wfUsers.push(person.userName);
               });
               for (var wfUser in wfUsers) {
                    var url2 = Alfresco.constants.PROXY_URI + "api/task-instances?authority=" + wfUsers[wfUser];
                    this.serviceXhr({url : url2,
                               method: "GET",
                               successCallback: this._onSuccessCallback,
                               callbackScope: this});
                }

        },



_onSuccessCallback:
            function example_widgets_AjaxWidget__onSuccessCallback(response, config) {
                var parentNode = this.containerNode;
                array.forEach( response.data, function(item) {
                    var row = domConstruct.create( "tr", {}, parentNode );
                    domConstruct.create( "td", { innerHTML: item.workflowInstance.id }, row);
                    domConstruct.create( "td", { innerHTML: item.workflowInstance.message }, row);
                    domConstruct.create( "td", { innerHTML: item.state }, row);
                    domConstruct.create( "td", { innerHTML: item.properties.bpm_dueDate }, row);
                    domConstruct.create( "td", { innerHTML: item.workflowInstance.initiator.firstName + " " + item.workflowInstance.initiator.lastName }, row);
                    domConstruct.create( "td", { innerHTML: item.owner.firstName + " " + item.owner.lastName }, row);
                });
        }
    });
});

和html模板

<div class="ajax-widget">
<h1>${widgetTitle}</h1>
 <div class="div1">
  <table>
      <thead>
          <tr>
            <th>Workflow ID</th>
            <th>Description</th>
            <th>Status</th>
            <th>Due Date</th>
            <th>Created By</th>
            <th>Assigned To</th>
          </tr>
      </thead>
      <tbody data-dojo-attach-point="containerNode"></tbody>
  </table>

我尝试过使用List.js和DataTables.js jquery库但没有成功。想要使用这些库中的任何一个的原因是它们提供了我需要的功能。是否有一个易于实现的dojo等价物。我听见了。

我的第一个问题是 - 我使用最有效的方法来实现这个结果吗? Alfresco在过去的5年中似乎发生了很大的变化,很难知道今天哪些教程/帖子仍然有用。

我尝试使用dojo包添加这些库但是当我查看源代码时,我看不出它们是否可用,当我在js文件中使用“require []”关键字时,它似乎没有达到效果。

如果我要走正确的轨道,我将如何使我的桌子可分类和可搜索。如果我正在咆哮错误的树,请指出我正确的方向。

谢谢 - 欢迎所有建议:-)

1 个答案:

答案 0 :(得分:0)

您所指的教程是针对Alfresco 4.2中嵌入的Aikau版本编写的。 Aikau UI框架现已被抽象为其own project on Github,它在自己的发布周期中运行,因此您可以在Alfresco发行版之间提供修复和功能(通常每周都有一个新版本)。

在Aikau上启动和运行时还有一个full tutorial,对列表的排序和分页有a specific chapter

blog post描述了如何将新版本的Aikau用于Share。如果您遇到任何错误,那么您可以在GitHub上提出问题,如果您对使用它有疑问,请在StackOverflow中用“Aikau”标记它们,我会看到它们并尝试回答它们。