在SharePoint Framework中使用JQuery,调用SharePoint Rest API批量添加,更新item。这里使用Rest API中的Batch命令。
1, 创建项目
请参考这个微软官方文档创建SPFx项目: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part
2, 修改UI,添加按钮和按钮事件。
public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.demoCi }">
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">
<span class="${ styles.title }">Welcome to SharePoint!</span>
<p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
<p class="${ styles.description }">${escape(this.properties.description)}</p>
<div class="${ styles.row }">
<span class="${styles.title}">Create items</span>
<button class="${styles.button}" id="createButton"><span>Create</span></button>
</div>
<div class="${ styles.row }">
<span class="${styles.title}">Update items</span>
<button class="${styles.button}" id="updateButton"><span>Update</span></button>
</div>
</div>
</div>
</div>
</div>`;
this.bindButtonEvent();
}
private bindButtonEvent() {
const webpart:DemoCiWebPart = this;
this.domElement.querySelector("#createButton").addEventListener('click', ()=> {webpart.createNewItem();});
this.domElement.querySelector("#updateButton").addEventListener('click', ()=> {webpart.updateItem();});
}
3, 解决403 digist令牌问题
首先添加一个方法,做一个简单的JQuery调用Rest API的测试:
jQuery.ajax({
url: this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('MyTestList')",
method: "POST",
headers