EasyUIのDatagridは、テーブル形式のデータを表示し、データの選択、並べ替え、グループ化、編集のための豊富な機能サポートを提供します。 Datagridは、開発時間を短縮し、開発者が特定の知識を持たないように設計されています。軽量で機能が豊富です。セルマージ、マルチコラムタイトル、フローズンコラム、フッターは、機能のほんの一部です。
1。セクション4の内容を確認します
セクション4では、EasyUIを使用して左側にメニューバーを構築し、メニューオプションをクリックして対応するタブが右にポップアップ表示されます。このセクションでは、Datagridを使用して、右側のタブセクションを完成させます。まず、セクション4の最後のaindex.jspファイルを見てみましょう（セクション4のコンテンツも参照）。
2.データグリッドコントロールを作成するいくつかの方法
DatagridディスプレイデータはJSON形式であるため、まず背景から取得したデータをJason形式にパッケージ化し、次にフロントデスクに渡してDatagridを表示する必要があります。このセクションでは、バックグラウンドからデータを取得しません。最初に、同じ形式のデータを含む.JSONファイルを準備します。次に、Datagirdを表示し、最初に表示機能を適切に作成し、次に背景データをリクエストします。
以下の図に示すように、easyUIの参照ドキュメントからのDatagridディスプレイの形式を最初に見てみましょう。
参照ドキュメントに沿って見下ろすと、datagridスペースが<table>を介して作成されていることがわかり、それを作成するには3つの方法があります。
最初のものは、既存のテーブル要素からデータグリッドを作成し、HTMLの列、行、およびデータを定義します。
2番目のタイプ： <table>タグを介してデータグリッドコントロールを作成します。 <th>タグを使用して、テーブル内の列を定義します。
3番目のタイプ： JavaScriptを使用して、Datagridコントロールを作成します。
JSを使用してDatagridコントロールを作成する3番目のタイプを採用します。まず、JSON形式のデータを保存するファイルを準備する必要があります。 Webroot/jQuery-easyui-1.3.5/demo/datagrid/にはいくつかのJSONファイルがあります。 datagrid_data1.jsonを選択し、Webrootディレクトリにコピーし、パラメーターを変更すると、このJSONファイルのデータを後で表示します。次のように：
{"Total"：10、 "rows"：[{"code"： "fi-sw-01"、 "productname"： "koi"、 "rice"：10.00}、{"code"： "k9-dl-01"、 "productname"： "dalmation"、 "" price "：12.00}、 {"code"： "rp-sn-01"、 "productname"： "rattlesnake"、 "rice"：12.00}、{"code"： "rp-li-02"、 "productname"： "iguana"、 "rice"：12.00}、{"code"： "fl-dsh-01"： "Manx" "：" "Manx" ""： "fl-dsh-0 {"code"： "fl-dsh-01"、 "productname"： "manx"、 "frice"：12.00}、{"code"： "fl-dlh-02"、 "persian"： "persian"、 "f.00}、{" code "：" fl-dlh-02 "、" Persian " {"code"： "av-cb-01"、 "productname"： "amazon parrot"、 "rice"：92.00}、{"code"： "av-cb-03"、 "productname"： "amazon parrot"、 "rice"：92.00}]} JSONデータ形式は、 "key1"：value1、 "key2"：value2であることがわかります。各値は配列であり、新しいJasonデータが配列に保存されます。
JSONファイルを使用すると、次にDatagridコントロールを設計できます。 Datagrid全体はquery.jspで設計されています。これは、表示されるコンテンツがquery.jspのコンテンツであるためです。 query.jspページを見てみましょう。
<％@ページ言語= "java" import = "java.util。*" pageencoding = "utf-8"％> <！doctype html public " - // w3c // dtd html 4.01 transitional // en"> <html> <head> <％file = " $（function（）{$（ '＃dg'）。datagrid（{//リクエストデータのURLアドレスが変更され、url url： 'datagrid_data.json'、loadmsg： 'loading ......'、queryparams：{type： ''}、//パラメータ//水平方向のスクロールバーはありません。このパラメーターを設定しないでください。 + index + "、" + row）if（index％2 == 0）{return 'background-color：#ffff;';幅が250を超えると、スクロールバーが表示されますが、凍結列はスクロールバーFrozencolumnsにはありません：[{{field： 'checkbox'、チェックボックス：true}、{code '、' code '、' number： 'width：200}]、//列を見るために人々が表示されます。 }}、{field： 'field'、title： 'price'、width：100、styler：function（value、row、index）{//現在のセルのスタイルを設定し、返された文字列は// console.infoに直接渡されます（ "val：" + value + "、row：" + row + "、in index：" + index： "（value <20） }}}]]]}）; }）; </script> </head> <body> <table id = "dg"> </table> </body> </html>3。Datagridコントロールのプロパティ
JSを使用してDatagridコントロールを作成する場合、主にJSで行われる<table>タグのみが必要であることがわかります。 Datagridのコントロールは非常に強力です。ここでは、主に基本的なディスプレイを実行します。その他の機能については、EasyUIの開発文書を参照してください。現在、上記のquery.jspファイルで分析を行っています。
まず、Datagridコントロールには2つのプロパティがあります。1つはDatagridプロパティ、もう1つは列プロパティです。名前が示すように、DatagridプロパティはDatagridコントロール全体に追加された属性であり、列プロパティは特定の列用です。それぞれに多くの属性があり、ここではいくつかの基本的で一般的に使用される属性のみが作成されます。
Datagridプロパティで最も重要なことは、列プロパティです。これは、複数の列を作成できる配列です。以下のスクリーンショットを参照してください。
列属性の詳細を見てみましょう。
列属性では、フィールドはJSONデータのキーに対応するフィールド名を表し、タイトルはユーザーに表示されるタイトルです。 query.jspファイルを参照してください。 EasyUIドキュメントを参照できる他の基本的な属性がいくつかあります。列プロパティでさらに重要で一般的に使用されるプロパティは、現在の列の値とセットセルスタイルのフォーマットに使用されるフォーマッタとスタイラーです。主にこれら2つのプロパティを見てみましょう。
上記のquery.jspの列属性でこれら2つの列プロパティを使用する方法を詳細に分析しましょう。
{field： 'productname'、title： 'category name'、width：100、// function（value、row、index）{//現在のセルのスタイルを設定すると、返された文字列はスタイル属性// console.info（ "val：" + value + "、row：" + row + "、index：" + index）if（value <20）{//値が20未満の場合、return 'color：red;'; //赤の値を表示}}}次に、データグリッドコントロールのいくつかのプロパティを見てみましょう。
URLは、表示されるデータソースを表します。ここでdatagrid_data.jsonとして設定されていることは、データソースがこのJSONファイルであり、WebRootディレクトリに配置されていることを意味します。
loadmsgは、データの読み込み中に表示される情報を表します。
QueryParamsとは、バックグラウンドにまだ関連付けられていないが、後で使用されるJSONファイルのみを表示しているため、ここで使用することはできません。
FitColumsがTrueに設定された後、水平拡張が自動的に水平に拡張され、適応グリッドの幅が適応されることを意味します。このようにして、水平方向にスクロールバーがなく、幅を設定する必要はありません。
幅は幅です。データが長すぎて表示できない場合、スクロールバーが水平方向に表示されます。
縞模様がtrueに設定された後、ゼブラの交差が表示されることを意味します。これはディスプレイスタイルです。試してみてください。
NowrapがTrueに設定されている場合、それはデータが多すぎる場合、線に包まれないことを意味します。そうしないと、特定の行にデータが多すぎる場合、醜いです。
ページネーションが真実に設定されている場合、それはページング機能が有効になることを意味します。
SingleSelectがTrueに設定されている場合、単一の行のみを確認できます。選択のすべての関数は無効であり、主にフロント列のチェックボックスに使用されます。
Frozencolumsは冷凍柱を設定することであり、Frozencolumsに設定された列はサイズを変更しません。 {field： 'チェックボックス'、チェックボックス：true}が設定されている場合、これはユーザー用に選択されたチェックボックス列であることを意味します。上記のsingleselectが設定されている場合、すべてを選択できるのはすべてではなく、選択できます。
RowStylerはすべての行のスタイルです。 2つのパラメーターは、行インデックスと行です。上記は、列でさえ白くて奇妙な列が黄色であると設定されています。
待ってください... Datagridコントロールの他のプロパティがあります。EasyUIの技術文書を参照できます。ここでは1つずつ説明しません。
4。Datagridデータ表示の効果
Query.jspを完了した後、Tomcatを再起動し、背景を入力し、左側のメニューバーのカテゴリ管理をクリックすると、右側にカテゴリ管理タブが表示され、指定したJSONデータが表示されます。このJasonデータは、Webrootディレクトリに自分自身に配置されています。その後、JSONとStrutsを統合して、バックグラウンドから送信されたJSONデータを動的に取得します。
（注：最後に、プロジェクト全体のソースコードのダウンロードを提供します！誰もが収集または共有できます）
元のアドレス：http：//blog.csdn.net/eson_15/article/details/51322262
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。