jQuery Grid Checkbox Column Alternatives – Part II

これは、jQuery Gridのチェックボックス列の代替案やカスタム実装のトピックをカバーする第2部です。しかし、私が説明したように、デフォルトはすべてのシナリオで十分というわけではなく、コミュニティは列テンプレートと行テンプレートとの共存に関する制限を提起しました。それには正当な理由がありますが、行きたいケースもたくさんあります。

まあ、あなたは間違って見ていません - それは本質的に同じように見えます。本当にとてもシンプルです。たとえば、アプリケーションがこれまでにチェックボックスを使用していて、(常に起こることですが)テンプレートを使用する必要がある既存の/新しい列にいくつかの追加機能を追加するアイデアが浮かび上がったとします。したがって、以前と同じUIを維持したいと考えるのは合理的ですよね?

さらに、最初のブログで覚えているかもしれませんが、デフォルトのチェックボックスの見た目はあまり好きではなく、ユーザーが他のOSを実行していることを神は禁じています...これらのチェックボックスは見栄えがするので、代わりにそれらをどのように使用できるかを見てみましょう。

チェックボックス列機能が救いの手を差し伸べます!

再び間違って見ることはありません - 入力テンプレートを作成しているときに気づいたのは、デフォルトの機能自体も1つであるということです。そこにある機能、スタイル、その他の便利なビットは、私たちが適切だと思うようにまとめるためにそこにあります。そうは言っても、最初に再利用するのが最も簡単なのは、チェックボックス列テンプレートとそのスタイルです。

テンプレート

このテンプレートは、スタイル設定されたHTML Spanタグと CSS を使用してその UI 要素を作成するため、スタイル設定が完全にオープンで、OS やブラウザーの実装とは無関係です。このようなテンプレートは次のようになります。

var checkboxTemplate="<span style=\'width:100%;display:inline-block;overflow:hidden;text-align:center;\'>' +
"<span class=\"ui-state-default ui-corner-all ui-igcheckbox-small\">"+"<span class=\"ui-icon ui-icon-check ui-igcheckbox-small-{{if ${SalariedFlag} === \"true\"}}on{{else}}off{{/if}}\"/>"+"</span></span>";

次に、スパンの構造を示します。

• 最も外側のスパンは、利用可能なスペースに広がるセルコンテナとして機能し、内側のスパンがきれいに中央に配置されるようにします。随意。
• 中央のものはチェックボックスの境界線として機能します。必須。
• 最も内側は空/ティックの充填です。"ui-igcheckbox-small-off/on" はそれぞれのスタイルです。'off' スタイルは 'on' を上書きするので、基本的にはデフォルトで 'on' を使用し、必要に応じて 'off' を追加/削除できることに注意してください (これはまさに後で行われる方法です)。また、「small」コンポーネントに気付いた場合は、Row Selectors機能で「通常」バージョンも確認できます。必須。

この結果から得られるのは当然のことです(いずれにせよ、私たちはそれらを追い求めていました)。最良の部分は、以前と同じ外観が得られることです(機能を使用している場合)、デフォルトよりもはるかに見栄えが良く、他のコントロールのスタイルで出血するUIコントロールが得られます。さらに、それはスタイルに合うだけでなく、行セレクタのスタイルと一致します(私は両方が使用されていると私は見ています)そしてそれはテーマと一致します、なぜなら見た目はCSSから来て、それはテーマから来るからです。上記を使用したグリッド定義の例:

$.ig.loader(function () {
    $("#grid").igGrid({
        primaryKey: "BusinessEntityID",
        height: 550,
        dataSource: "@Url.Action("Employees")",
        autoGenerateColumns: false,
        columns: [
            { key: "BusinessEntityID", width: "50px", headerText: "ID", dataType: "number" , template: "<a href=\"http://msdn.microsoft.com/en-us/library/ms124432(v=sql.100).aspx\">${BusinessEntityID}</a>"},
            { key: "LoginID", width: "250px", headerText: "Login ID", dataType: "string" },
            { key: "JobTitle", width: "220px" , headerText: "Job Title", dataType: "string" },
            { key: "SalariedFlag", width: "120px", headerText: "SalariedFlag", dataType: "bool", template: checkboxTemplate },
            { key: "CurrentFlag", width: "100px",headerText: "Current Flag", dataType: "bool" , template: "<span style=\'width:100%;display:inline-block;overflow:hidden;text-align:center;\'><span class=\'ui-state-default ui-corner-all ui-igcheckbox-normal\'><span class=\'ui-icon ui-icon-check ui-igcheckbox-normal-on{{if ${CurrentFlag} === \'true\'}} {{else}} ui-igcheckbox-normal-off{{/if}}\'/></span></span>'}
             ],
        features: [
            { name: "Filtering", mode: "advanced", type: "local" },
            { name: "Sorting", type: "local" },
            { name: "Updating", editMode: 'none'}]
    });
});

「Salaried」列の小さな(デフォルト)チェックボックスと「Current Flag」の「normal」の両方を含む結果のグリッド:

そして、はい、「メトロ」テーマを適用すると、彼らはメトロまたはモダンUI(それが今どのように呼ばれるか推測されます)に行きます。

ご覧のとおり、値はブール値であるため、列は他のグリッド機能で問題はありません。

ワンクリックのインライン値更新

もちろん、前のソリューションと同様に、クリックイベントにフックして、編集モードに入らずにユーザーの操作を処理できます。以前と同様に、Updating APIを使用するには、機能自体をロードしてグリッド ().ただし、今回は 2 つの列があります。オプションは 2 つあり、各列のイベント ハンドラーを複製するか、単に列キーを関数に渡し、静的な値の代わりにそれを使用します。

var checkboxTemplate = "<span style=\'width:100%;display:inline-block;overflow:hidden;text-align:center;\'>' +
    "<span class=\"ui-state-default ui-corner-all ui-igcheckbox-small\">" +
    "<span class=\"ui-icon ui-icon-check ui-igcheckbox-small-{{if ${SalariedFlag} === \"true\"}}on{{else}}off{{/if}}\"" +
    " data-rowid=\"${BusinessEntityID}\"  onclick=\"checkboxChanged(event, 'SalariedFlag');\"/></span></span>";

'data-' 属性は行キーを追跡するために使用され、列はハンドラーに渡されます。ブラウザサポートのプロパティのさまざまな可用性に関するいくつかの小さな調整と、最終的なスニペットは次のようになります。

function checkboxChanged(evt, colId) {
    // for IE < 9 currentTarget is srcElement
    var element = evt.currentTarget || evt.srcElement;
    // get rowID where change occured:
    var rowId = $(element).data().rowid;
    var newValue;
    //IE doesn't have classList so check and use Name instead
    if (element.classList){
        newValue = element.classList.contains("ui-igcheckbox-small-on") ? false : true;
    }
    else{
        newValue = element.className.indexOf("ui-igcheckbox-small-on") >= 0 ? false : true;
    }
    $("#grid").igGridUpdating("setCellValue", rowId, colId, newValue);
}

アイデアは非常に単純です - クリックが発生した場合、それは値が変更され、現在のものとは逆になるはずであることを意味します - したがって、「オン」スタイルが適用されているかどうかを確認します。「オフ」が上書きであると述べましたが、この場合、Updating メソッドでセル値を更新すると UI が更新されるため、テンプレートが再適用され、値が false の場合、 'on' スタイルは存在しません。

編集アクション

​チェックボックス列機能には、再利用できる素晴らしい部分がもう1つあります。最初のブログでは、独自のエディター プロバイダーを定義できます。Grid Updating API リファレンスを検索すると、Editor Provider を設定できる 'columnSetting' があり、"$.ig.EditorProviderDefault または、すべてのメソッドの定義を持つ必要があります。これにはいくつかのコーディングが必要ですが、何を推測するか - チェックボックス列にはすでに定義されています!だからこれがあなたがそれを使う方法です:

$.ig.loader(function () {
    $("#grid").igGrid({
        primaryKey: "BusinessEntityID",
        height: 550,
        dataSource: "@Url.Action("Employees")",
        autoGenerateColumns: false,
        columns: [
            { key: "BusinessEntityID", width: "50px", headerText: "ID", dataType: "number" , template: "<a style=\'font-size:20px;\' href=\'http://msdn.microsoft.com/en-us/library/ms124432(v=sql.100).aspx\'>${BusinessEntityID}</a>'},
            { key: "LoginID", width: "250px", headerText: "Login ID", dataType: "string" },
            { key: "JobTitle", width: "220px" , headerText: "Job Title", dataType: "string" },
            { key: "SalariedFlag", width: "150px", headerText: "SalariedFlag", dataType: "bool", template: checkboxTemplate}
        ],
        features: [
            { name: "Filtering", mode: "advanced", type: "local" },
            { name: "Sorting", type: "local" },
            { name: "Updating", columnSettings: [{ columnKey: "SalariedFlag", editorProvider: new $.ig.CustomEditorProviderCheckbox()} ]}]
    });
});

16行目 - シンプルで非常に効果的です。これで、編集モードに入ると、適切な(そして一貫した)エクスペリエンスが得られます。そして、それは本当に簡単です。

Editor provider

上記のデフォルトのプロバイダーは、要件を完全に満たしていませんか?次に、カスタムのものを使用し、ブール値以外の値をミックスして適切な測定を行います。説明したように、更新のニーズに対応する多数のエディタープロバイダーと、カスタマイズに推奨されるデフォルトのプロバイダーがあります。ただし、この場合は、代わりにチェックボックスプロバイダーを拡張し、違いのみを実装することができます。プロバイダーの基本を説明しましょう - これは、エディターを作成するためのもの (これは編集モードがアクティブになり、実際の編集要素を返すときにUpdatingによって呼び出されます)、取得用、値を設定するためのものなど、いくつかの基本的なメソッドを持つクラスです。次に、フォーカス、サイズ、および検証の管理がありますが、それらは実装されているか、私たちのタイプのプロバイダーには関係ありません。これは、各メソッドがなぜその機能を実行するのかを理解するためのメソッド実行の基本的なフローです。

たとえば、ブール値とは異なる値を再度サポートする必要がある場合は、通常どおりテンプレートを使用し、プロバイダーの get メソッドと set value メソッドをオーバーライドして、読み取り専用やちらつきのない優れたチェック ボックス エディターも使用できます。さらに、実装も非常に簡単です。前回のブログの場合や、ランダムな「許容可能な」値と偽の等価物がある場合、setValueメソッドを次のように変更する必要はありません。まあ、数値と文字列は true と評価され、null-s は false と評価され、エディターに値を表示するのは問題なく機能します。だから、それはただのゲットであり、ほとんど面白いほど簡単です:

$.ig.CustomEditorProviderCheckbox = $.ig.CustomEditorProviderCheckbox || $.ig.EditorProviderCheckbox.extend({
    getValue: function () {
        return this.value ? 10 : null;
    }
});

ここで、これらの値が期待どおりに評価されないとすると(現在は評価されていますが)、setValueをオーバーライドし、目的の出力でスーパークラスのメソッドを呼び出す必要があります。

$.ig.CustomEditorProviderCheckbox = $.ig.CustomEditorProviderCheckbox || $.ig.EditorProviderCheckbox.extend({
    getValue: function () {
        return this.value ? 10 : null;
    },
    setValue: function (val, updating) {
      val = parseInt(val) ? true : false;
      this._super(val, updating);
    }
});

また、それだけでは不十分な場合は、createメソッドでエディタにレンダリングされるUIを変更したり、setメソッドの値に対するインタラクションの方法を変更したりと、いつでも先に進むことができます。しかし、それはまったく別のトピックであり、プロバイダーのタイプごとのトピックのようなもので、ほとんどのプロバイダーには特別な要件と実装があります。

残りはかなり明確です - 「編集アクション」の部分と同じテンプレートスタイルで、前のブログのようにparseIntのみを使用しています。また、Update の列設定を使用して、目的の列のプロバイダを新しい '$.ig.CustomEditorProviderCheckbox()'です。

比較

PROS

• 他のテンプレートで動作します。
• 実装が簡単 – 単純なシナリオの場合は 1 行、プロバイダーを設定する場合はもう 1 行。
• 一貫した外観 – グリッド部分の残りの部分に適合し、テーマと一致します。
• デフォルトのチェックボックスエディタプロバイダを再利用することで、優れた編集が可能です。
• 繰り返しになりますが、ブール値だけに限定されません。
• また、バイステートチェックボックスに限らず、トライステートチェックボックスを実装できる可能性があります()

短所

• 非ブール値で実装するために一部のコードが必要になる場合がありますが、示されているように、ほとんどの作業を省くことができます。
• その「シングルクリック更新」機能を追加するには、少し作業が必要です。それだけの価値があると言えるでしょう。
• 他には何も見えません、本当に。

結論

これが教育的であり、時には役立つことを願っています。また、デフォルトが唯一の選択肢ではなく、カスタムソリューションを簡単に作成できるだけでなく、利用可能なソリューションの一部をリサイクルすることではるかに改善されることが明確になったことを願っています。データの表現方法は、実際の値から完全に任意であり、古き良きフォーム要素や一貫した外観の変更されたものだけでなく、 - この時点で、チェックボックスをスライダー/トグルボタンに置き換えることができ、同様のアプローチを使用して他のタイプのデータ表現を変更できます。なぜなら、結局のところ、jQuery Gridとその機能は非常にカスタマイズ可能であることが証明されており、ほとんどの場合、開発者が素晴らしいエクスペリエンスを作成するのに役立つ適切なプロパティ、メソッド、またはイベントが常に備わっているからです。

デモプロジェクトはダウンロード可能です.いつものように、Twitterでフォローできます@DamyanPetevそして@Infragistics連絡を取り合うフェイスブック,Google+のそしてLinkedInの!