2

わかりました、これはバグか何かかもしれないと考えていますが、それを理解できません。1行3列のテーブルがあり、最初のセルにはスパンが含まれるラベルがあり、2番目のセルには選択要素のある空のスパンがあり、最後のセルにはスパンだけがあります。

<table>
<tbody>
    <tr>
        <td>
            <label><span  onclick="revealSiblingEdit(event);">Click Me</span></label>
        </td>
        <td>          
            <span name="select1"></span>
            <select name="Select1" style="display:none">
               <option value="" selected="selected"></option>                
               <option value="1">Yes</option>
               <option value="2">No</option>
            </select>
        </td>
        <td>
            <label><span class='lockButton onclick="editDone(event)">Edit</span></label>
        </td>

select 要素は非表示になり、同じ名前のスパンには選択された値が表示されます。ドキュメントが読み込まれたら、select 要素を KenndoUI ウィジェットに変更するこのコードを実行します。関数は open イベントにバインドされています。open イベントは、ユーザーがウィジェットを開いたときにトリガーされます。これも非表示になっていることに注意してください。このクラスを使用し.k-widgetて kendoui ウィジェットを見つけて非表示にしています。

$("select[name='select1']").kendoDropDownList({
       open: function(e) {
           console.log("maaaannnnnn.......");
       }
    }).closest(".k-widget").hide();

背景情報: select 要素を kendoUI Widget にすると、スパンの子要素になり、後で使用する兄弟スパンもあります。select 要素はまだ存在しますが、非表示になっています。 select要素のように見えるスパン

ラベル内のスパンまたは編集スパンをクリックすると、スパンを非表示にして選択要素を表示できます。それぞれに実行する独自の機能があります。1つ目はrevealSiblingEdit、ラベル内のスパンをクリックしたときに実行される関数です。それが行うことは、ターゲット (イベントを発生させた要素への参照) を含むイベントが関数に渡されることです。そこで、それを使用して、選択要素を囲んでいるスパンを見つけます。そのスパンには属性がありdata-role='listbox'、選択要素と同じ名前のセル内のスパンと、編集であるスパン要素も見つけます。次に showAndHideInput 関数を呼び出し、その関数を呼び出した後、編集スパンの内容を Edit または Done に変更します。

function revealSiblingEdit(e) {     
var thisTarget = e.target;    
var theSiblingInput = $(thisTarget).closest("tr").find("span[role='listbox']");             
   var theSiblingSpan = $(thisTarget).closest("tr").find("span[name*='" + theSiblingInput.find("select").attr("name") + "']");
   } 
   var theDoneButton = $(thisTarget).parents("td").siblings().find(".lockButton");     
   showAndHideInput(theSiblingInput, theSiblingSpan, theDoneButton);     

   if ($(theDoneButton).text() == "Edit") {
       $(theDoneButton).text("Done");
   } else {
       $(theDoneButton).text("Edit");
   }

}

エディット スパンをクリックすると、 とまったく同じ機能editDoneを実行します。唯一の違いは、関数に渡されたイベントには既に編集スパンへの参照が含まれているため、それを見つける必要がないことです。revealSiblingEdit

function editDone(e) {        
var thisTarget = e.target;
var theSiblingInput = $(thisTarget).closest("tr").find("span[role='listbox']");
var theSiblingSpan = $(thisTarget).closest("tr").find("span[name*='" + theSiblingInput.find("select").attr("name") + "']");   
showAndHideInput(theSiblingInput, theSiblingSpan, thisTarget);
if ($(thisTarget).text() == "Edit") {
    $(thisTarget).text("Done");
} else {
    $(thisTarget).text("Edit");
}

}

次に、両方が呼び出す showAndHideInput 関数について説明します。現在の「モード」を確認します。編集スパン コンテンツがEdit編集モードに入っている場合は、kendoUI ウィジェットを表示して、select1 スパン要素を操作および非表示にするために使用します。まず、span 要素に何かがあるかどうかを確認します (ある場合は、以前の値があることを意味し、kendoUI の値をデフォルトとしてその値に設定します)。編集スパン コンテンツが [Done] の場合、編集モードが終了したことを意味します。そのため、ユーザーが選択した新しい値を取得し、select1 スパン要素の内容をそれに変更します。次に、KendoUI ウィジェットを非表示にしてスパンを表示します。各セルに複数の select 要素と span 要素が存在する可能性があるため、for ループがあります。

function showAndHideInput(theInput, theSpan, theBtn) {
console.log(theBtn);
var theData;
var index;
if ($(theBtn).text() == "Edit") {       
    for (index = 0; index < theInput.length; index++) {
        theData = $(theSpan[index]).text();            
        $(theInput[index]).val(theData);
        $(theInput[index]).css('display', 'inline-block');           
        $(theSpan[index]).css('display', 'none');
    }
} else {
    for (index = 0; index < theInput.length; index++) {            
        if ($(theInput[index]).is("span[role='listbox']")) {
            theData = $(theInput[index]).find(".k-input").text();               
        } else if (($(theInput[index]).attr("class") == "CheckBox")) { //check to see if the element is a checkbox element
            //do nothing, check box are not readonly and are automatically editable
        } else {
            theData = $(theInput[index]).val();               
        }
        if ($(theSpan[index]).text() != theData) {                
            $(theSpan[index]).text(theData);               
        }          
        //  $(theInput[index]).css('display', 'none');            
        $(theInput[index]).hide();
        $(theSpan[index]).show();
    }
}

}

ここに問題があります。ラベルのクリック スパンをクリックすると、open イベントが発生しますが、編集スパンをクリックしても、open イベントは発生しません。ラベルのスパンをクリックして編集モードに移動し、編集スパンをクリックして編集モードを終了すると、open イベントは発生しませんが、編集スパンをクリックして編集モードに移動する場合は、ラベルのスパンをクリックして編集モードを終了すると、open イベントが発生します。なんらかの理由で open イベントが発生すると、ドロップダウン リストのリストが右上隅に表示されるため、これにより問題が発生します。なぜこれをしているのかはわかりませんが、これを入力していると、何が原因であるかを知ることができました. どうやら自分のスパンがラベルの内側にあるのが気に入らなかったらしく、ラベルを単独で取得すると、open イベントの発生が停止し、ドロップダウン リストが表示されなくなりました。スパンがラベルの内側にあるのが気に入らなかった理由を誰か知っていますか? kendoUI ウィジェットを使用する前は、完全に正常に機能していたからです。

4

0 に答える 0