Kendo UI Web開発：Rowsの使用方法を見る

剣道UI for jQuery R2 2020 SP1体験版ダウンロード

剣道UIは、現在提供：4つのコントロールjQueryのための剣道UI、角度のための剣道UI、剣道UIサポートリアクトためとVueのための剣道UIサポート。Kendo UI for jQueryは、最新のWebアプリケーションを作成するための最も完全なUIライブラリです。

行

グリッドを使用すると、データアイテムのIDを使用し、カスタム行を追加し、行テンプレートを使用して、ホバー効果を無効にすることにより、行の外観を操作できます。

IDで行を取得

データアイテムのIDでグリッドのテーブル行を取得するには：

1. IDフィールドがグリッドデータソースのモデル構成で定義されていることを確認します。

2.行モデル、モデルUID、およびグリッドテーブル行を継続的に取得します。

var rowModel = gridObject.dataSource.get（10249）; // Kendo UI dataSourceオブジェクトのメソッドを取得します
var modelUID = rowModel.get（ "uid"）; // Kendo UIモデルオブジェクトのメソッドを取得
var tableRow = $（ "[data-uid = '" + modelUID + "']"）; // data-uid属性は、目的のテーブル行要素に適用されます。このUIDはグリッドによって自動的にレンダリングされます。

カスタム行を追加

データソースがデータを返さない場合（たとえば、結果がフィルター処理されたため）、ユーザーフレンドリーなメッセージを含むテーブル行を手動で追加できます。

次の例は、グリッドのdataBoundイベントハンドラーにテーブル行を追加する方法を示しています。

function onGridDataBound（e）{ 
if（！e.sender.dataSource.view（）。length）{ 
var colspan = e.sender.thead.find（ "th：visible"）。length、
emptyRow = '<tr> <td colspan = "'+ colspan +'"> ...レコードがありません... </ td> </ tr> '; 
e.sender.tbody.parent（）。width（e.sender.thead.width（））。end（）。html（emptyRow）; 
} 
}

ホバー効果を無効にする

Kendo UI Q1 2016バージョン以降、すべてのKendo UIテーマにはラインホバリングのスタイルがあります。ホバリングはUIの状態であり、グリッドが編集モードの場合、長いテーブル行でより良い視覚化を提供できます。

ただし、プロジェクトでホバリング状態を回避する必要がある場合は、次の2つの方法のいずれかを使用してください。

1. Kendo UIテーマCSSファイル（たとえば、kendo.default.min.css）を開き、以下のCSSルールを削除します。

.k-grid tr：hover { 
/ * ...ここに背景スタイル... * / 
}

2.以下の例のCSSコードを使用して、ホバースタイルをオーバーライドします。＃f1f1f1値は、.k-altテーブル行の背景色に対応します。適用する剣道UIテーマの正しい値を見つけるには、ブラウザーのDOMインスペクターを使用するか、お好みの背景色の値を設定してください。

.k-grid tr：not（.k-state-selected）：hover { 
background：none; 
色：継承; 
} 

.k-grid tr.k-alt：not（.k-state-selected）：
hover { background：＃f1f1f1; 
}

Kendo UI Web開発：Rowsの使用方法を見る

おすすめ