jQuery_jquery に基づく動的テーブルプラグイン-jsチュートリアル-php.cn

jQuery_jquery に基づく動的テーブルプラグイン

WBOY

リリース： 2016-05-16 18:08:57

オリジナル

1211 人が閲覧しました

ここでは、ユーザー入力の検証、テーブルの追加と削除、ユーザー入力データの統計集計、および製品の合計価格 = 製品の単価 * 製品の数量などの対応する計算列を制御する必要があり、同時に、ユーザーが送信するとき、処理のためにバックグラウンドサーバーに送信を取得し、データベースに保存する必要もあります。このプラグインは、これらの面倒な作業を簡単に処理します。
プラグイン属性の説明:
1: rowTemplate: テンプレート内で列を挿入するためのテンプレートです。シリアル番号と行番号は rownum のクラスを示します。ラジオボタンの name 属性など、テンプレート内で一意の番号を必要とするものには、各 TD セル内に一意の名前グループが必要です。また、一意の属性が必要な id などの別の例では、{0} のプレースホルダーが必要です。同時に、テーブル処理では、一部の行動統計行またはデータの固定行はユーザーによって削除されないため、fixed=true が必要です。また、各入力コントロールまたはラベルコントロールについて、抽出された値を返す必要があるものは、property="propertyname" でマークする必要があります。
2: addTrigger: これは行の追加をトリガーする jQuery セレクターです。
3: addPosition: 挿入行の挿入位置です。デフォルトでは最後ですが、必要に応じて最後に集計行などの固定行が入る場合がありますので、3つあります。追加方法: 最初と数値。正の数は行の先頭から開始することを意味し、負の数は行の末尾から開始することを意味します。
4:removeTrigger: 削除マーク。配列であり、複数の削除ボタンを持つことができます。同時に、配列内の各オブジェクトは、セレクタートリガーボタン、値を備えた jQuery セレクターでもあります。 is first 最初の行、最後の列、および現在の列を削除します。すべての削除では、fixed=true ではない列が削除されます。
5: 同時に、$(selector).updateSortNum(); を通じて、すべての td 行番号列を rownum に置き換えることができます。実際、私はここで td 制限を削除することを検討しています。
6: $(rowselector).getRowObj(): property を属性として持つ JavaScript 行オブジェクトを取得します。
7:$(tableselector).getTableObj(): 行オブジェクトのコレクション(配列)であるプロパティを属性としたテーブルのJavaScript配列オブジェクトを取得します。
8: getSource (saveHiddentField): XML 組織の属性セットを取得します。saveHiddentField セレクターが渡された場合、これは自動的に saveHiddentField に割り当てられます。
ここでは item: 、root: item はデータ XML の各行のノードのデフォルトの項目、root は XML ルートノードのデフォルトのルートです。 XML を取得した後、XML をバックグラウンドで直接解析することも、DataSet.ReadXml() を使用して直接 DataTable に変換することもできます。
8: $(inputselector).getValue(): コントロールの値を取得します。text、label、checkbox、radio、label、td、textarea の値をサポートします。ラジオ値は選択された値であり、チェックボックスの値は、選択されたすべての行値を「,」で区切った文字列です。
9: 計算: 計算の概要、配列オブジェクト、セレクター付き: 概要表示コントロール財務検証の実際の支出額は承認額を超えることはできず、承認額は実際の予算額を超えることはできません。 selector、column: 要約された属性は、上で添付したプロパティ属性に対応します。 func: 集計処理メソッドです。集計関数: sum、max、min、count、avg、およびユーザー定義関数 (戻り値が必要) をサポートします。入力パラメーターはプロパティ値の配列です。
10: CalculatesColumn: 計算列。トリガー配列を含む js 配列でもあり、計算をトリガーするプロパティ、列計算列のプロパティ、および func カスタム処理関数を示します。 (ここでは式を使用し、eval を使用して自動計算を処理したかったのですが、必要な変更が多すぎて制御が難しいと感じたので、プロキシデリゲートとして関数を実装するかどうかはユーザーに任せた方がよいでしょう)コールバック関数として); これは、製品の合計価格 = 製品の単価 * 製品の数量を処理するために使用できます。上記の検証ファイナンスの実際の支出は、承認額を超えることはできません。また、承認額は実際の予算額を超えることはできません。同時に検証トリガーとしても使用できます。
このプラグインにはデータ型の検証はありません。検証の必要性が大きく変わりすぎるためです。第一レベルには優れた Jquer 検証プラグインが多数あり、一緒に使用すると非常に実用的になります。同時に、自分で制御することもできます。たとえば、私の 2 つの簡単な検証:

コードをコピーコードは次のとおりです。

$(".datetime").live("focus", function() {
WdatePicker({ readOnly: true, dateFmt: 'yyyy年 MM 月 dd 日' } )//MyDate97
} );
$(".number").live("keyup", function() {
this.value = this.value.replace(/[^-d. ]/g, '');
}).live("keydown", function(e) {
if (e.that == 189) {
$(this).val(-1 * parseFloat($(this).val())).trigger("change");
e.preventDefault();

上にはナンセンスが多すぎるので、以下でデモをしてみましょう:
ああ、このプラグインでは、テーブルが標準 w3c、thead、tbody に従う必要があることを思い出させるのを忘れていました。さらに、マルチヘッダー構造がどれほど複雑であっても、ヘッダー設定を自分で追加できます。

コードをコピーコードは次のとおりです:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MEFASPNET.aspx.cs" Inherits="MEFASPNET" %>