0
我在jQuery中一起使用ckeditor和datatable時遇到問題。這個問題的當使用數據表添加新行時，現有ckeditor行中的數據將重置
歷史 -
我使用的數據表裏面有兩個文本列，日期列和將其轉化爲CKEDITOR例如一個textarea顯示錶。當我從db中加載這個表時，數據很好，並按預期工作。但是，當我添加一行到這個數據表時，現在的文本或數據是一個ckeditor實例的textarea被重置。通過我的分析，我發現當我添加一行時，數據表中的fnAddRow（）將重繪表格，除非它被禁用。我沒有問題重新繪製自己的表格，但最令人痛心的是爲什麼單獨ckeditor中的文本被重置。
下面是摘錄 -
DataTable的定義 -
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>
任何HEL p非常感謝。謝謝