データ管理は必見します！jQueryのフィルタ状態の保持のための剣道UI

jQueryのための剣道UIの最新の体験版ダウンロード

剣道UI jQueryのための最新のオファー剣道UIのための剣道UIリアクトための角度、剣道UIサポートVueの4つのコントロールのためにと剣道UIサポート。jQueryのための剣道UIは、最新のWebアプリケーションの最も完全なUIライブラリを作成することです。

剣道UIフィルタ統合制御であるウィジェット、データ・ソースのためのフィルタを有するデータバインディングコンポーネント。

フィルタを使用してjQueryのための剣道UIは、あなたがそのフィルタ式を保存することができ、ユーザーのためにその状態を復元します。

負荷状態を復元

たとえば、フィルタ式を保存することができ、フィルターは、ユーザーがページにアクセスし、次回にそれを適用することができます。

次の例では、自動的にフィルターの日付にフィルタし、変更を適用するためにイベントを使用する方法を示します。ページをリロードした後、設定を保存し、フィルタの設定を適用するために提供されます。

<OL> <LI>変更フィルタ</ LI> <LI>リロードページ：<ボタンタイプ= "ボタン"のonclick = "reloadPage（）;">リロード</ボタン> </ LI> <LI>ウィジェットは、保存した設定で初期化されます。</ LI> <LI>クリア格納されている情報の新鮮な起動します。<ボタンのonclick = "clearDataメソッド（）;">クリア</ボタン> </ LI> </ OL>。 <DIV ID = "フィルタ"> </ div> <UL ID = "リストビュー"> </ UL> 
<スクリプトタイプ= "テキスト/ X-剣道テンプレート" ID = "項目"> 
  <LI> 
  <strong>の＃ =名＃</ strong>は、高齢者＃=年齢の＃は、休暇である：＃= isOnLeave＃
  ます。</ li> 
  </ SCRIPT> 
<SCRIPT> 
  $（ドキュメント）。レディ（関数（）{ 
  VARのdataSource =新しいkendo.data.DataSource（{ 
  データ：[ 
  {名： "ジェーン・ドウ"、年齢： "25"、isOnLeave：偽}、
  {名： "ジョン・ドウ"、年齢： " 33" 、isOnLeave：真}、
  {名： "ジョン・スミス"、年齢"37"、isOnLeave：真}、
  {名： "ネイサンドウ"、年齢：42、isOnLeave：偽} 
  ]、
  スキーマ：{ 
  モデル：{ 
  フィールド：{ 
  名：{タイプ"文字列"}、
  年齢：{タイプ： "番号"}、
  isOnLeave：{タイプ： "ブール"} } 
  } 
  } 
  }）。
  
$（ "＃フィルタ"）kendoFilter（{。
  データソース：データソース、
  変更：applyAndStoreFilterExpression、
  expressionPreview：真、
  フィールド：[ 
  {名： "名前"、種類： "文字列"、ラベル： "名前"}、
  {名： "年齢」、種類： "番号"、ラベル： "年齢"}、
  式：getInitialExpression（）
格納された表現があった場合であれば（getInitialExpression（））{//フィルタを適用。
  $（ "＃フィルタ"）のデータ（ "kendoFilter"）して、applyFilter（）。。。
  } 
。$（ "＃リストビュー"）kendoListView（{ 
  データソース：データソース、
  テンプレート：kendo.template（$（ "＃項目"）、HTML（））
  }）。
  }）; 
関数applyAndStoreFilterExpression（E）{ 
  e.sender.applyFilter（）。//すべての変更のフィルタリングを適用します。
  localStorage [ "myInitialFilterExpression"] = JSON.stringify（e.expression）。//将来の使用のためのフィルタ式を保管してください。
  } 
関数getInitialExpression（）{ 
  IF（のlocalStorage [ "myInitialFilterExpression"]）{ 
  リターンJSON.parse（のlocalStorage [ "myInitialFilterExpression"]）。
  window.location.reload（）; 
  } 
関数clearDataメソッド（）{ 
  削除のlocalStorage [ "myInitialFilterExpression"]。
  reloadPage（）; 
  } 
  </ SCRIPT>

デマンドロードの設定

イベントが発生したときにも、アプリケーションのロジックでは、以前に状態固有のフィルタを保存して読み込むことができます。

現在のフィルタ式およびその他の設定を取得し、必要なときにそれらを適用する方法を次の例を示しています。

<OL> <LI>変更フィルタの状態</ LI> <LI>保存状態。<ボタンのonclick = "ステートセーブ（）;">保存</ボタン> </ LI> <LI>変更の状態再度フィルタ</ LI> <LI>は状態をロードします。<ボタンのonclick = "にloadState（）;">負荷</ボタン> </ LI> <LI>クリア状態：<ボタンのonclick = "clearState（） ; ">クリア</ボタン> </ LI> </ OL> 
の<divのid ="フィルタ"> </ div> 
  <divのID ="チャート"> </ div> 
<スクリプト> 
  $（ドキュメント）.ready（関数（）{ 
  VARのdataSource =新しいkendo.data.DataSource（{ 
  データ：[ 
  {価格：25年：2017}、
  {価格：29年：2018}、
  {価格：33、年：2019} 
  ]、
  スキーマ：{ 
  モデル：{ 
  フィールド：{ 
  価格：{タイプ： "数"}、
  年：{タイプ： "数"} 
  }
  } 
  } 
  }）。
$（ "＃フィルタ"）kendoFilter（{。
  データソース：データソース、
  expressionPreview：真、
  applyButton：真、
  フィールド：[ 
  {名： "価格"、種類： "番号"、ラベル： "コスト"}、
  {名： "年」、種類： "番号"、ラベル： "年"} 
  ] 
  }）のデータ（ "kendoFilter"）; 
。$（ "＃チャート"）kendoChart（{ 
  データソース：データソース、
  シリーズ：[ 
  {フィールド： "価格"} 
  ]、
  れるCategoryAxis：{ 
  フィールド： "年" 
  } 
  }）; 
  }）; 
関数ステートセーブ（E）{ 
  のlocalStorage [ "myFilterSettings"] = JSON。
  //あなただけではなく表現のすべてのオプションを保存し、復元することができます。
  （のlocalStorage [ "myFilterSettings"]）{もし
  VARフィルタ=れるgetFilter（）。
  VAR OPTS = filter.getOptions（）。
  opts.expression = JSON.parse（のlocalStorage [ "myFilterSettings"]）。
  filter.setOptions（OPTS）。
  あなたはすべてのオプションを復元する場合は、//、あなただけのfilter.setOptions（myOptionsLiteral）が必要です。
filter.applyFilter（）; //新しいフィルタ式を適用します。
  } 
  } 
関数clearState（）{ 
  削除のlocalStorage [ "myFilterSettings"]。
  } 
関数れるgetFilter（）{ 
  $（ "＃フィルタ"）を返すデータ（ "kendoFilter"）。
  } 
  </ SCRIPT>

スキャン注意ホイポリITマイクロチャネルパブリック番号、最新の動向や最新情報へのタイムリーなアクセス