1

セットアップ:

階層データを表示するネストされた html テーブル構造があり、ユーザーは個々の行を非表示または表示できます。各行には、レベル番号とそのレベルのレコード タイプの主キーで構成される dom id があります。各レベルは異なるデータベーステーブルからのものであるため、両方が必要です。そのため、主キーだけではDOM内で一意ではありません。

example: id="level-1-row-216"

表示可能な要素のレベルと行を Cookie に保存しているため、ページをリロードすると、ユーザーが開いていたのと同じ行が自動的に表示されます。dom id の完全なマップは保存しません。冗長になりすぎるのが心配で、Cookie を 4Kb 未満に抑えたいからです。

そこで、dom id を次のようなコンパクトな json オブジェクトに変換します。各レベルに 1 つのプロパティがあり、各レベルの下に一意の主キーの配列があります。

{
    1:[231,432,7656],
    2:[234,121],
    3:[234,2],
    4:[222,423],
    5:[222]
}

この構造を Cookie に保存して、それを show 関数にフィードし、ページが読み込まれたときにユーザーの以前の開示状態を復元します。

改善点:

IDセレクターのマップをこのコンパクトな形式に減らすためのより良いオプションを探しています。これが私の機能です：

function getVisibleIds(){

    // example dom id: level-1-row-216-sub

    var ids = $("tr#[id^=level]:visible").map(function() {
        return this.id;
    });

    var levels = {};

    for(var i in ids ) { 
        var id    = ids[i];
        if (typeof id == 'string'){
            if (id.match(/^level/)){

                // here we extract the number for level and row
                var level = id.replace(/.*(level-)(\d*)(.*)/, '$2');
                var row   = id.replace(/.*(row-)(\d*)(.*)/, '$2');

                // *** Improvement here? ***
                // This works, but it seems klugy. In PHP it's one line (see below):

                if(levels.hasOwnProperty(level)){
                if($.inArray(parseInt(row, 10) ,levels[level]) == -1){
                        levels[level].push(parseInt(row, 10));
                }
                } else {
                    levels[level] = [parseInt(row, 10)];
                }

            }
        }
    }

    return levels;
}

PHP で実行していた場合、次のようにコンパクトな配列を作成しますが、javascript では理解できません。

foreach($ids as $id) {
    if (/* the criteria */){
         $level = /* extract it from $id */;
         $row   = /* extract it from $id */;
         $levels[$level][$row];
    }
}
4

3 に答える 3

2

したがって、関数には重複/不要なものがいくつかあります。

あなたがこれをするなら

var ids = $("tr#[id^=level]:visible").map(function() {

この

for(var i in ids ) {

一致するIDを2回ループしています

idは常にここでは文字列ではありません???

if (typeof id == 'string'){

jQuery-Selector： "tr＃[id ^ = level]：visible"のため、これは必要ありません。一致する要素は常に'level'で始まる必要があります。

if (id.match(/^level/)){

全体として、これはもっと短くすべきだと思います（テストできませんでした。次回はjsfiddleを提供してください、もっと簡単です;-)）

function getVisibleIds(){

  // example dom id: level-1-row-216-sub
  var level, parsed, levels = {};

  $("tr#[id^=level]:visible").map(function() {
    // here we extract the number for level and row
    level   = this.id.replace(/.*(level-)(\d*)(.*)/, '$2');
    parsed  = parseInt(this.id.replace(/.*(row-)(\d*)(.*)/, '$2'), 10);

    // i like this more
    if(!levels.hasOwnProperty(level)) { levels[level] = []; }            
    if($.inArray(parsed, levels[level]) === -1) {
        levels[level].push(parsed);
    }
  });

  return levels;
}
于 2012-11-29T11:10:18.677 に答える
2

私の試み

function getVisibleIds() {

    var parts, level, row, levels = {};

    var ids = $("tr#[id^=level]:visible").each(function (index, el) {

        parts = el.id.split("-"); // no regex :)
        level = parts[1];
        row = parts[3];

        if (!levels[level]) { levels[level] = []; }
        if ($.inArray(row, levels[level]) + 1) { levels[level].push(row); }

    });
    return levels;
}
于 2012-11-29T11:14:21.187 に答える
1 
function getVisibleIds(){

    // example dom id: level-1-row-216-sub

    var levels = {};

    var ids = $("tr#[id^=level]:visible")
                    .map(function() {

                        return this.id;
                    })
                    .each(function (index, id) {

                        if (!id || typeof id !== 'string') {
                            return;
                        }

                        if (id.match(/^level/) === false) {
                            return;
                        }

                        var level = id.replace(/.*(level-)(\d*)(.*)/, '$2');
                        var row   = id.replace(/.*(row-)(\d*)(.*)/, '$2'),
                            primaryKey = parseInt(row, 10);

                        if (!levels[level]) {
                            levels[level] = [];
                        }

                        var arr = levels[level];

                        if (arr.indexOf(primaryKey) === -1) {
                            levels[level].push(primaryKey);

                        }
                    });

    return levels;

}

. (dot notation)注意すべき重要な点は、または をアクセサとして使用して、オブジェクトのプロパティにアクセスできることです[]。

于 2012-11-29T11:02:10.263 に答える