在 SharePoint 中使用 jqGrid 实现
4.88/5 (5投票s)
大家好：
本文介绍如何使用 SpServices(演示)(CodePlex) 实现 jqGrid。
SpServices 是一个 jQuery 库，它抽象了 SharePoint 的 Web 服务，使其更易于使用。它还包含使用各种 Web 服务操作来提供更有用（和很酷）功能的功能。它完全在客户端运行，无需服务器安装。
SpServices 和 jQuery 的使用在 Marc 的博客中得到了最好的解释。
使用 SpServices 实现 JqGrid 需要以下 Js 文件：
- jquery.js
- jquery-ui-1.8.1.custom.min.js
- grid.locale-en.js
- jquery.jqGrid.min.js
- json2-min.js // 将数据解析为 json 格式
- jquery.SPServices-0.6.2.js // 用于获取列表项
所需的 Css 文件：
ui.jqgrid.css // 网格样式表
jqGrid 的 HTML 控件如下所示：
<div id='tblMain' style="float:left"> <table id="list" ></table> <div id="pager" style="text-align:center;"></div> </div>
在页面加载时加载 JqGrid：
jQuery("#list").jqGrid({
datatype: GetMyData,
colNames:["Project ID","Project Name","Delivery Manager","ApprovalStatus"],
colModel:[{name:'ProjectId',index:'ProjectId',align:'left',sortable: true},
{name:'ProjectName',index:'ProjectName',align:'left',sortable: true },
{name:'DeliveryManager',index:'DeliveryManager',align:'left',sortable:true},
{name:'ApprovalStatus',index:'ApprovalStatus',align: 'left',sortable: true }
],
pager: true,
pager: '#pager',
pageinput: true,
rowNum: 5,
rowList: [5, 10, 20, 50, 100],
sortname: 'ApprovalStatus',
sortorder: "asc",
viewrecords: true,
autowidth: true,
emptyrecords: "No records to view",
loadtext: "Loading..."
});
在上面的 jqGrid 加载函数中，我将网格的数据类型指定为 GetMyData()，这是一个首先被触发的函数。
GetMyData 方法包含一个 GetDataOnLoad 函数，该函数使用 SpServices，它具有获取列表项的基本操作，即 GetListItems，需要可选的 CAML 查询属性，该属性将从列表中使用一些 WHERE 子句获取数据。
在代码中，我有一个名为 ProjectDetailsList 的列表，其中包含一些项目详细信息，这些信息由项目经理或交付经理插入。因此，需求是当用户登录到系统时，我应该获取当前登录用户名，并将相同的用户名传递到查询的“where”子句中，以便网格包含分配给当前登录用户作为 PM 或 DM 的项目数据。
为了获取当前登录用户，我正在使用 SpServices 操作 SpGetCurrentUser。
GetTheOrderByType 方法将为 SpServices 创建查询部分。
函数的代码如下：
function ForGettingUserName() {
var userName = $().SPServices.SPGetCurrentUser({
fieldName: "Title",
debug: false
});
return userName;
}
function GetMyData() {
sortIdexName = jQuery("#list").getGridParam("sortname"); //Maintaining Consitant SortName after the Sortcol event
sortOrderName = jQuery("#list").getGridParam("sortorder"); //Maintaining Consistant Sort Order
Query = GetTheOrderByType(sortIdexName, sortOrderName);
var CAMLViewFields = "<ViewFields>" +
+"<FieldRef Name='projectName' /><FieldRef Name='projectID' />"
+ "<FieldRef Name='Title' /><FieldRef Name='deliveryManager' />"
+ "<FieldRef Name='projectSQA' /><FieldRef Name='approvalStatus' />"
+ "<FieldRef Name='projectStartDate' /><FieldRef Name='projectEndDate' />"
+ "<FieldRef Name='sqasiteurl' /><FieldRef Name='ID' />"
+ "</ViewFields>";
GetDataOnLoad(Query, CAMLViewFields);
} //Function for Getting the Query Type and the particular WHERE CLAUSE TO send the Query to GetListItem function.
function GetTheOrderByType(index, sortOrder, userName) {
var OrderByType;
if (index == "ProjectName") {
if (sortOrder == "desc") {
OrderByType = "<Query>"+
+"<Where><Or>"+"<Eq>"+"<FieldRef Name='deliveryManager'/><Value Type='Text'>"
+ userName +"</Value>"+"</Eq>"
+"<Eq><FieldRef Name='projectManager'/><Value Type='Text'>"
+ userName + "</Value></Eq>"+"</Or></Where>"+
+"<OrderBy><FieldRef Name='projectName' Ascending='FALSE' /></OrderBy>"+
+"</Query>";
}
else {
OrderByType = "<Query>"+
+"<Where><Or>"+"<Eq>"+"<FieldRef Name='deliveryManager'/><Value Type='Text'>"
+ userName +"</Value>"+"</Eq>"
+"<Eq><FieldRef Name='projectManager'/><Value Type='Text'>"
+ userName + "</Value></Eq>"+"</Or></Where>"+
+"<OrderBy><FieldRef Name='projectName' Ascending='FALSE' /></OrderBy>"+
+"</Query>";
}
}
else if (index == "ApprovalStatus") {
if (sortOrder == "desc") {
OrderByType = "<Query>"+
+"<Where><Or>"+"<Eq>"+"<FieldRef Name='deliveryManager'/><Value Type='Text'>"
+ userName +"</Value>"+"</Eq>"
+"<Eq><FieldRef Name='projectManager'/><Value Type='Text'>"
+ userName + "</Value></Eq>"+"</Or></Where>"+
+"<OrderBy><FieldRef Name='approvalStatus' Ascending='FALSE' /></OrderBy>"+
+"</Query>";
}
else {
OrderByType = "<Query>"+
+"<Where><Or>"+"<Eq>"+"<FieldRef Name='deliveryManager'/><Value Type='Text'>"
+ userName +"</Value>"+"</Eq>"
+"<Eq><FieldRef Name='projectManager'/><Value Type='Text'>"
+ userName + "</Value></Eq>"+"</Or></Where>"+
+"<OrderBy><FieldRef Name='approvalStatus' Ascending='FALSE' /></OrderBy>"+
+"</Query>";
}
return OrderByType;
} //This function gets the data from List using SpServices
Function GetDataOnLoad (Query,CAMLViewFields) {
$().SPServices({
operation: "GetListItems",
async: false,
listName: "ProjectDetailsList",
CAMLQuery: Query,
CAMLViewFields: CAMLViewFields,
completefunc: processResult
});
} processResult 函数格式化数据，可以将其转换为 Json 并添加到 JqGrid 中。
之所以以这种特定的格式格式化数据，是为了使其可被 json2.js 文件中的 Json 解析器读取。我已经在 asp.net 应用程序中使用 AJAX 调用实现了相同的 JqGrid，它以这种格式返回数据，其他一些博主也在 MVC 或 asp.net 应用程序中使用相同的格式，借助 JsonHelper 类，该类主要格式化从 DB 返回的数据。
//Processing the XML result to formatted Json so that We can bind data to grid in Json format function processResult(xData, status) { var counter = 0; // Gets the total number of records retrieved from the list (We can also use xData.ItemCount method for counting the number of rows in the data ) var newJqData = ""; $(xData.responseXML).find("[nodeName='z:row']").each(function () { var JqData; if (counter == 0) { JqData = "{id:'" + $(this).attr("ows_projectID") + "'," + "cell:[" + "'" + $(this).attr("ows_projectID") + "','" + $(this).attr("ows_projectName") + "','" + $(this).attr("ows_deliveryManager") + "','," + "]}"; newJqData = newJqData + JqData; counter = counter + 1; } else { var JqData = "{id:'" + $(this).attr("ows_projectID") + "'," + "cell:[" + "'" + $(this).attr("ows_projectID") + "','" + $(this).attr("ows_projectName") + "','" + $(this).attr("ows_deliveryManager") + "','," + "]}"; newJqData = newJqData + JqData; counter = counter + 1; } }); FinalDataForGrid(newJqData, counter); }That’s it. Add the data to the grid with the div control and the other page number calculation is for showing the pager.function FinalDataForGrid(jqData, resultCount) { dataFromList = jqData.substring(0, jqData.length - 1); var currentValue = jQuery("#list").getGridParam('rowNum'); var totalPages = Math.ceil(resultCount / currentValue); var PageNumber = jQuery("#list").getGridParam("page"); // Current page number selected in the selection box of the JqGrid //formatting rows newStr = "{total:" + '"' + totalPages + '"' + "," + "page:" + '"' + PageNumber + '"' + "," + "records:" + '"' + resultCount + '"' + "," + "rows:" + "[" + dataFromList + "]}"; var thegrid = jQuery("#list")[0]; thegrid.addJSONData(JSON.parse(newStr)); //Binding data to the grid which is of JSON Format }And the grid works fine and fast on paging, sorting and also even search, we can make the particular column as hyperlink which I will blog in the next part. Sample grid is as follows and this grid has some extra columns then the mentioned in above codeThanks to Nagaraj My TL and Kamal Sir for the support... Enjoy SharePoint!!!!!!!! Check out my blog