工作流程詳細信息頁面中的自定義表格

除了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); 

...

如何設置的位置和標題給我表格？..例如，我希望在包含常規信息的塊後面顯示我的表格。

是否有可能？..

我將非常感激這些信息。謝謝大家。

來源

2017-04-06 Aleksey Bykov

您應該在表格中插入表格以在頂部顯示錶格。

<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>

希望這有助於你。

來源

2017-04-07 10:52:00

好極了！＃ –

這也適用 - 'Selector.query（「.ui-us」，this.id，true）.appendChild（...）;' –

另一種方式 - 就是使用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); 
    ... 
}, 

...

來源

2017-05-12 04:16:10

工作流程詳細信息頁面中的自定義表格

回答

相關問題