ホームページ >バックエンド開発 >PHPチュートリアル >編集可能なテーブル: jQuery PHP jeditable により、テーブル フィールドの内容をリアルタイムで編集できます

編集可能なテーブル: jQuery PHP jeditable により、テーブル フィールドの内容をリアルタイムで編集できます

WBOY
WBOYオリジナル
2016-06-13 12:37:27991ブラウズ

編集可能なテーブル: jQuery PHP jeditable は、テーブル フィールドのコンテンツのリアルタイム編集を実現します

は、jeditable と呼ばれる非常に実用的な jquery プラグイン を導入します。それが伝説のインスタント編集プラグインです。いわゆるインスタント編集とは、Webコンテンツを更新せずに変更できる機能で、更新せずにすぐに変更結果を表示できます。具体的な例については、プラグインの公式 Web サイト http://www.appelsiini.net/projects/jeditable/custom.html にあるデモを参照してください。変更可能なテキストをクリックするだけです。

//パラメータ設定

$('.edit').editable('save.php', {
幅:120、
身長:18、
                                                                                                                                              キャンセル: 'キャンセル "、
提出する インジケーター: '',
ツールチップ: 'クリックして編集...',
コールバック: function(値, 設定) {
$("#modifiedtime").html("Just");
}

//パラメータ設定を選択します。他の方法についてはリンクを参照してください 参考資料1


$('.edit_select').editable('save.php', {

ロードURL: 'json.php'、

入力:「選択」、
キャンセル: 'キャンセル "、
提出する インジケーター: '',
ツールチップ: 'クリックして編集...',
スタイル: '表示: インライン'
});


//jquery ui の datepicker カレンダー プラグインを呼び出します
$.editable.addInputType('datepicker', {

要素:関数(設定、オリジナル) {

var input = $('');
input.attr("readonly","re​​adonly");
$(this).append(input);
return(入力);
}、
プラグイン : 関数(設定、オリジナル) {
var form = this;
$("input",this).datepicker();
}


デモのダウンロード

参考資料 1

ドキュメント 2 を確認してください

ドキュメント 3 を確認してください


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。