私はお気に入りの JavaScript ライブラリの 1 つをインプレース編集呼び出しX-Editable
に使用しています https://github.com/vitalets/x-editable
プロジェクト管理アプリケーションを構築しています。プロジェクト ページには複数のタスク リストがあり、各リストには複数のタスクを含めることもできます。
1 つのプロジェクトに 100 以上のタスクを簡単に含めることができます。ユーザーがタスクのタイトルをクリックすると、クリックしたタスクのすべてのタスクの詳細を表示するページにポップアップ モーダル ウィンドウが表示されます。次のようなもの：
- タスクのタイトル
- タスクの説明
- タスクの作成日
- タスクの変更日
- タスクの期日
- マイルストーン
- タスクのステータス
- タスクの優先度
- タスクのコメント (タスクについても、任意の数のコメントを表示できます)
これらのタスクの詳細項目のそれぞれについて、それらの多くは X-Editable JavaScript ライブラリを使用したインプレース編集機能を備えています。
現在、ライブラリを使用してここのフィールドの一部を編集する方法を示す簡単なモックアップがあります [モックアップは、何度も更新され、この質問の投稿日から変更されたため、削除されました]
$(document).ready(function() {
//toggle `popup` / `inline` mode
$.fn.editable.defaults.mode = 'inline';
$('#task-title-modal').editable({
type: 'text', // text|textarea|select|date|checklist
url: '/updatetask',
pk: 1,
toggle: 'click', // click|dblclick|mouseenter|manual
highlight: '#FFFF80',
mode: 'inline', // inline | popup
placement: 'top',
title: 'Enter Task Title',
tpl: '<input type="text" style="width: 253px; padding-right: 24px;">',
validate: function(value) {
if($.trim(value) == '') {
return 'This field is required';
}
},
params: function(params) {
//Addition params in addition to the default: pk, name, value
params.userId = 1;
params.projectId = 1;
params.taskId = 1;
return params;
},
success: function(response, newValue) {
if(!response.success) return response.msg;
}
});
//ajax emulation. Type "err" to see error message
$.mockjax({
url: '/updatetask',
responseTime: 900, // simulate lag
response: function(settings) {
console.log(settings.data);
if(settings.data.value == 'err') {
this.status = 500;
this.responseText = 'Validation error!';
} else {
this.responseText = '';
}
}
});
});
このデモ ページはうまく機能します...1 つの例外を除いて....これは 1 つのタスク レコード用です!
ページ上の X 個のタスク レコードに対して機能させる方法を理解する必要があります。
プロジェクトに 100 個のタスク レコードがある場合、JavaScript は X-Editable コードを各タスク レコードと各タスク レコードの各ファイルに割り当てる必要があります。
私の質問は、このライブラリを単一ページの任意の数のレコードのインライン編集で機能させるにはどうすればよいですか?
現在、各タスクの各フィールドについて、次のようなことをしなければなりません...
$('#task-title-modal').editable({})
だから私はおそらくこのようなことをする必要があります...
$('#task-title-modal-ID_NUMBER_HERE').editable({})
次に、HTML で、各タスク レコードの ID 番号を使用して ID を設定できます。jQueryセレクターは、これらすべてのIDを見つけるために何らかの方法でワイルドカードメソッドを使用する必要があります....何かアイデアはありますか?