Javascript 使用SharePoint多列表进行淘汰
嗨，我是一个新的击倒，现在我正试图把它包括在SharePoint中。 在SharePoint中，我没有任何数据库，这就是我使用列表的原因。 我有很多清单。一个是默认值，其中包含其他名称。 例如：品牌、01车、03车和04车。在品牌我有两栏-“标题”和“汽车名称”-与汽车名单的名称。在车里我有很多栏目，比如“名称”、“型号”、“产品年份”等等。 我想用Knockout来显示每件东西，每个都有两个foreach。第一个将显示品牌列表的标题，另一个将显示与汽车列表名称相关的所有内容。 结果将是： 品牌名称-汽车01Javascript 使用SharePoint多列表进行淘汰,javascript,sharepoint,knockout.js,sharepoint-2010,Javascript,Sharepoint,Knockout.js,Sharepoint 2010,嗨，我是一个新的击倒，现在我正试图把它包括在SharePoint中。 在SharePoint中，我没有任何数据库，这就是我使用列表的原因。 我有很多清单。一个是默认值，其中包含其他名称。 例如：品牌、01车、03车和04车。在品牌我有两栏-“标题”和“汽车名称”-与汽车名单的名称。在车里我有很多栏目，比如“名称”、“型号”、“产品年份”等等。 我想用Knockout来显示每件东西，每个都有两个foreach。第一个将显示品牌列表的标题，另一个将显示与汽车列表名称相关的所有内容。 结果将是： 品牌
car 01 name , car 01 model
car 02 name , car 02 model
car 03 name , car 03 model
car 01 name , car 01 model
car 02 name , car 02 model
car 03 name , car 03 model
car 01 name , car 01 model
car 02 name , car 02 model
car 03 name , car 03 model
<!doctype html>
<html >
<head>
<script src="/SiteAssets/js/jquery-1.10.2.js"></script>
<script src="/SiteAssets/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/SiteAssets/js/jquery-ui-timepicker-addon.js"></script>
<script src="/SiteAssets/js/knockout-3.0.0.js"></script>
<link rel="stylesheet" type="text/css" href="/SiteAssets/css/ui-lightness/jquery-ui-1.10.4.custom.css"/>
</head>
<body>
<div id="taskContainer">
<h3>CARS</h3>
<div id="errorBox" data-bind="text: errorMessage, visible: errorMessage"></div>
<div id="saveBox" data-bind="text: saveMessage, visible: saveMessage"></div>
<div data-bind="foreach: listOfBrands">
<div>Brand: <span data-bind="text: BrandName"></span></div>
<table>
<thead>
<tr>
<th>Car name</th>
<th>Model</th>
</tr>
</thead>
<tbody id="myTaskBox" data-bind="foreach: carItems, visible: carItems().length > 0">
You have <b data-bind="text: carItems.length"> </b> incomplete task(s)
<tr>
<td data-bind="text: nameOfCar" ></td>
<td data-bind="text: Model" ></td>
</tr>
</tbody >
</table>
</div>
</div>
<script src="/SiteAssets/js/knockout-extension.js"></script>
</body>
</html>
汽车
品牌：
车名
模型
您有未完成的任务
功能任务（数据）{
this.nameOfCar=ko.可观察（data.Title）；
this.Model=ko.observable（data.Model）；
//存储SharePoint列表项id的附加引用。
this.Id=ko.observable（data.Id）；
}
品牌功能列表（数据）{
this.BrandName=ko.observable（data.BrandName）；
this.carName=ko.observable（data.carName）；
//存储SharePoint列表项id的附加引用。
this.Id=ko.observable（data.Id）；
this.calendarItems=ko.observableArray（）；}
函数carViewModel（）{
//起始数据
var self=这个；
//起始列表
self.listOfBrands=ko.observearray（[]）；
self.carName=ko.observable（）；
self.BrandName=ko.observable（）；
//结束列表
//起始项
self.cars=ko.observearray（[]）；
self.Name=ko.observable（）；
self.Model=ko.observable（）；
//结束项目
//结束数据
//用于错误和已保存消息的其他绑定。
self.saveMessage=ko.可观察（false）；
self.errorMessage=ko.可观察（假）；
self.incompletecars=ko.computed（函数（）{
return ko.utils.arrayFilter（self.cars（），函数（task）{return！task.\u destroy}）；
});
//操作
self.addTask=函数（）{
self.cars.push（新任务（{Title:this.Name（），Model:this.Model（），Id:“new”}））；
姓名（“”）；
};
self.removeTask=函数（任务）{
自我。汽车。摧毁（任务）
};
self.save=函数（）{
for（self.cars（）中的var任务）{
var createdcars=[]；
//构建一个请求，以便与CSOM一起发送。
if（self.cars（）[task]。\u销毁）{
//处理删除的对象
//标记为“新建”的已删除项目从未保存到SharePoint中，
if（self.cars（）[task].Id（）！=“新建”）{
var listItem=taskList.getItemById（self.cars（）[task].Id（））；
listItem.deleteObject（）；
}
}else if（self.cars（）[task].Id（）=“新建”）{
//处理要创建的新对象。
var createInfo=new SP.ListItemCreationInformation（）；
var listItem=taskList.addItem（createInfo）；
listItem.set_项（“Title”，self.cars（）[task].Title（））；
listItem.set_项（“Model”，self.cars（）[task].Model（））；
update（）；
//保存对SP.ListItem对象和KO对象的引用，以便更新
//创建对象后，后者将使用前者的ID。
createdcars.push({
spItem:listItem，
koItem:self.cars（）[任务]
});
ctx.load（列表项）；
}否则{
//项目既不是新的也不是已删除的，请将其作为更新处理。
var listItem=taskList.getItemById（self.cars（）[task].Id（））；
listItem.set_项（“Title”，self.cars（）[task].Title（））；
listItem.set_项（“Model”，self.cars（）[task].Model（））；
update（）；
}
}
//现在我们已经构建了请求，将其发送到服务器进行处理。
executeQueryAsync（函数（）{
//我们的拯救是成功的。现在我们需要通过我们新的
//创建项目并确保Knockout知道ID已更改。
for（createdcars中的变量项）{
createdcars[item].koItem.Id（createdcars[item].spItem.get_Id（））；
}
//设置我们保存的消息。
self.saveMessage（“保存成功”）；
}，函数（发送方，参数）{
//保存失败，请将错误消息设置为显示，然后记录实际错误
//到JavaScript控制台（如果存在）。
self.errorMessage（“错误更新列表项”）；
if（控制台类型！=“未定义”）{
console.log（args.get_message（））；
}
});
};
///从SharePoint加载数据
//获取当前站点的上下文。
var ctx=new SP.ClientContext（_spPageContextInfo.webServerRelativeUrl）；
var web=ctx.get_web（）；
var taskList=web.get_lists（）.getByTitle（“name of list！！！”）；
//把我们的任务清单限制在50辆车以内。
var query=new SP.CamlQuery（）；
set_viewXml（“在
function Task(data) {
this.nameOfCar = ko.observable(data.Title);
this.Model = ko.observable(data.Model);
// An additional reference to store the SharePoint list item id.
this.Id = ko.observable(data.Id);
}
function listOfBrandss(data) {
this.BrandName = ko.observable(data.BrandName);
this.carName = ko.observable(data.carName);
// An additional reference to store the SharePoint list item id.
this.Id = ko.observable(data.Id);
this.calendarItems = ko.observableArray(); }
function carViewModel() {
//START Data
var self = this;
//START List
self.listOfBrands = ko.observableArray([]);
self.carName = ko.observable();
self.BrandName = ko.observable();
//END List
//START item
self.cars = ko.observableArray([]);
self.Name = ko.observable();
self.Model = ko.observable();
//END item
//END Data
// Additional bindings to use for error and saved messages.
self.saveMessage = ko.observable(false);
self.errorMessage = ko.observable(false);
self.incompletecars = ko.computed(function() {
return ko.utils.arrayFilter(self.cars(), function(task) { return !task._destroy});
});
// Operations
self.addTask = function() {
self.cars.push(new Task({ Title: this.Name(), Model: this.Model(), Id: "New" }));
self.Name("");
};
self.removeTask = function(task) {
self.cars.destroy(task)
};
self.save = function() {
for (var task in self.cars()) {
var createdcars = [];
// Build a request up to send with the CSOM.
if (self.cars()[task]._destroy) {
// Handle deleted objects
// Deleted items that are marked "new" have never been saved to SharePoint to start with,
if (self.cars()[task].Id() != "New") {
var listItem = taskList.getItemById(self.cars()[task].Id());
listItem.deleteObject();
}
} else if (self.cars()[task].Id() == "New") {
// Handle new objects to be created.
var createInfo = new SP.ListItemCreationInformation();
var listItem = taskList.addItem(createInfo);
listItem.set_item("Title", self.cars()[task].Title());
listItem.set_item("Model", self.cars()[task].Model());
listItem.update();
// Save a reference to both the SP.ListItem object and the KO Object so we can update
// the latter with the former's ID once the object has been created.
createdcars.push({
spItem: listItem,
koItem: self.cars()[task]
});
ctx.load(listItem);
} else {
// The item is neither new nor deleted, handle it as an update.
var listItem = taskList.getItemById(self.cars()[task].Id());
listItem.set_item("Title", self.cars()[task].Title());
listItem.set_item("Model", self.cars()[task].Model());
listItem.update();
}
}
// Nowe we have built our request, send it to the server for processing.
ctx.executeQueryAsync(function() {
// Our save was successful. Now we need to itterate through our newly
// created items and ensure that Knockout knows that the ID has changed.
for(var item in createdcars) {
createdcars[item].koItem.Id(createdcars[item].spItem.get_id());
}
// Set our saved message.
self.saveMessage("Saved successfully");
}, function(sender, args) {
// Our save failed, set the error message to show then log the actual error
// to the JavaScript console if it exists.
self.errorMessage("Error updating list items");
if (typeof console != "undefined") {
console.log(args.get_message());
}
});
};
/// Load the data from SharePoint
// Get a context to the current site.
var ctx = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);
var web = ctx.get_web();
var taskList = web.get_lists().getByTitle("NameOFLIST!!!");
// Limit our task list to 50 cars.
var query = new SP.CamlQuery();
query.set_viewXml("<View><</View> ");
var taskItems = taskList.getItems(query);
// Ensure the fields we want to retrieve are returned
ctx.load(taskItems, "Include(ID,Title,Model)");
// Send our query to the server for processing.
ctx.executeQueryAsync(function() {
var cars = [];
var taskItemEnumerator = taskItems.getEnumerator();
// Iterate through our retrieved data set and build an array of JSON objects containing
// the relevent properties.
while (taskItemEnumerator.moveNext()) {
cars.push(
new Task({
Title: taskItemEnumerator.get_current().get_item("Title"),
Model: taskItemEnumerator.get_current().get_item("Model"),
Id: taskItemEnumerator.get_current().get_item("ID")
})
);
}
// Update the Knockout cars array with our data from the server.
self.cars(cars);
});
//START Get all
var loc = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);
var web = loc.get_web();
var locList = web.get_lists().getByTitle("Brand");
// Limit our task list to 50 cars.
var query = new SP.CamlQuery();
query.set_viewXml("<View><RowLimit>50</RowLimit></View> ");
var locItems = locList.getItems(query);
// Ensure the fields we want to retrieve are returned
loc.load(locItems , "Include(ID,Title,Car name)");
// Send our query to the server for processing.
loc.executeQueryAsync(function() {
var locA = [];
var locItemEnumerator = locItems.getEnumerator();
// Iterate through our retrieved data set and build an array of JSON objects containing
// the relevent properties.
while (locItemEnumerator.moveNext()) {
//locA.push(
var cos = new listOfBrandss({
BrandName: locItemEnumerator.get_current().get_item("Title"),
carName: locItemEnumerator.get_current().get_item("Car_x0020_name"),
Id: locItemEnumerator.get_current().get_item("ID")
});
//);
/*HERE IS PLACE FOR CODE*/
locA.push(cos);
}
// Update the Knockout cars array with our data from the server.
self.listOfBrands(locA);
}); //END Get all Calendar from "List of Calendars"
}
$(document).ready(function() { // I use jQuery for this, but you could add an event listener to the document object instead.
EnsureScriptFunc("sp.js", "SP.ClientContext", function() {
ko.applyBindings(new carViewModel());
});
}); })();