Как получить индекс строки данных JSF по щелчку мыши, не используя флажок или переключатель

Question

Как получить индекс строки данных JSF по щелчку мыши, не используя флажок или переключатель

0

Я использовал компонент JSF hx: datatableEx для отображения списка документов. Значения для таблицы, извлеченной из базы данных.

Теперь я хочу добавить событие таким образом, что когда пользователь делает "щелчок правой кнопкой мыши" в любой строке, я должен отображать контекстное меню для этой конкретной строки.

Мой вопрос: как получить индекс щелкнутой строки? ,

Пожалуйста, помогите мне найти решение. Благодарю.

Код, написанный для отображения списка документов, я перечислял только несколько столбцов:

<hx:dataTableEx headerClass="headerClass" footerClass="footerClass" columnClasses="columnClass1, columnClass2" rowClasses="rowClass1,rowClass2" scrollSize="175px" styleClass="dataTableEx" value="#{pc_DocumentSearch.allDocumentsList}" var="varallDocumentsList" binding="#{pc_DocumentSearch.allDocList}" rows="25">
<hx:columnEx id="column1" align="left" width="10%">
    <h:outputText id="text6" styleClass="outputText" value={pc_DocumentSearch.allDocList.rowIndex+1}"></h:outputText>
    <f:facet name="header">
        <h:outputText id="text2" styleClass="outputText" value="#{prop.SL_No}" </h:outputText>
    </f:facet>
</hx:columnEx>

<hx:columnEx id="column2" width="38%" align="left">
    <f:facet name="header">
    <h:outputText id="text5" styleClass="outputText" value="#{prop.Document_Name}">   </h:outputText>
     </f:facet>
<hx:outputLinkEx id="link1" styleClass="a" onmouseover="popup('ViewAttribute documentId=#{varallDocumentsList.DOCUMENT_ID}','#{sessionScope.attrCtrlOption}');" onmouseout="popupClose()" onmousedown="view_document(' {varallDocumentsList.DOCUMENT_ID}');">
<h:outputText id="text9" styleClass="outputText" value="#  {varallDocumentsList.DOCUMENT_NAME}"></h:outputText>
</hx:outputLinkEx>
</hx:columnEx>

<hx:columnEx id="column3" width="12%" align="left">
<h:outputText id="text49" styleClass="outputText" value="  {varallDocumentsList.VERSION_NO}"></h:outputText>
<f:facet name="header">
    <h:outputText id="text48" styleClass="outputText" value="#{prop.Version_No}"> </h:outputText>
 </f:facet>
 </hx:columnEx>

<hx:columnEx id="column4" align="left" width="20%">
<h:outputText id="text8" styleClass="outputText" value="#{varallDocumentsList.CREATION_DATE}">
<hx:convertDateTime />
 </h:outputText>
<f:facet name="header">
    <h:outputText id="text4" styleClass="outputText" value="#{prop.Date}"></h:outputText>
</f:facet>
</hx:columnEx>

<hx:columnEx id="column5" width="10%">
<hx:outputLinkEx id="viewCommentLink" styleClass="a" onmousedown="view_doccomment('#{varallDocumentsList.DOCUMENT_ID}','#{varallDocumentsList.FOLDER_ID}');">
<h:outputText id="viewComment" styleClass="outputText" value="#{prop.View}">   </h:outputText>
</hx:outputLinkEx>
<f:facet name="header">
<h:outputText id="text43" styleClass="outputText" value="#{prop.Comments}">  </h:outputText>
</f:facet>

nagesh 18 дек. 2013, в 12:58

Источник

0

Что вы уже пробовали? И как вы создаете свои строки данных в Dataatable?
Parkash Kumar 18 дек. 2013, в 12:36
0

Отображение списка документов работает. Просто нужно добавить клиентское событие для серверного компонента.
nagesh 18 дек. 2013, в 13:11

Теги:

javascript

jquery

javascript-events

jsf

1 ответ

Ещё вопросы

Что вы уже пробовали? И как вы создаете свои строки данных в Dataatable?
Отображение списка документов работает. Просто нужно добавить клиентское событие для серверного компонента.

nagesh · Accepted Answer · 2014-01-29T03-32-00.000Z

Решение для размещения я использовал для решения проблемы:

Сначала создайте контекстное меню с требуемыми параметрами следующим образом:

<div id="cntnr">
<ul id="items">
    <li><a onclick="load()">Indexes</a></li>
    <li onclick="load()"><a>Delete</a></li>
    <li onclick="load()"><a>Forward</a></li>
    <li onclick="load()"><a>Share</a></li>
    <li onclick="load()"><a>Comments</a></li>
</ul>
</div>

Чтобы получить нажатую строку Id, напишите следующий код: Для получения дополнительной информации по этому вопросу вы должны сослаться на эту ссылку:

$(document).ready(function() {
    var trs = document.getElementById('tableId').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (var i = 0; i < trs.length; i++) {
        trs[i].oncontextmenu = new Function("highlightAndSelectRow(this)");
    }
});
var docId=0;
var trAttri=0;
var Id=0;
function highlightAndSelectRow(tr) {
    var trs = document.getElementById('tableId').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (var i = 0; i < trs.length; i++) {
        if (trs[i] == tr) {
            Id=tr.getAttribute('class');
            } else {
            trs[i].style.bgColor = '#ffffff';
            }
    }
}

Чтобы очистить контекстное меню:

function startFocusOut() {
    $jq(document).on("click", function () {
      $jq("#cntnr").hide(5);
      $jq(document).off("click");           
    });
}

Чтобы связать контекстное меню:

$jq(document).ready(function()  {
    $jq("#tableIdDiv").bind("contextmenu", function (e)  {
        if(Id) {
          e.preventDefault();
          $jq("#cntnr").css("left", e.pageX);
          $jq("#cntnr").css("top", e.pageY);
          $jq("#cntnr").fadeIn(5, startFocusOut());
          Id=null;
        }
    });
});