LazyLoading.js无法用于检索SharePoint列表项 [英] LazyLoading.js not working for retrieving SharePoint list items

问题描述

亲爱的

我需要延迟加载才能进行检索 SharePoint列表项.

I required the lazy loading for retrieving SharePoint list items .

只是出于测试目的更改了列表名称和列名称，但是我发现运行它没有运气.

任何人都可以帮我下面的代码出什么问题吗?

Just has changed the list name and column names for test purpose, But I find no luck in running it.

Can any one please help me what's wrong in my below code 

 <script language="javascript" type="text/javascript" src="https://raw.githubusercontent.com/amolgithub111/amigo/master/LazyLoading.JS"></script>
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script>
	/*Start initialization on Ready() function */
	$(document).ready(function(){
		try{
			//Initialization
			LazyLoading.ListName = "Supersotres";
			LazyLoading.PageIndex = 1;
			LazyLoading.PageSize = 30;
			LazyLoading.ResultCounter = 0;
			LazyLoading.SiteUrl = _spPageContextInfo.siteAbsoluteUrl;
			LazyLoading.ViewPortHeight = $(window).height();

		    LazyLoading.Context = SP.ClientContext.get_current();
		    LazyLoading.Web = LazyLoading.Context.get_web();
		    LazyLoading.List = LazyLoading.Context.get_web().get_lists().getByTitle(LazyLoading.ListName);
		    LazyLoading.CamlQuery = new SP.CamlQuery();

		    LazyLoading.CamlQuery.set_viewXml("<View>"+
					                              "<ViewFields>" +
					                                     "<FieldRef Name='City'/>" +
					                                     "<FieldRef Name='Country'/>" +
					                              "</ViewFields>"+
					                              "<RowLimit>"+LazyLoading.PageSize+"</RowLimit>"+
				                                "</View>");
			//Loads Initial bunch of items with specified page size
			LazyLoading.Functions.loadItems();
		}
		catch(error)
		{
			console.log(error);
		}
	});
// This function returns list items w.r.t. specified page value
function onLazyLoadSuccess() {
	LazyLoading.ListEnumerator = LazyLoading.SpItems.getEnumerator();

    while(LazyLoading.ListEnumerator.moveNext()) {
		generateDynamicHTMLCode();
    }

	if( LazyLoading.ResultCounter < LazyLoading.PageSize)
	{
		$("#loadingImg").hide();
	}
    LazyLoading.Functions.managePagerControl();
}
//Error callback
function onLazyLoadFail(error) {
	console.log(error);
}
//Generates dynamic HTML for each List Item
function generateDynamicHTMLCode()
{
		var htmlCode = "";
        LazyLoading.Item = LazyLoading.ListEnumerator.get_current();
		LazyLoading.ResultCounter++;
		//ID
		var itemId = LazyLoading.Item.get_item('ID');
		//Title
		var titleValue = LazyLoading.Item.get_item('City');
		//Details
		var detailsValue = LazyLoading.Item.get_item('Country');

		//Generate HTML
		htmlCode = htmlCode + "<div>";
		htmlCode = htmlCode +"<p>"+titleValue+"</p>";
		htmlCode = htmlCode +"<p>"+detailsValue+"</p>";
		htmlCode = htmlCode + "</div>";
	    $('#ItemsGrid').append(htmlCode);
}
// Call this function on scroll event of specific HTML element. It can be any html element having Scrollbar
$("#s4-workspace").scroll(function() {
	getNextPage();
});
//Gets
function getNextPage()
{
	if($("#loadingImg").offset().top < LazyLoading.ViewPortHeight)
	{
        LazyLoading.PageIndex = LazyLoading.PageIndex + 1;
        if (LazyLoading.NextPagingInfo) {
            LazyLoading.Position = new SP.ListItemCollectionPosition();
            LazyLoading.Position.set_pagingInfo(LazyLoading.NextPagingInfo);
        }
        else {
            LazyLoading.Position = null;
        }
        if(LazyLoading.Position != null)
        {
	        LazyLoading.Functions.loadItems();
	    }
	    else
	    {
	    	$("#loadingImg").hide();
	    }
	}
}
</script>

<div>
<h2>Lazy Loading - SharePoint 2013</h2>
<hr>
</div>
<div id="ItemsGrid">
        <div id='loadingImg'>
			<div style="text-align: center;">
				<div class="media-body">

				</div>
	        	<h4>Loading...</h4>
	        </div>
		</div>
 </div>

推荐答案

您好，

尝试将库定义复制到脚本中，然后工作正常.

这是我的测试结果.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
        var LazyLoading = LazyLoading || {};

        (function (LazyLoading) {

            LazyLoading.ViewPortHeight = LazyLoading.ViewPortHeight || {};
            LazyLoading.Context = LazyLoading.Context || {};
            LazyLoading.Web = LazyLoading.Web || {};
            LazyLoading.List = LazyLoading.List || {};
            LazyLoading.CamlQuery = LazyLoading.CamlQuery || {};
            LazyLoading.SpItems = LazyLoading.SpItems || {};
            LazyLoading.Position;
            LazyLoading.NextPagingInfo = LazyLoading.NextPagingInfo || {};
            LazyLoading.PreviousPagingInfo = LazyLoading.PreviousPagingInfo || {};
            LazyLoading.ListName = LazyLoading.ListName || {};
            LazyLoading.PageIndex = LazyLoading.PageIndex || {};
            LazyLoading.PageSize = LazyLoading.PageSize || {};
            LazyLoading.SiteUrl = LazyLoading.SiteUrl || {};
            LazyLoading.ListEnumerator = LazyLoading.ListEnumerator || {};
            LazyLoading.Items = LazyLoading.Items || [];
            LazyLoading.Item = LazyLoading.Item || {};
            LazyLoading.ResultCounter = LazyLoading.ResultCounter || {};
            LazyLoading.Functions = LazyLoading.Functions || {};

            //Functions
            //#1- Retrieves list items for current page.
            LazyLoading.Functions.loadItems = function () {
                //Set the next list items collection position - First time the position will be null
                LazyLoading.CamlQuery.set_listItemCollectionPosition(LazyLoading.Position);
                LazyLoading.SpItems = LazyLoading.List.getItems(LazyLoading.CamlQuery);
                LazyLoading.Context.load(LazyLoading.SpItems);
                LazyLoading.Context.executeQueryAsync(onLazyLoadSuccess, onLazyLoadFail);
            }

            //#2- Manage Page Control - pagination
            LazyLoading.Functions.managePagerControl = function () {
                if (LazyLoading.SpItems.get_listItemCollectionPosition()) {
                    LazyLoading.NextPagingInfo = LazyLoading.SpItems.get_listItemCollectionPosition().get_pagingInfo();
                } else {
                    LazyLoading.NextPagingInfo = null;
                }
            }

        })(LazyLoading);

        /*Start initialization on Ready() function */

(document).ready(function(){ 尝试 { //初始化 LazyLoading.ListName ="Supersotres"; LazyLoading.PageIndex = 1; LazyLoading.PageSize = 30; LazyLoading.ResultCounter = 0; LazyLoading.SiteUrl = _spPageContextInfo.siteAbsoluteUrl; LazyLoading.ViewPortHeight =

(document).ready(function () { try { //Initialization LazyLoading.ListName = "Supersotres"; LazyLoading.PageIndex = 1; LazyLoading.PageSize = 30; LazyLoading.ResultCounter = 0; LazyLoading.SiteUrl = _spPageContextInfo.siteAbsoluteUrl; LazyLoading.ViewPortHeight =

(window).height(); LazyLoading.Context = SP.ClientContext.get_current(); LazyLoading.Web = LazyLoading.Context.get_web(); LazyLoading.List = LazyLoading.Context.get_web().get_lists().getByTitle(LazyLoading.ListName); LazyLoading.CamlQuery =新的SP.CamlQuery(); LazyLoading.CamlQuery.set_viewXml(< View>" + << ViewFields>" + << FieldRef Name ='城市'/>" + << FieldRef Name ='Country'/>" + </ViewFields> + < RowLimit>" + LazyLoading.PageSize +</RowLimit>" + (</View>)；)； //加载具有指定页面大小的初始项目 LazyLoading.Functions.loadItems(); } 抓住(错误){ console.log(错误); } }); //此函数返回带有w.r.t.的列表项指定页面值 函数onLazyLoadSuccess(){ LazyLoading.ListEnumerator = LazyLoading.SpItems.getEnumerator(); 而(LazyLoading.ListEnumerator.moveNext()){ generateDynamicHTMLCode(); } 如果(LazyLoading.ResultCounter&LazyLoading.PageSize){

(window).height(); LazyLoading.Context = SP.ClientContext.get_current(); LazyLoading.Web = LazyLoading.Context.get_web(); LazyLoading.List = LazyLoading.Context.get_web().get_lists().getByTitle(LazyLoading.ListName); LazyLoading.CamlQuery = new SP.CamlQuery(); LazyLoading.CamlQuery.set_viewXml("<View>" + "<ViewFields>" + "<FieldRef Name='City'/>" + "<FieldRef Name='Country'/>" + "</ViewFields>" + "<RowLimit>" + LazyLoading.PageSize + "</RowLimit>" + "</View>"); //Loads Initial bunch of items with specified page size LazyLoading.Functions.loadItems(); } catch (error) { console.log(error); } }); // This function returns list items w.r.t. specified page value function onLazyLoadSuccess() { LazyLoading.ListEnumerator = LazyLoading.SpItems.getEnumerator(); while (LazyLoading.ListEnumerator.moveNext()) { generateDynamicHTMLCode(); } if (LazyLoading.ResultCounter < LazyLoading.PageSize) {

这篇关于LazyLoading.js无法用于检索SharePoint列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！