0

特定のテーブルの列 (行ではない) を編集可能にし、他の列を jQuery で編集できないようにするプラグインまたは方法はありますか?

セルをクリックして編集可能にするプラグインを見たことがありますが、セル/列を編集可能にするかどうかを明示的に指定することを意味します。私はそれを行う方法を持っていますが、それはちょっとハックな仕事のように感じます.

列を編集可能にするための私の関数は次のとおりです。

function isEditable(rowArray, headersArray)
{
    var counter = 0;
    var notEditable = ['product code', 'product'];
    for(i in rowArray){
        counter = 0;
        data = headersArray[i].toLowerCase();
        for(a in notEditable){
            if(data == notEditable[a]){
                counter++;
            }
        }
        if(counter > 0){
            rowArray[i] += 'notEditable';
        }
    }
    return rowArray;
}

セルのヘッダーを事前定義された値の配列と比較します。これは編集不可能な列です。

次に、行を作成します。

function buildHTMLTableRow(row, mutable)
{       
    output = '';
    output += '<tr>';
    for(var i = 0; i < row.length; i++)
    {
        value = trim(row[i]);
        if(mutable){
            index = value.indexOf('notEditable');
            if(index != -1){
                value = value.substring(0, index);
                output += '<td>' + value + '</td>';
            }
            else{
                output += '<td><input size="5" type="text" value="' + value + '" /></td>';
            }
        }
        else{
            output += '<td>' + value + '</td>';
        }
    }
    output += '</tr>';
    return output;
}

パラメーターはmutable、行が編集可能かどうかをindexOf('noteditable')決定し、関数からセル (ただし、ほとんどの列) を決定しisEditableます。

これをよりうまく行うプラグインはありますか、それとも私が持っているもので解決する必要がありますか?

4

1 に答える 1

0

このjsFiddleリンクにアクセスしてください：列を無効にする

データフローは次のとおりです。

  1. 「rowsD」という名前の行配列を作成しました。ページが読み込まれると、テーブル（id = myData）にこれらの行が入力されます。
  2. 次に、 disableHeadersという別の配列を作成します。ここで、ヘッダーを渡します。これは、列全体を無効にする必要があります。
  3. disableHeadersをパラメーターとして渡す関数disableFieldsを呼び出しています
  4. 関数では、最初に、値がヘッダー配列の値と等しいヘッダーのインデックスをフェッチしています
  5. 見つかった場合は、Inputタグから、 $（this）.find（'input'）セレクターを使用してValue属性を抽出しています。
  6. 最後に、現在の子を、抽出された入力タグ値を渡すLabelタグに置き換えます。
  7. disableFields（disableHeaders）;をコメントアウトすることもできます。実際に確認する行、テーブルが最初にどのようにレンダリングされるか

ありがとうございました

于 2012-09-07T16:16:55.180 に答える