私が取り組んでいるプロジェクトでは、データベース内の値のアコーディオン ドロップダウンを動的に生成します。現在、生成されたドロップダウンで xEditable を使用して値をインプレース編集しています。ただし、入力タイプの設定に使用する方法 (インライン html 要素または jQuery 設定) に関係なく、それらは常にテキスト ボックス入力として表示されます。
ここにコード:
message.append($('<span />').addClass('').append($('<strong />').addClass('title').html('Project Name: '))
.append($('<a />').editable().attr("data-pk", projects.ID).attr("data-type", "text")
.attr("data-name", "ProjectName").attr("data-url", "/ReportServlet")
.attr("href", "#").html(projects.ProjectName))).append($('<br />'));;
message.append($('<span />').addClass('').append($('<strong />').addClass('title').html('Infrastructure PM: '))
.append($('<a />').editable().attr("data-pk", projects.ID).attr("data-type", "text")
.attr("data-name", "InfraPM").attr("data-url", "/ReportServlet")
.attr("href", "#").html(projects.InfraPM))).append($('<br />'));;
message.append($('<span />').addClass('').append($('<strong />').addClass('title').html('Clarity ID: '))
.append($('<a />').editable().attr("data-pk", projects.ID).attr("data-type", "text")
.attr("data-name", "ClarityID").attr("data-url", "/ReportServlet")
.attr("href", "#").html(projects.ClarityID))).append($('<br />'));;
message.append($('<span />').addClass('').append($('<strong />').addClass('title').html('Project Health: '))
.append($('<a />').editable().attr("data-pk", projects.ID).attr("data-type", "select")
.attr("data-name", "ProjectHealth").attr("data-url", "/ReportServlet")
.attr("data-source", [{value: 0, text: 'Green'}, {value: 1, text: 'Yellow'}, {value: 2, text: 'Red'}])
.attr("href", "#").html(
(projects.ProjectHealth == 0) ? '<pre class="green">Green</pre>'
: (projects.ProjectHealth == 1) ? '<pre class="yellow">Yellow</pre>'
: (projects.ProjectHealth == 2) ? '<pre class="red">Red</pre>' : "")));
message.append($('<span />').addClass('').append($('<strong />').addClass('title').html('Project Status: '))
.append($('<a />').editable().attr("data-pk", projects.ID).attr("data-type", "textarea")
.attr("data-name", "ProjectStatus").attr("data-url", "/ReportServlet").attr("data-rows", 5)
.attr("href", "#").html(projects.ProjectStatus))).append($('<br />'));
message.append($('<span />').addClass('').append($('<strong />').addClass('title').html('Project Schedule: '))
.append($('<a />').editable().attr("data-pk", projects.ID).attr("data-type", "textarea")
.attr("data-name", "ProjectSchedule").attr("data-url", "/ReportServlet").attr("data-rows", 5)
.attr("href", "#").html(projects.ProjectSchedule))).append($('<br />'));;
message.append($('<span />').addClass('').append($('<strong />').addClass('title').html('Project Hours--DBA: '))
.append($('<a />').editable().attr("data-pk", projects.ID).attr("data-type", "text")
.attr("data-name", "ProjectHoursDBA").attr("data-url", "/ReportServlet")
.attr("href", "#").html(projects.ProjectHoursDBA))).append($('<br />'));;
message.append($('<span />').addClass('').append($('<strong />').addClass('title').html('Project Hours--Infra: '))
.append($('<a />').editable().attr("data-pk", projects.ID).attr("data-type", "text")
.attr("data-name", "ProjectHoursInfra").attr("data-url", "/ReportServlet")
.attr("href", "#").html(projects.ProjectHoursInfra))).append($('<br />'));;
message.append($('<span />').addClass('').append($('<strong />').addClass('title').html('Project Hours--PM: '))
.append($('<a />').editable().attr("data-pk", projects.ID).attr("data-type", "text")
.attr("data-name", "ProjectHoursPM").attr("data-url", "/ReportServlet")
.attr("href", "#").html(projects.ProjectHoursPM))).append($('<br />'));;
message.append($('<span />').addClass('').append($('<strong />').addClass('title').html('Project Completion Date: '))
.append($('<a />').editable().attr("data-pk", projects.ID).attr("data-type", "datetime")
.attr("data-name", "ProjectCompletionDate").attr("data-url", "/ReportServlet")
.attr("href", "#").html(date)));