JavaScript フレームワーク (xmlplus) コンポーネントの概要 (10) グリッド (DataGrid)-jsチュートリアル-php.cn

xmlplus は、フロントエンドおよびバックエンドプロジェクトを迅速に開発するための JavaScript フレームワークです。この記事では、xmlplus コンポーネント設計シリーズで主に xmlplus グリッドを紹介します。興味のある方は参考にしてください。この章では、最も基本的なグリッドコンポーネントを実装します。データ表示機能に加えて、並べ替え機能や

データフィルタリング

機能も提供します。

データソース

これからグリッドコンポーネントを作成することをテストするために、次の形式のデータソースを使用します。このデータソースには、ヘッダー

データセット

とテーブル本体データセットの 2 つの部分が含まれています。グリッドコンポーネントインスタンスの最終的な列数は、ヘッダーデータセットの長さによって決まります。

var data = {
 gridColumns: [&#39;name&#39;, &#39;power&#39;],
 gridData: [
 { name: &#39;Chuck Norris&#39;, power: Infinity },
 { name: &#39;Bruce Lee&#39;, power: 9000 },
 { name: &#39;Jackie Chan&#39;, power: 7000 },
 { name: &#39;Jet Li&#39;, power: 8000 }
 ]
};

ログイン後にコピー

トップレベルのデザイン

視覚的には、グリッドコンポーネントをテーブルヘッダーとテーブル本体に自然に分割します。このグリッドコンポーネントには 3 つの機能があるため、3 つの動的

インターフェース

を提供する必要があります。しかし、並べ替え機能はテーブルヘッダーをクリックすることで実行され、テーブルヘッダーはグリッドコンポーネントの一部であるため、この関数を組み込む必要があることに気付きました。したがって、実際には、グリッドコンポーネントは 2 つの動的インターフェイスのみを外部に公開します。1 つはフィルタリング用で、もう 1 つはデータソースの受信用です。したがって、次のようにトップレベルの設計を取得できます。

DataGrid: {
 xml: `<table id=&#39;table&#39;>
  <Thead id=&#39;thead&#39;/>
  <Tbody id=&#39;tbody&#39;/>
  </table>`,
 fun: function (sys, items, opts) {
 function setValue(data) {
  items.thead.val(data.gridColumns);
  items.tbody.val(data.gridColumns, data.gridData);
 }
 function filter(filterKey) {
  // 过滤函数
 }
 return { val: setValue, filter: filter };
 }
}

ログイン後にコピー

テーブルヘッダーの設計

テーブルヘッダーには 1 行しかないため、tr 要素を直接指定できます。 tr 要素の子項目の数はヘッダーデータセットの長さに依存するため、動的に作成する必要があります。 th 要素には並べ替え関数が含まれるため、個別にカプセル化する必要があります。以下は私たちが提供したヘッダーのデザインです。

Thead: {
 xml: `<thead id=&#39;thead&#39;>
  <tr id=&#39;tr&#39;/>
  </thead>`,
 fun: function (sys, items, opts) {
 function setValue(value) {
  sys.tr.children().call("remove");
  data.forEach(item => sys.tr.append("Th").value().val(item));
 }
 return { val: setValue };
 }
}

ログイン後にコピー

ヘッダーデータ項目コンポーネントはテキスト設定インターフェイスを提供します。コンポーネント自体は並べ替えを担当しません。コンポーネント自体の

view

state の変更と並べ替えコマンドのディスパッチのみを完了します。並べ替えコマンドのディスパッチには 2 つのデータが必要です。1 つは並べ替えキーワード (ヘッダーテキスト)、もう 1 つは並べ替え方向 (昇順または降順) です。

Th: {
 css: "#active { color: #fff; } #active #arrow { opacity: 1; } #active #key { color: #fff; }\
  #arrow { display: inline-block; vertical-align: middle; width: 0; height: 0; margin-left: 5px; opacity: 0.66; }\
  #asc { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #fff;}\
  #dsc { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #fff; }",
 xml: "<th id=&#39;th&#39;>\
  <span id=&#39;key&#39;/><span id=&#39;arrow&#39;/>\
  </th>",
 fun: function (sys, items, opts) {
 var order = "#asc";
 this.watch("sort", function (e, key, order) {
  sys.key.text().toLowerCase() == key || sys.th.removeClass("#active");
 });
 this.on("click", function (e) {
  sys.th.addClass("#active");
  sys.arrow.removeClass(order);
  order = order == "#asc" ? "#dsc" : "#asc";
  sys.arrow.addClass(order).notify("sort", [sys.key.text().toLowerCase(), order]);
 });
 sys.arrow.addClass("#asc");
 return { val: sys.key.text };
 }
}

ログイン後にコピー

テーブル本体の設計

テーブル本体には複数の行を含めることができますが、テーブル本体はデータを表示するだけなので、テーブルヘッダーよりも実装がはるかに簡単です。

Tbody: {
 xml: `<tbody id=&#39;tbody&#39;/>`,
 fun: function (sys, items, opts) {
 function setValue(gridColumns, gridData) {
  sys.tbody.children().call("remove");
  gridData.forEach(data => 
  tr = sys.tbody.append("tr");
  gridColumns.forEach(key => tr.append("td").text(data[key]));
  ));
 }
 return { val: setValue };
 }
}

ログイン後にコピー

並べ替え機能の追加

管理を容易にするために、並べ替え機能をコンポーネントに個別にカプセル化し、並べ替えインターフェイスを提供し、並べ替えメッセージをリッスンします。ソートメッセージを受信すると、キーワードとソート方向が記録され、テーブル更新コマンドが発行されます。

Sort: {
 fun: function (sys, items, opts) {
 var sortKey, sortOrder;
 this.watch("sort", function (e, key, order) {
  sortKey = key, sortOrder = order;
  this.trigger("update");
 });
 return function (data) {
  return sortKey ? data.slice().sort(function (a, b) {
  a = a[sortKey], b = b[sortKey];
  return (a === b ? 0 : a > b ? 1 : -1) * (sortOrder == "#asc" ? 1 : -1);
  }) : data;
 };
 }
}

ログイン後にコピー

並べ替え関数を完全に実装するには、主に上記の並べ替え関数コンポーネントを組み込み、テーブル本体の更新コマンドをリッスンするために、コンポーネント DataGrid にいくつかの変更を加えます。リフレッシュコマンドを受信すると、テーブル本体のデータがソートされ、テーブル本体がリフレッシュされます。

DataGrid: {
 xml: `<table id=&#39;table&#39;>
  <Thead id=&#39;thead&#39;/>
  <Tbody id=&#39;tbody&#39;/>
  <Sort id=&#39;sort&#39;/>
  </table>`,
 fun: function (sys, items, opts) {
 var data = {gridColumns: [], gridData: []};
 function setValue(value) {
  data = value;
  items.thead.val(data.gridColumns);
  items.tbody.val(data.gridColumns, data.gridData);
 }
 function filter(filterKey) {
  // 过滤函数
 }
 this.on("update", function() {
  items.tbody.val(items.sort(data.gridData));
 });
 return { val: setValue, filter: filter };
 }
}

ログイン後にコピー

フィルタリング関数の追加

並べ替え関数を追加するプロセスと同様に、フィルタリング関数を別のコンポーネントにカプセル化します。これにより、フィルタリングインターフェイスが提供され、フィルタリングメッセージがリッスンされます。メッセージが受信されると、フィルターキーワードが記録され、テーブル本体の更新コマンドが送出されます。

Filter: {
 fun: function (sys, items, opts) {
 var filterKey = "";
 this.watch("filter", function (e, key) {
  filterKey = key.toLowerCase();
  this.trigger("update");
 });
 return function (data) {
  return data.filter(function (row) {
  return Object.keys(row).some(function (key) {
   return String(row[key]).toLowerCase().indexOf(filterKey) > -1;
  });
  });
 };
 }
}

ログイン後にコピー

また、DataGrid コンポーネントにいくつかの変更を加える必要があります。変更内容は、前述の並べ替え機能の追加と同様です。異なる点は、フィルターインターフェイスがさらに改良され、メッセージの範囲が制限されることです。以下は最終的なグリッドコンポーネントです。

DataGrid: {
 css: `#table { border: 2px solid #42b983; border-radius: 3px; background-color: #fff; }
  #table th { background-color: #42b983; color: rgba(255,255,255,0.66); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
  #table td { background-color: #f9f9f9; }
  #table th, #table td { min-width: 120px; padding: 10px 20px; }`,
 xml: `<table id=&#39;table&#39;>
  <Thead id=&#39;thead&#39;/>
  <Tbody id=&#39;tbody&#39;/>
  <Sort id=&#39;sort&#39;/>
  <Filter id=&#39;filter&#39;/>
  </table>`,
 map: { msgscope: true },
 fun: function (sys, items, opts) {
 var data = {gridColumns: [], gridData: []};
 function setValue(value) {
  data = value;
  items.thead.val(data.gridColumns);
  items.tbody.val(data.gridColumns, data.gridData);
 }
 function filter(filterKey) {
  sys.table.notify("filter", filterKey);
 }
 this.on("update", function() {
  items.tbody.val(items.filter(items.sort(data.gridData)));
 });
 return { val: setValue, filter: filter };
 }
}

ログイン後にコピー

メッセージの範囲を制限するオプションをマッピング項目で設定する必要があることに注意してください。そうしないと、アプリケーション内で複数のグリッドコンポーネントがインスタンス化されるときに、メッセージが相互に干渉します。

テスト

最後に、完成したコンポーネントをテストしましょう。テストされる主な機能は、最初に説明した、データの表示、並べ替え、フィルターです。

Index: {
 css: "#index { font-family: Helvetica Neue, Arial, sans-serif; font-size: 14px; color: #444; }\
  #search { margin: 8px 0; }",
 xml: "<p id=&#39;index&#39;>\
  Search <input id=&#39;search&#39;/>\
  <Table id=&#39;table&#39;/>\
  </p>",
 fun: function (sys, items, opts) {
 items.table.val(data);
 sys.search.on("input", e => items.table.filter(sys.search.prop("value")));
 }
}

ログイン後にコピー

この一連の記事は、xmlplus フレームワークに基づいています。 xmlplus についてあまり詳しくない場合は、www.xmlplus.cn にアクセスしてください。詳細な入門ドキュメントはここから入手できます。

【関連おすすめ】

1.
無料のjsオンラインビデオチュートリアル

3. php.cn Dugu Jiijian (3) - JavaScriptビデオチュートリアル
以上がJavaScript フレームワーク (xmlplus) コンポーネントの概要 (10) グリッド (DataGrid)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。