工作流详细信息页面中的自定义表格

Question

除了currentTasks 和workflowHistory 表之外，我还想再添加两个表。我在workflow-form.get.html.ftl 中添加了两个带有标题的块，在workflow-form.js 中添加了两个小部件。我还在.properties 文件中添加了标签映射。

问题是我的表格总是显示在页面底部并且没有标题：

我还注意到历史表（以及当前表）的块有一个 ID，类似于：

page_x002e_data-form_x002e_workflow-details_x0023_default-workflowHistory-form-section

我的表没有这样的 ID。它们被简单地放置在这样的容器中：

<div class="form-element-background-color yui-dt">

我的workflow-form.get.html.ftl的一部分：

...

<#-- I added this div for additional table -->
<div id="${el}-finishedBpAttachmentsDetails-form-section" class="workflow-attachments-details">
    <h3>${msg("header.finishedBpAttachmentsDetails")}</h3>
    <div class="form-element-background-color"></div>
</div>

<#-- And also this div -->
<div id="${el}-finishedBpDetails-form-section" class="workflow-details">
    <h3>${msg("header.finishedBpDetails")}</h3>
    <div class="form-element-background-color"></div>
</div>

<#-- Will be inserted below "Items" in the form after its been loaded through ajax -->
<div id="${el}-currentTasks-form-section" class="current-tasks">
    <a name="current-tasks"></a>
    <h3>${msg("header.currentTasks")}</h3>
    <div class="form-element-background-color"></div>
</div>

<#-- Will be inserted in the bottom of the form after its been loaded through ajax -->
<div id="${el}-workflowHistory-form-section" class="workflow-history">
    <h3>${msg("header.history")}</h3>
    <div class="form-element-background-color"></div>
</div>

 ...

我的workflow-form.js的一部分：

...

var finishedBpDetailsDS = new YAHOO.util.DataSource(dsRes,
{
    responseType: YAHOO.util.DataSource.TYPE_JSARRAY
});

var finishedBpDetailsContainerEl = Dom.get(this.id + "-finishedBpDetails-form-section"),
finishedBpDetailsTasksEl = Selector.query("div", finishedBpDetailsContainerEl, true);

var finishedBpDetailsColumnDefinitions = [
    ...
];

this.widgets.finishedBpDetailsTasksDataTable = new YAHOO.widget.DataTable(finishedBpDetailsTasksEl, 
        finishedBpDetailsColumnDefinitions, finishedBpDetailsDS,
{
    MSG_EMPTY: this.msg("label.noTasks")
});


var finishedBpAttachmentsDetailsColumnDefinitions = [
   ...
];                       

var finishedBpAttachmentsDetailsDS = new YAHOO.util.DataSource(this.dsAttachmentRes,
{
    responseType: YAHOO.util.DataSource.TYPE_JSARRAY
});

var finishedBpAttachmentsDetailsContainerEl = Dom.get(this.id + "-finishedBpAttachmentsDetails-form-section"),
finishedBpAttachmentsDetailsTasksEl = Selector.query("div", finishedBpAttachmentsDetailsContainerEl, true);

this.widgets.finishedBpAttachmentsDetailsTasksDataTable = new YAHOO.widget.DataTable(finishedBpAttachmentsDetailsTasksEl, 
        finishedBpAttachmentsDetailsColumnDefinitions, finishedBpAttachmentsDetailsDS,
{
    MSG_EMPTY: this.msg("label.noTasks")
});                     

Selector.query(".form-fields", this.id, true).appendChild(finishedBpAttachmentsDetailsTasksEl);
Selector.query(".form-fields", this.id, true).appendChild(finishedBpDetailsTasksEl);

...

如何设置表格的位置和标题？..例如，我想在包含一般信息的块之后显示表格。

有可能吗？

Answer 1

您应该在 div 中插入表格以在顶部显示表格。

<div id="${el}-summary-form-section">
            <h3>
               ${msg("header.workflowSummary")}
            </h3>...

....

...

<div class="yui-gf">
                     <div class="yui-u first avatar">
                        <img id="${el}-recentTaskOwnersAvatar" src="" alt="${msg("label.avatar")}">
                     </div>
                     <div class="yui-u">
                        <div id="${el}-recentTaskOwnersCommentLink"></div>
                        <div id="${el}-recentTaskOwnersComment" class="task-comment form-element-border"></div>
                     </div>
                  </div>
               </div>
               <div class="clear"></div>
            </div>

<!-- this is my custom table and display in the screen at the top. -->
           <div id="${el}-addl-summary-form-section" style="display:block" >
            <table>
                <tr><td>Name</td></tr>
                <tr><td>Murali</td></tr>
                </table>
        </div>
         </div>

希望对你有所帮助。

Answer 2

另一种方法 - 是使用 YUI 脚本技术：

...

/**
* Called when a workflow form has been loaded.
* Will insert the form in the Dom.
*
* @method onWorkflowFormLoaded
* @param response {Object}
*/
onWorkflowFormLoaded: function WorkflowForm_onWorkflowFormLoaded(response)
{ 
     ...
     var finishedBpDetailsContainerEl = Dom.get(this.id + "-finishedBpDetails-form-section"),
         finishedBpDetailsEl = Selector.query("div", finishedBpDetailsContainerEl, true);         

     var finishedBpDetailsDS = new YAHOO.util.DataSource(this.finishedBpDetailsData,
     {
         responseType: YAHOO.util.DataSource.TYPE_JSARRAY
     });

     var showUserThumbnail = function (elLiner, oRecord, oColumn, oData) {
        elLiner.innerHTML = '<img src="/share/res/components/images/filetypes/generic-user-32.png" title="' 
            + oRecord.getData('resolutionFio') + '" />';
     };

     YAHOO.widget.DataTable.Formatter.showUserThumbnail = showUserThumbnail;

     var finishedBpDetailsColumnDefinitions = [
        {key: "userImg", label: "", formatter: showUserThumbnail},                                                   
        { key: "resolutionPosition", label: "...", sortable: true},
        { key: "resolutionFio", label: "...", sortable: true},
        { key: "resolutionAddress", label: "...", sortable: true},
        { key: "resolutionPhone", label: "...", sortable: true},
        { key: "resolutionEmail", label: "...", formatter: 'email', sortable: true},
        { key: "resolution", label: "...", sortable: true},
        { key: "resolutionDate", label: "...", sortable: true},
        { key: "resolutionComment", label: "...", sortable: true}
     ];         

     this.widgets.finishedBpDetailsDataTable = new YAHOO.widget.DataTable(finishedBpDetailsEl, 
             finishedBpDetailsColumnDefinitions, finishedBpDetailsDS,
     {
        MSG_EMPTY: this.msg("label.noTasks")
     });

    this.widgets.finishedBpDetailsDataTable.subscribe("rowMouseoverEvent", 
        this.widgets.finishedBpDetailsDataTable.onEventHighlightRow);
    this.widgets.finishedBpDetailsDataTable.subscribe("rowMouseoutEvent", 
        this.widgets.finishedBpDetailsDataTable.onEventUnhighlightRow);

    var finishedBpAttachmentsDetailsContainerEl = Dom.get(workflowFormReference.id + "-finishedBpAttachmentsDetails-form-section"),
        finishedBpAttachmentsDetailsEl = Selector.query("div", finishedBpAttachmentsDetailsContainerEl, true);

    var finishedBpAttachmentsDetailsDS = new YAHOO.util.DataSource(this.finishedBpAttachmentsDetailsData,
    {
        responseType: YAHOO.util.DataSource.TYPE_JSARRAY
    });

    var showDocumentThumbnail = function (elLiner, oRecord, oColumn, oData) {
        elLiner.innerHTML = '<img src="/share/res/components/images/filetypes/generic-file-32.png" title="' + 
            oRecord.getData('contractFileName') + '" />';
    };

    YAHOO.widget.DataTable.Formatter.showDocumentThumbnail = showDocumentThumbnail;

    var finishedBpAttachmentsDetailsColumnDefinitions = [
         {key: "contractImg", label: "", formatter: showDocumentThumbnail},                                                             
         {key: "contractFileName", label: "...", sortable: true},
         {key: "contractNumber", label: "...", sortable: true},
         {key: "contractTitle", label: "...", sortable: true},
         {key: "contractPrescription", label: "...", sortable: true},
         {key: "contractDate", label: "...", sortable: true},
         {key: "contractContractor", label: "...", sortable: true},
         {key: "contractPurpose", label: "...", sortable: true},
         {key: "contractCoast", label: "...", sortable: true},
         {key: "contractPeriodValidity", label: "...", sortable: true},
         {key: "contractAdditionalAgreements", label: "...", sortable: true},
         {key: "contractDataStart", label: "...", sortable: true},
         {key: "contractDataEnd", label: "...", sortable: true},
         {key: "contractIssuanceMark", label: "...", sortable: true},
         {key: "contractExecution", label: "...", sortable: true},
         {key: "contractComment", label: "...", sortable: true},
         {key: "contractAdditionalNumber", label: "...", sortable: true},
         {key: "contractService", label: "...", sortable: true},
         {key: "contractView", label: "...", sortable: true}
    ];

    this.widgets.finishedBpAttachmentsDetailsDataTable = new YAHOO.widget.DataTable(finishedBpAttachmentsDetailsEl, 
        finishedBpAttachmentsDetailsColumnDefinitions, finishedBpAttachmentsDetailsDS,
    {
        MSG_EMPTY: this.msg("label.noTasks")
    });         

    this.widgets.finishedBpAttachmentsDetailsDataTable.subscribe("rowMouseoverEvent", 
        this.widgets.finishedBpAttachmentsDetailsDataTable.onEventHighlightRow);
    this.widgets.finishedBpAttachmentsDetailsDataTable.subscribe("rowMouseoutEvent", 
        this.widgets.finishedBpAttachmentsDetailsDataTable.onEventUnhighlightRow);

    YAHOO.Bubbling.fire("workflowFormReady", this);
    ...
},

...