请帮助加快SP列表冻结窗格的代码 [英] Please help speed up code for SP List Freeze Panes
问题描述
大家好，
我在数据表视图中有一个巨大的SharePoint列表，它存在性能问题（页面加载速度慢，过滤和排序速度慢）。我做了一些改进以提高性能：
1。有限的物品数量为30
2。删除所有图像
3。最小化页面上的自定义代码。这就是我的问题所在。我一直在使用下面的代码为我的SharePoint列表创建一个冻结窗格，所以当用户向下滚动时，列标题不会消失。不幸的是，经过测试，此代码显着降低了我的列表性能
。
我的问题： 有没有另一种方法来实现我的SharePoint列表中的冻结窗格感觉对列表功能的性能影响较小？提前谢谢！
< script src =" https：//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery .min.js" type =" text / javascript">< / script>< script type =" text / javascript">
jQuery（document）.ready（function（）{
stickyHeaders（）
}）
function stickyHeaders （）{
if（jQuery.inArray（" spgantt.js"，g_spPreFetchKeys）> -1）{
SP.SOD.executeOrDelayUntilScriptLoaded（function（）{
findListsOnPage（）;
}，" spgantt.js"）;
} else {
findListsOnPage（）;
}
$（窗口）.bind（'hashchange'，findListsOnPage）;
}
函数findListsOnPage（）{
var lists = $（'。ms-listviewtable'）
var quickEditLists = [];
var listViews = [];
$（列表）.each（function（i）{
if（$（this）.find（'div [id ^ =" spgridcontainer"]'） .length> 0）{
quickEditLists.push（$（this））
} else if（$（this）.hasClass（" ms-listviewgrid"） == false）{
listViews.push（$（this））
}
}）
if （quickEditLists.length> 0）{
SP.GanttControl.WaitForGanttCreation（function（ganttChart）{
initializeStickyHeaders（quickEditLists，" qe"）;
}）;
}
if（listViews.length> 0）{
initializeStickyHeaders（listViews，" lv"）;
}
}
函数initializeStickyHeaders（列表，类型）{
var top_old = [] ，top_new = []，
bottom_old = []，bottom_new = []，
stickies = []，header = []，
indexOffset = 0;
var style =" ;;" +
" top：2px;" +
" z-index：1;" +
" background-color：beige;" +
" box-shadow：3px 3px 5px #DDDDDD;" +
" display：none"
$（窗口）.unbind（'resize。'+ type）;
$（窗口）.bind（'resize。'+ type，updatestickies）;
$（'＃s4-workspace'）。unbind（'scroll。'+ type）;
$（'＃s4-workspace'）。bind（'scroll。'+ type，updatestickies）;
$（列表）.each（function（）{
headers.push（$（this）.find（$（'。ms-viewheadertr：visible'）） ）
}）;
$（header）.each（function（i）{
var table = $（this）.closest（" table"）;
if（table.find（" tbody> tr"）。length> 1）{
table.parent（）。find（" .sticky-anchor"）。remove（ ）
table.parent（）。find（" .sticky"）。remove（）
var anchor = table.before（'< div class =" sticky-anchor">< / div>'）
stickies.push（$（this）.clone（true，true）.addClass（" sticky"）。attr（'style' ，样式）.insertAfter（锚））
var tbodies = $（this）.parent（" thead"）。siblings（" tbody"）
if（if） tbodies.length> 1）{
tbodies.bind（" DOMAttrModified"，function（）{
setTimeout（function（）{
$（'＃s4-workspace'）。触发器（" scroll"，true）
}，250）
}）
}
} else {
headers.splice（i-indexOffset，1）
indexOffset ++;
}
}）
//即使没有事件触发也要做一次
updatestickies（）;
函数updatestickies（event，DOMchangeEvent）{
$（headers）.each（function（i）{
if（DOMchangeEvent）{
width（）;
返回false;
}
函数宽度（）{
stickies [i] .width（headers [i] .width（））。find（'th'）。each（function（j）{
$（this）.width（headers [[ i] .find（'th：nth-child（'+（j + 1）+'）'）。width（））
}）
}
top_old [i] = top_new [i]
top_new [i] = Math.round（$（this）.offset（）。top - 45）
bottom_old [i] = bottom_new [i]
bottom_new [i] = Math.round（top_new [i] - 30 + $（this）.closest（'table'）。height（ ））
stickies [i] .offset（{
left：Math.round（headers [i] .closest（" div [id ^ = WebPartWPQ]"如果（top_old [i]> = 0&& top_new [i]< = 0 |）。 |
bottom_old [i]< = 0&& bottom_new [i]> = 0 ||
top_old [i] === undefined&& ; bottom_old [i ] === undefined&& top_new [i]< 0&& bottom_new [i]> 0）{
width（）;
stickies [i] .fadeIn（）;
}否则if（top_old [i]< = 0&& top_new [i]> = 0 || bottom_old [i]> = 0&& bottom_new [i] < = 0）{
stickies [i] .fadeOut（）;
}
}）
}
}
< / script>
以下JavaScript + CSS代码供您参考，将以下代码添加到脚本编辑器Web部件中。
< style type =" text / CSS">
#CustomHeading {
HEIGHT：28px;
display：none;
}
.FixedHeader {
margin-top：-200px;
;
background-color：lightGray;
display：block！important;
z-index：999;
}
＃CustomHeading> table {
border-collapse：separate！important;
}
＃CustomHeading> table> tbody {
visibility：hidden;
}
#CustomHeading .ms-viewheadertr {
visibility：visible！important;
}
< / style>
< script type =" text / javascript">
window.onload = function（）{
document.getElementById（" s4-workspace"）。onscroll = function（）{
ListScroll（）;
var cHead = document.getElementById（" CustomHeading"）;
if（cHead！= null）{
if（this.scrollTop> 200）{
cHead.classList.add（" FixedHeader"）;
} else {
cHead.classList.remove（" FixedHeader"）;
}
}
}
};
函数ListScroll（）{
var myTable = document.getElementsByClassName（" ms-listviewgrid"）[0];
if（myTable！= null）{
var insertDiv = document.getElementsByClassName（" ms-csrlistview-controldiv"）[0];
if（document.getElementById（" CustomHeading"）== null）{
var customHeadingDiv = document.createElement（'div'）;
customHeadingDiv.appendChild（myTable.cloneNode（true））;
customHeadingDiv.id =" CustomHeading" ;;
insertDiv.parentNode.insertBefore（customHeadingDiv，insertDiv.nextSibling）;
}
}
}
< / script>
最好的问候，
Dennis
Hi all,
I have a huge SharePoint list in datasheet view that is having performance issues (slow page load, slow filtering & sorting). I have made some changes to improve performance:
1. Limited # of items to 30
2. Removed all images
3. Minimized custom code on page. This is where my question is. I've been using the code below to create a freeze panes feel to my SharePoint list so when users scroll down, the column headers don't disappear. Unfortunately, after testing, this code is significantly slowing down my list performance.
My question: is there a another way to implement the freeze panes feel to my SharePoint list that will have less of a performance impact on list functionality? Thank you in advance!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script><script type="text/javascript"> jQuery(document).ready(function(){ stickyHeaders() }) function stickyHeaders(){ if( jQuery.inArray( "spgantt.js", g_spPreFetchKeys ) > -1){ SP.SOD.executeOrDelayUntilScriptLoaded(function () { findListsOnPage(); }, "spgantt.js"); } else { findListsOnPage(); } $(window).bind('hashchange', findListsOnPage); } function findListsOnPage() { var lists = $('.ms-listviewtable') var quickEditLists = []; var listViews = []; $(lists).each(function(i){ if($(this).find('div[id^="spgridcontainer"]').length > 0 ){ quickEditLists.push($(this)) } else if( $(this).hasClass("ms-listviewgrid") == false ) { listViews.push($(this)) } }) if(quickEditLists.length > 0) { SP.GanttControl.WaitForGanttCreation(function (ganttChart) { initializeStickyHeaders(quickEditLists, "qe"); }); } if(listViews.length > 0) { initializeStickyHeaders(listViews, "lv"); } }
function initializeStickyHeaders (lists, type) { var top_old = [], top_new = [], bottom_old = [], bottom_new = [], stickies = [], headers = [], indexOffset = 0 ;
var style = ";" + "top:2px;" + "z-index:1;" + "background-color:beige;" + "box-shadow:3px 3px 5px #DDDDDD;" + "display:none" $(window).unbind('resize.' + type); $(window).bind ('resize.' + type, updatestickies ); $('#s4-workspace').unbind('scroll.' + type); $('#s4-workspace').bind ('scroll.' + type, updatestickies ); $(lists).each(function(){ headers.push($(this).find($('.ms-viewheadertr:visible'))) }); $(headers).each(function (i) { var table = $(this).closest("table"); if(table.find("tbody > tr").length > 1) { table.parent().find(".sticky-anchor").remove() table.parent().find(".sticky").remove() var anchor = table.before('<div class="sticky-anchor"></div>') stickies.push($(this).clone(true,true).addClass("sticky").attr('style', style).insertAfter(anchor)) var tbodies = $(this).parent("thead").siblings("tbody") if(tbodies.length > 1) { tbodies.bind("DOMAttrModified", function(){ setTimeout(function(){ $('#s4-workspace').trigger("scroll", true) }, 250) }) } } else { headers.splice(i-indexOffset,1) indexOffset++; } }) //Do it once even without beeing triggered by an event updatestickies(); function updatestickies (event, DOMchangeEvent) { $(headers).each(function (i) { if(DOMchangeEvent) { width(); return false; } function width() { stickies[i].width(headers[i].width()).find('th').each(function (j) { $(this).width(headers[i].find('th:nth-child(' + (j+1) + ')').width()) }) } top_old[i] = top_new[i] top_new[i] = Math.round($(this).offset().top - 45) bottom_old[i] = bottom_new[i] bottom_new[i] = Math.round(top_new[i] - 30 + $(this).closest('table').height()) stickies[i].offset({ left: Math.round(headers[i].closest("div[id^=WebPartWPQ]").offset().left) }); if(top_old[i] >= 0 && top_new[i] <= 0 || bottom_old[i] <= 0 && bottom_new[i] >= 0 || top_old[i] === undefined && bottom_old[i] === undefined && top_new[i] < 0 && bottom_new[i] > 0 ) { width(); stickies[i].fadeIn(); } else if (top_old[i] <= 0 && top_new[i] >= 0 || bottom_old[i] >= 0 && bottom_new[i] <= 0 ) { stickies[i].fadeOut(); } }) } } </script>
Hi,
The following JavaScript+CSS code for your reference, add the code below into script editor web part.
<style type="text/css"> #CustomHeading { HEIGHT: 28px; display:none; } .FixedHeader{ margin-top: -200px; ; background-color:lightGray; display:block !important; z-index:999; } #CustomHeading>table{ border-collapse:separate !important; } #CustomHeading>table>tbody{ visibility:hidden; } #CustomHeading .ms-viewheadertr{ visibility:visible !important; } </style> <script type="text/javascript"> window.onload = function() { document.getElementById("s4-workspace").onscroll=function(){ ListScroll(); var cHead=document.getElementById("CustomHeading"); if(cHead!=null){ if(this.scrollTop > 200){ cHead.classList.add("FixedHeader"); }else{ cHead.classList.remove("FixedHeader"); } } } }; function ListScroll() { var myTable=document.getElementsByClassName("ms-listviewgrid")[0]; if(myTable!=null){ var insertDiv=document.getElementsByClassName("ms-csrlistview-controldiv")[0]; if(document.getElementById("CustomHeading")==null){ var customHeadingDiv = document.createElement('div'); customHeadingDiv.appendChild(myTable.cloneNode(true)); customHeadingDiv.id = "CustomHeading"; insertDiv.parentNode.insertBefore(customHeadingDiv,insertDiv.nextSibling); } } } </script>Best Regards,
Dennis
这篇关于请帮助加快SP列表冻结窗格的代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
