我在 jquery 中同时使用 ckeditor 和 datatable 时遇到问题。
这个问题的历史 -
我使用数据表显示表格，该表格有两个文本列、一个日期列和一个转换为 ckeditor 实例的文本区域。当我从数据库加载这个表时，数据很好并且按预期工作。但是当我在这个数据表中添加一行时，作为 ckeditor 实例的 textarea 中的现有文本或数据将被重置。通过我的分析，我发现当我添加一行时，数据表中的 fnAddRow() 会重新绘制表格，除非它被禁用。我对让表格重绘本身没有问题，但令人痛苦的是为什么单独重置 ckeditor 中的文本。
以下是片段 -
数据表定义 -
var config = {
"bJQueryUI": true,
"bAutoWidth": true,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bPaginate": false,
"bDestroy": false,
"aoColumnDefs": [
{ "sType": "html", "aTargets": [ 0,1,3 ] },
{"sWidth": "350px", "aTargets": [ 4 ] },//,
{"sWidth": "100px", "aTargets": [ 3 ] },//,
{"sWidth": "165px", "aTargets": [ 2 ] },//,
{"sWidth": "165px", "aTargets": [ 1 ] },//,
{"sWidth": "165px", "aTargets": [ 0 ] }//,
//{"sWidth": "15%", "aTargets": [ 3 ] },
//{"sWidth": "15%", "aTargets": [ 2 ] },
//{"sWidth": "15%", "aTargets": [ 1 ] },
//{"sWidth": "15%", "aTargets": [ 0 ] },
],
"oLanguage": {
"sEmptyTable": "No data available"
},
"bRetrieve": true,
"fnDrawCallback": function( oSettings ) {
//$( ".documents").ckeditor(planningeditorConfig);
alert('table redrawn..');
}
};
var oTable = $(".datatable").dataTable(config);
向现有表添加行的函数 -
$("#add-planning-row").click( function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData( [ "", "", "", "", ""] );
var nRow = oTable.fnGetNodes( aiNew[0] );
nRow.className = " planningRow "+nRow.className;
var aData = oTable.fnGetData(nRow);
var jqTds = $(">td", nRow);
var loopIndexValue = parseInt($("#loopIndexValue").val());
var html = "<input type=\"text\" value=\""+aData[0]+"\" name=\"projectPlanning["+loopIndexValue+"].eftName\" class=\"planningField\" >"
+ "<input type=\"hidden\" value=\"${project.id}\" name=\"projectPlanning["+loopIndexValue+"].projectId\" class=\"planningField\" />"
+ "<input type=\"hidden\" value=\"added through ui\" name=\"projectPlanning["+loopIndexValue+"].description\" class=\"planningField\" />"
+ "<input type=\"hidden\" value=\"plan for ${project.name}\" name=\"projectPlanning["+loopIndexValue+"].name\" class=\"planningField\" />";
var comboHtml = " <select class=\"combobox\" name=\"projectPlanning["+loopIndexValue+"].itemStatus.id\" id=\"projectPlanning"+loopIndexValue+".itemStatus.id\" class=\"planningField\" > "+
" <option value=\"1\">New</option> "+
" <option value=\"2\">On Track</option> "+
" <option value=\"3\">Minor Impact</option> "+
" <option value=\"4\">Major Impact</option> "+
" <option value=\"5\">Complete</option> "+
" </select> ";
jqTds[0].innerHTML = html;
jqTds[1].innerHTML = "<input type=\"text\" value=\""+aData[1]+"\" name=\"projectPlanning["+loopIndexValue+"].item\" class=\"planningField\" >";
jqTds[2].innerHTML = "<input type=\"text\" value=\""+aData[2]+"\" name=\"projectPlanning["+loopIndexValue+"].itemDate\" class=\"datepicker planningField \" >";
jqTds[3].innerHTML = comboHtml;
jqTds[4].innerHTML = "<textarea type=\"text\" value=\"\" name=\"projectPlanning["+loopIndexValue+"].document\" class=\"documents planningField \" >"+aData[4]+"</textarea>";
$("#loopIndexValue").val(loopIndexValue+1);
$( ".datepicker" ).datepicker();
$( ".combobox" ).combobox();
$( ".documents").ckeditor(planningeditorConfig);
nEditing = nRow;
} );
HTML 表格 -
<div id="planning-tab" class="planning-content">
<div class="ui-dialog-buttonset">
<input id="delete-planning-row" type="button" class="button" value="Delete planning item" />
<input id="add-planning-row" type="button" class="button" value="Add planning item" />
</div>
<table id="planning-list" class="datatable" style="width: 1024px;">
<thead>
<tr>
<td> EFT </td>
<td> Item </td>
<td> Date </td>
<td> Status </td>
<td> Document </td>
</tr>
</thead>
<tbody>
<c:set value="0" var="loopIndexValue" ></c:set>
<c:forEach items="${project.projectPlanning}" var="planning" varStatus="status">
<tr class="planningRow">
<td>
<input value="<ctg:capitalize text="${planning.eftName}" />" name="projectPlanning[${status.index}].eftName" class="planningField planningEftName"/>
<input type="hidden" value="${planning.id}" name="projectPlanning[${status.index}].id" class="planningField" />
<input type="hidden" value="${planning.name}" name="projectPlanning[${status.index}].name" class="planningField" />
<input type="hidden" value="${planning.description}" name="projectPlanning[${status.index}].description" class="planningField" />
<input type="hidden" value="${project.id}" name="projectPlanning[${status.index}].projectId" class="planningField" />
<%-- <input type="hidden" value="${planning.document}" name="projectPlanning[${status.index}].document" class="planningField" /> --%>
</td>
<td>
<input value="${planning.item}" name="projectPlanning[${status.index}].item" class="planningField planningItem" />
</td>
<td>
<input value="<fmt:formatDate pattern="MM/dd/yyyy" value="${planning.itemDate}" />" name="projectPlanning[${status.index}].itemDate" class="datepicker planningField"/>
</td>
<td>
<form:select path="projectPlanning[${status.index}].itemStatus.id" items="${projectStatuses}" itemLabel="name" itemValue="id" cssClass="combobox planningField" />
</td>
<td>
<%-- <form:textarea class="ckeditor" id="ckeditorPlan" name="projectPlanning[${status.index}].document" path="document" rows="1" cols="20" /> --%>
<%-- <textarea class="ckeditor" id="ckeditorPlan" name="projectPlanning[${status.index}].document" rows="1" cols="20" >${planning.document}</textarea> --%>
<textarea contenteditable="true" name="projectPlanning[${status.index}].document" rows="1" cols="20" class="documents planningField planningDocument">${planning.document}</textarea>
</td>
</tr>
</c:forEach>
</tbody>
</table>
任何帮助是极大的赞赏。谢谢