我已经将一个长的共享点库EditForm分为5个部分。我曾经做过的代码是由Marc Anderson在http://sympmarc.com/2011/08/18/taming-long-sharepoint-list-forms-using-jquery-to-break-them-into-sections/给出的，虽然我根据自己的需要进行了一些定制。
我面临的问题是，我在此页面上有3个字段是级联查找[由第三方服务器解决方案实现]。每当我更改其中一个查找字段的值时，它们都会更改某些其他列表框中可用的选项，但也会破坏上述JQuery代码创建的节结构。所有标准行和列按顺序显示，但JQuery创建的标题行一起出现在页面底部。
我尝试使用window.load而不是document.ready进行了一些其他修改。我获得的唯一成功是第一个查找字段现在工作正常，但第二个和第三个仍然打破了部分结构。有没有更好的方法来确保在每次ajax调用之后运行JQuery代码并在所有ajax响应处理程序完成执行后执行此操作？如果有更好的方法来完成同样的事情，我也会很感激这些建议。
我的最终代码现在看起来像这样：
<script type="text/javascript" language="javascript">
var openSection = 1;
$(window).load(function() {
createSections();
});
function createSections() {
setupSection("FormDetails", "Form Details", "Name", "Available Languages");
setupSection("DevelopmentAndApprovalProcess", "Development and Approval Process", "12-003 Submitted Date", "Development Flags");
setupSection("Privacy", "Privacy", "PIA Approved Date", "Sorn Citation");
setupSection("PaperworkReductionAct", "Paperwork Reduction Act", "Collection Title", "PRA POCs");
setupSection("Notes", "Notes", "Notes", "Notes");
addClickHandlers();
if(openSection == 2) {
$("tr[section-name='DevelopmentAndApprovalProcess']").css("display", "block");
$("tr#DevelopmentAndApprovalProcess").addClass("collapsible-collapse");
}
else if(openSection == 1) {
$("tr[section-name='FormDetails']").css("display", "block");
$("tr#FormDetails").addClass("collapsible-collapse");
}
}
function setupSection(sectionShortName, sectionLongName, startColumn, endColumn) {
var sectionStartRow = findFormField(startColumn).closest("tr");
var sectionEndRow = findFormField(endColumn).closest("tr");
$(sectionStartRow).before("<tr class='collapsible-section-header' id='" + sectionShortName + "'>" + "<td class='collapsible-section-header-cell' colspan=2>" + sectionLongName + "</td>" + "</tr>");
$("tr#" + sectionShortName).attr("header-row", "yes");
$(sectionStartRow).attr("section-name", sectionShortName);
$(sectionStartRow).nextUntil(sectionEndRow).attr("section-name", sectionShortName);
$(sectionEndRow).attr("section-name", sectionShortName);
$(sectionEndRow).children(1).addClass("collapsible-section-last-row-cell");
$(sectionEndRow).children(2).addClass("collapsible-section-last-row-cell");
$("tr[section-name='" + sectionShortName + "']").css("display", "none");
}
function addClickHandlers() {
$("tr[header-row='yes']").click(function() {
var activeSection = $(this).attr("id");
$("tr[header-row='yes']").each(function() {
var sectionName = $(this).attr("id");
var otherSectionRows = $("tr[section-name='" + sectionName + "']");
if(($(this).next("tr[section-name='" + sectionName + "']").css("display") == "block") && (sectionName != activeSection)) {
$(otherSectionRows).css("display", "none");
$(this).removeClass("collapsible-collapse");
}
});
var thisSectionRows = $("tr[section-name='" + activeSection + "']");
if($(this).next("tr[section-name='" + activeSection + "']").css("display") == "block") {
$(thisSectionRows).css("display", "none");
$(this).removeClass("collapsible-collapse");
}
else {
$(thisSectionRows).css("display", "block");
$(this).addClass("collapsible-collapse");
}
});
findFormField("Process Status").find("input[id*=Main_Input]").unbind('propertychange', createSectionsHandler);
findFormField("Process Status").find("input[id*=Main_Input]").bind('propertychange', createSectionsHandler);
}
function createSectionsHandler(e) {
e.preventDefault();
$("tr[header-row='yes']").remove();
setTimeout(createSections, 2500);
setTimeout(changeOpenSection, 3500);
}
function changeOpenSection() {
openSection = 2;
}
function findFormField(columnName) {
var thisFormBody;
var searchText;
searchText = RegExp("FieldName=\"" + columnName.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") + "\"", "gi");
$("td.ms-formbody").each(function() {
if(searchText.test($(this).html())) {
thisFormBody = $(this);
return false;
}
});
return thisFormBody;
}
</script>
<style>.collapsible-hidden { display:none; }</style>
<style>.collapsible-main { height:250px; overflow:scroll; }</style>
<style>.collapsible-no-item-selected { font-size:12px; }</style>
<style>.collapsible-section-link { padding-left:15px; font-size:10px; }</style>
<style>.collapsible-section-header { background-image:url('/_layouts/images/plus.gif'); background-repeat:no-repeat; background-position:5px center; padding:3px 3px 3px 22px; background-color:#6699cc; font-weight:bold; color:#ffffff; }</style>
<style>.collapsible-section-header-cell { border-top:1px #c2c2c2 solid; font-face:Arial; font-size:1.5em; padding-left:20px;}</style>
<style>.collapsible-section-last-row-cell { border-bottom:2px black solid; }</style>
<style>.collapsible-collapse { background-image:url('/_layouts/images/minus.gif'); }</style>
我道歉，我之前没有说清楚。 ajax调用由[第三方服务器解决方案]实现，该解决方案实现级联查找字段，根据在某些其他字段中选择的选项过滤某些列表框的值，并且我无法控制/访问这些调用/代码。 / p>
我尝试上传图片以使其更清晰，但它说我需要至少10个声誉才能上传图片。所以我试图用下面的文字模拟图像：
当页面加载时，它会将所有列正确划分为以下部分：
--------------FORM DETAILS------------ [header row inserted by jquery]
Column 1 Text Input
Column 2 Text Input
Column 3 Text Input
--------------DEVELOPMENT DETAILS----- [header row inserted by jquery]
Column 4 Dropdown
Column 5 Dropdown
Column 6 Dropdown
--------------NOTES------------------- [header row inserted by jquery]
Column 7 Text Input
Column 8 Text Input
当我更改say下拉列表4的选择时，它会更改下拉列表5和下拉列表6中的值，但页面布局变为 - 首先显示所有列，然后显示所有标题行：
Column 1 Text Input
Column 2 Text Input
Column 3 Text Input
Column 4 Dropdown
Column 5 Dropdown
Column 6 Dropdown
Column 7 Text Input
Column 8 Text Input
--------------FORM DETAILS------------ [header row inserted by jquery]
--------------DEVELOPMENT DETAILS----- [header row inserted by jquery]
--------------NOTES------------------- [header row inserted by jquery]