listview webpart高亮列表项

Question

我需要帮助才能开始。 我的Wiki页面上有一个listview webpart。我想强调listview的行，其中修改日期是=＆gt; 90天。

有人可以指点我的教程或其他东西让我开始吗？

Answer 1

使用SharePoint Designer进行条件格式化

您正在寻找的行为类型称为条件格式。通常，您可以通过使用SharePoint Designer编辑其所在的页面，将条件格式添加到列表视图Web部件;条件格式是在SharePoint Designer中单击列表视图Web部件时将显示在功能区菜单中的选项之一。

但是，您可能无法使用SharePoint Designer编辑Wiki页面。

基于JavaScript的替代

在您的情况下，您可能最好使用JavaScript来查找每行的修改字段，将其值与今天的日期进行比较，并根据需要应用突出显示。

您可以做的一件事是获取以下代码，将其复制到文本文件中，然后将该文本文件保存到SharePoint网站的库中。然后将内容编辑器Web部件添加到您的Wiki页面，编辑其属性，并将Web部件的“内容链接”属性设置为指向文本文件的URL。保存页面并退出编辑模式，您将看到一个链接，通过浏览器添加条件格式规则。这要求您有权访问站点上的创建列表和列表项。

<div id="_conditional_formatting_link" style="display:none; ">
	<div unselectable="on"  style="display:inline-block; user-select:none; cursor:pointer; padding: 3px; background-color:#9b9b9b; color:white; border:1px solid #888;" onclick="javascript:var rules = document.getElementById('_conditional_formatting'); if(rules.style.display == 'none'){rules.style.display = 'inline-block'}else{rules.style.display = 'none'}">
		Conditional Formatting
	</div>
</div>
<div id="_conditional_formatting" style="display:none;background-color:#dfdfdf; border: 1px solid black; width:95%; max-width:1100px;">
	<a style="border:0px;padding:5px;float:right;" title="Reapply Formatting" href="javascript:getConditions(false);">
		<img style="border:0px;" src="/_layouts/images/staticrefresh.gif"/>
	</a>
<ol id="_conditional_formatting_rules">
</ol>
<div style="text-align:right; ">
	<div id="_add_conditional_formatting_rule" unselectable="on" onclick="javascript: Add_Conditional_Formatting();" style="user-select:none; cursor:pointer; padding: 3px; margin: 3px; display:inline-block; background-color:#9b9b9b; border:1px solid #888; color:white;">Add Rule</div>
</div>
</div>
<script>
	function target() { var column; var comparison; var value; var style; var scope; var type; var id; var offset; } /* structure for storing formatting rules */
	var conditionalFormattingList = "Conditional Formatting";
	function getConditions(reloadRules) {
		/* if reloadRules, query the conditions list and get all the rules. Otherwise just reapply the ones in memory to the current document. */
		if (typeof (reloadRules) == "undefined") { reloadRules = true; }
		if (reloadRules) {
			while (document.getElementById("_conditional_formatting_rules").children.length > 0) { /* Clear out the currently displayed list of rules. */
				document.getElementById("_conditional_formatting_rules").removeChild(document.getElementById("_conditional_formatting_rules").children[0]);
			}
			this.clientContext = new SP.ClientContext();
			var list = clientContext.get_web().get_lists().getByTitle(conditionalFormattingList);
			var camlQuery = new SP.CamlQuery();
			var folder = list.get_rootFolder();
			camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'URL\' /><Value Type=\'Text\'>' + document.location.pathname + '</Value></Eq></Where><OrderBy><FieldRef Name=\'Priority\' /><FieldRef Name=\'Name\' /></OrderBy></Query></View>');
			this.items = list.getItems(camlQuery);
			clientContext.load(list, 'EffectiveBasePermissions');
			clientContext.load(items);
			clientContext.load(folder);
		}
		this.clientContext.executeQueryAsync(
			Function.createDelegate(this,
				function () {
					/*Get the current user name from the drop-down box*/
					var Me = document.querySelector("#RibbonContainer-TabRowRight span[title='Open Menu'] [accesskey='W'] span").innerHTML;
					if (reloadRules) {
						var baseFormUrl = folder.get_serverRelativeUrl() + "/EditForm.aspx?ID=";
						/* Figure out if the current user has access to create or edit items on the Conditional Formatting list */
						var perms = list.get_effectiveBasePermissions();
						this.hasEdit = perms.has(SP.PermissionKind.editListItems);
						this.hasCreate = perms.has(SP.PermissionKind.addListItems);
						/* Fill an array with our formatting rules */
						this.targets = [];
						var itemEnumerator = this.items.getEnumerator();
						while (itemEnumerator.moveNext()) {
							var item = itemEnumerator.get_current();
							var targ = new target();
							targ.column = item.get_item("Column");
							targ.comparison = item.get_item("Comparison");
							targ.style = item.get_item("Style");
							targ.scope = item.get_item("Scope");
							targ.type = item.get_item("Type");
							targ.value = item.get_item("Value"); if (targ.value == null) { targ.value = ""; }
							targ.id = item.get_item("ID");
							targ.offset = item.get_item("Offset");
							targets.push(targ);
						}
					}
					if (!this.hasCreate) { document.getElementById("_add_conditional_formatting_rule").style.display = "none"; }
					for (var targetIterator = 0; targetIterator < targets.length; targetIterator++) {
						if (reloadRules) {
							var rulelist = document.getElementById("_conditional_formatting_rules");
							var ruletoadd = document.createElement("li");
							var comparisondisplay = targets[targetIterator].type.indexOf("Field") != -1 ? "value of the <b>" + targets[targetIterator].value + "</b> column" : "<b>'" + targets[targetIterator].value + "'</b>";
							if (targets[targetIterator].type == "Special" || targets[targetIterator].type == "Number") {
								if (targets[targetIterator].value.toString().toLowerCase() == "[me]") { comparisondisplay = "<b>[Me](" + Me + ")</b>"; }
								else { comparisondisplay = "<b>" + targets[targetIterator].value + "</b>"; }
							}
							if (targets[targetIterator].value == "") { comparisondisplay = "<b>(blank)</b>"; }
							if (targets[targetIterator].offset != null) {
								comparisondisplay += "<b>" + (targets[targetIterator].offset < 0 ? " " : " +") + targets[targetIterator].offset + "</b>"
							}
							var editLink = this.hasEdit ? "<div style='display:inline-block;cursor:pointer;' onclick='SP.UI.ModalDialog.commonModalDialogOpen(" + '"' + baseFormUrl + targets[targetIterator].id + '&Source=' + document.location.pathname + '"' + ",{},refreshPageConditions); '>" + "<img src='/_layouts/images/EDITITEM.GIF' style='vertical-align:middle;' title='Customize' alt='Customize'/>" + "&nbsp;</div>" : "";
							ruletoadd.innerHTML = editLink + "When <b>" + targets[targetIterator].column + "</b> "
								+ targets[targetIterator].comparison + " " + comparisondisplay
								+ ", apply {" + (targets[targetIterator].style == null ? "remove all formatting" : "<span style='" + targets[targetIterator].style + "'>" + targets[targetIterator].style + "</span>") + "} to the <b>" + targets[targetIterator].scope + "</b>" + ((targets[targetIterator].scope != "Cell" && targets[targetIterator].scope != "Row") ? " column" : "");
							rulelist.appendChild(ruletoadd);
						}
						var tables = document.querySelectorAll("table.ms-listviewtable"); /* Should get all the list view web parts on the page. */
						var t_i = 0;
						while (t_i < tables.length) {
							var columnIndex = null; /* Index of the column to compare against */
							var valueIndex = null; /* Index of a second column from which to pull the value to compare */
							var styleTargetIndex = null; /* Index of a column to apply formatting to */
							var thisTable = tables[t_i];
							var headings = thisTable.rows[0].cells;
							var h_i = 0;
							while (h_i < headings.length) { /* Check all the column headings... */
								var thisHeading = headings[h_i].querySelector("div:first-child");
								if (thisHeading != null) {
									/* In Internet Explorer, the headings have a DisplayName attribute you can grab. If that's not there, just grab the innerText or textContent */
									var dispname = thisHeading.DisplayName ? thisHeading.DisplayName : (thisHeading.innerText ? thisHeading.innerText : thisHeading.textContent);
									dispname = dispname.replace(/^\s+|\s+$/g, '');/* removes leading and trailing whitespace */
									if (targets[targetIterator].scope != "Cell" && targets[targetIterator].scope != "Row") {
										/*If the scope isn't Cell or Row, see if this is the cell to which the formatting should applied */
										if (dispname == targets[targetIterator].scope) { styleTargetIndex = h_i; }
									}
									if (targets[targetIterator].type.indexOf("Field") != -1) {
										/*If the value type is a Field, check to see if this is the field whose value we care about */
										if (dispname == targets[targetIterator].value.toString()) { valueIndex = h_i; }
									}
									if (dispname == targets[targetIterator].column) { columnIndex = h_i; }
								}
								h_i += 1;
							}
							if (columnIndex != null) { /* If we found a matching heading, let's try to apply the rules... */
								var rows = thisTable.rows;
								for (var i = (rows.length > 0 ? 1 : 0) ; i < rows.length; i++) {
									var cells = rows[i].children;
									if (cells.length <= columnIndex) { continue }
									var innerLink = cells[columnIndex].querySelector("a"); /* I want to specifically target links so that we can change their text color if necessary */
									/* Populate valueToEval with the text value of the current cell, or its inner link if it has one */
									var valueToEval = cells[columnIndex].innerText ? (innerLink != null ? innerLink.innerText : cells[columnIndex].innerText) : (innerLink != null ? innerLink.textContent : cells[columnIndex].textContent);
									if (typeof (valueToEval) == "undefined") { valueToEval = "" } /* Treat empties as blanks */
									var listValueToCompareAgainst = null;
									if (valueIndex != null) { /* valueIndex only has a value if we need to grab the comparison value from another column on the list */
										valueLink = cells[valueIndex].querySelector("a");
										listValueToCompareAgainst = cells[valueIndex].innerText ? (valueLink != null ? valueLink.innerText : cells[valueIndex].innerText) : (valueLink != null ? valueLink.textContent : cells[valueIndex].textContent);
									}
									var needsStyling = false;
									switch (targets[targetIterator].type) {
										case "Number":
											if (!isNaN(Number(valueToEval))) {
												valueToEval = Number(valueToEval);
											}
											if (!isNaN(Number(targets[targetIterator].value))) {
												targets[targetIterator].value = Number(targets[targetIterator].value);
											}
											break;
										case "Date":
											valueToEval = new Date(valueToEval);
											targets[targetIterator].value = new Date(targets[targetIterator].value);
											if (targets[targetIterator].offset != null) {
												targets[targetIterator].value.setDate(targets[targetIterator].value.getDate() + Number(targets[targetIterator].offset));
											}
											break;
										case "Text": /* Already covered, bro */ break;
										case "Date Field":
											valueToEval = new Date(valueToEval);
											targets[targetIterator].value = new Date(listValueToCompareAgainst);
											if (targets[targetIterator].offset != null) {
												targets[targetIterator].value.setDate(targets[targetIterator].value.getDate() + Number(targets[targetIterator].offset));
											}
											break;
										case "Text Field": targets[targetIterator].value = listValueToCompareAgainst; break;
										case "Number Field":
											if (!isNaN(Number(listValueToCompareAgainst))) {
												targets[targetIterator].value = listValueToCompareAgainst;
												if (targets[targetIterator].offset != null) {
													targets[targetIterator].value += Number(targets[targetIterator].offset);
												}
											}
											if (!isNaN(Number(valueToEval))) {
												valueToEval = Number(valueToEval);
											}
											break;
										case "Special":
											if (targets[targetIterator].value.toLowerCase) {
												if (targets[targetIterator].value.toLowerCase() == "[me]") { targets[targetIterator].value = Me }
												else if (targets[targetIterator].value.toLowerCase().indexOf("[today]") != -1) {
													var dateDifference = Number(targets[targetIterator].value.toLowerCase().replace("[today]", "").replace(" ", "").replace("+", ""));
													targets[targetIterator].value = new Date();
													if (!isNaN(dateDifference)) { targets[targetIterator].value.setDate(targets[targetIterator].value.getDate() + dateDifference); }
													if (targets[targetIterator].offset != null) {
														targets[targetIterator].value.setDate(targets[targetIterator].value.getDate() + Number(targets[targetIterator].offset));
													}
													valueToEval = new Date(valueToEval);
												}
											} else { valueToEval = new Date(valueToEval); }
											break;
									}
									switch (targets[targetIterator].comparison) {
										case "Greater Than or Equal To": needsStyling = (valueToEval >= targets[targetIterator].value); break;
										case "Greater Than": needsStyling = (valueToEval > targets[targetIterator].value); break;
										case "Less Than or Equal To": needsStyling = (valueToEval <= targets[targetIterator].value); break;
										case "Less Than": needsStyling = (valueToEval < targets[targetIterator].value); break;
										case "Equal To": needsStyling = (valueToEval == targets[targetIterator].value); break;
										case "Not Equal To": needsStyling = (valueToEval != targets[targetIterator].value); break;
										case "Contains": needsStyling = (valueToEval.indexOf(targets[targetIterator].value) != -1); break;
										case "Does Not Contain": needsStyling = (valueToEval.indexOf(targets[targetIterator].value) == -1); break;
									}
									if (needsStyling) {
										var links;
										if (targets[targetIterator].scope != "Row") {
											var targetIndex = (styleTargetIndex != null) ? styleTargetIndex : columnIndex;
											cells[targetIndex].setAttribute("style", targets[targetIterator].style);
											links = cells[targetIndex].querySelectorAll("a");

										} else {
											rows[i].setAttribute("style", targets[targetIterator].style);
											for (var j = 0; j < cells.length; j++) {
												cells[j].setAttribute("style", targets[targetIterator].style);
											}
											links = rows[i].querySelectorAll("a");
										}
										for (var j = 0; j < links.length; j++) {
											if (links[j].title != "Open Menu") {
												links[j].setAttribute("style", targets[targetIterator].style);
												links[j].style.backgroundColor = "";
											}
											links[j].style.border = "0px";
										}
									}
								}
							}
							t_i += 1;
						}
					}
					document.getElementById("_conditional_formatting_link").style.display = "inline-block";
				}
			),
			Function.createDelegate(this,
				function (sender, args) { /* There was an error accessing the list. Time to create it! */
					var lci = new SP.ListCreationInformation();
					lci.set_title(conditionalFormattingList);
					lci.set_templateType(SP.ListTemplateType.genericList);
					var condition_list = clientContext.get_web().get_lists().add(lci);
					clientContext.load(condition_list);
					/* Drop the Title field */
					var colTitle = condition_list.get_fields().getByTitle("Title");
					colTitle.set_required(false);
					colTitle.set_hidden(true);
					colTitle.update();
					condition_list.update();
					/* Add New Fields */
					var colColumn = condition_list.get_fields().addFieldAsXml('<Field Description=\'The column to compare (must be visible on the page)\' DisplayName=\'Column\' Type=\'Text\'/>', true, SP.AddFieldOptions.defaultValue);
					var colComparison = condition_list.get_fields().addFieldAsXml('<Field Description=\'\' Type=\'Choice\' DisplayName=\'Comparison\' Format=\'Dropdown\' FillInChoice=\'FALSE\'><Default>Equal To</Default><CHOICES><CHOICE>Greater Than</CHOICE><CHOICE>Greater Than or Equal To</CHOICE><CHOICE>Equal To</CHOICE><CHOICE>Less Than or Equal To</CHOICE><CHOICE>Less Than</CHOICE><CHOICE>Not Equal To</CHOICE><CHOICE>Contains</CHOICE><CHOICE>Does Not Contain</CHOICE></CHOICES></Field>', true, SP.AddFieldOptions.defaultValue);
					var colValue = condition_list.get_fields().addFieldAsXml('<Field Description=\'The value or the name of a column to compare against\' DisplayName=\'Value\' Type=\'Text\'/>', true, SP.AddFieldOptions.defaultValue);
					var colType = condition_list.get_fields().addFieldAsXml('<Field Description=\'Indicate the type of value you are comparing against. Choose Special if using the [Me] or [Today] placeholders.\' Type=\'Choice\' DisplayName=\'Type\' Format=\'Dropdown\' FillInChoice=\'FALSE\'><Default>Text</Default><CHOICES><CHOICE>Date</CHOICE><CHOICE>Number</CHOICE><CHOICE>Text</CHOICE><CHOICE>Date Field</CHOICE><CHOICE>Number Field</CHOICE><CHOICE>Text Field</CHOICE><CHOICE>Special</CHOICE></CHOICES></Field>');
					var colOffset = condition_list.get_fields().addFieldAsXml('<Field Description=\'Optionally specify a number to offset the value by when comparing against a number or date.\' DisplayName=\'Offset\' Type=\'Number\' />', true, SP.AddFieldOptions.defaultValue);
					var colStyle = condition_list.get_fields().addFieldAsXml('<Field NumLines=\'4\' Description=\'The CSS to apply to when the condition is met. Leave blank to remove formatting. Example syntax: background-color:darkred; color:white; font-weight:bold;\' DisplayName=\'Style\' Type=\'Note\' />', true, SP.AddFieldOptions.defaultValue);
					var colScope = condition_list.get_fields().addFieldAsXml('<Field Description=\'The scope to which the style should be applied. Choose Row, Cell, or specify a column name.\' Type=\'Choice\' DisplayName=\'Scope\' Format=\'Dropdown\' FillInChoice=\'TRUE\'><Default>Cell</Default><CHOICES><CHOICE>Cell</CHOICE><CHOICE>Row</CHOICE></CHOICES></Field>', true, SP.AddFieldOptions.defaultValue);
					var colPriority = condition_list.get_fields().addFieldAsXml('<Field Description=\'Priority determines which styles are applied in case of overlapping conditions. Higher numbers are applied later.\' DisplayName=\'Priority\' Type=\'Number\' />', true, SP.AddFieldOptions.defaultValue);
					var colUrl = condition_list.get_fields().addFieldAsXml('<Field Description=\'Page where this rule should be applied\' DisplayName=\'URL\' Type=\'Text\'/>', true, SP.AddFieldOptions.defaultValue);
					clientContext.executeQueryAsync(
						Function.createDelegate(this, function () { getConditions(); }),
						Function.createDelegate(this, function (sender, args) { document.getElementById("_conditional_formatting").innerHTML = ("An error occcurred while trying to apply conditional formatting to the list for you. Error details: " + args.get_message() + " " + args.get_stackTrace()); document.getElementById("_conditional_formatting_link").style.display = "inline-block"; }));
				}
			));
	}
	/* This method is called when the Add Rule button is clicked. */
	function Add_Conditional_Formatting() {
		/* Create a new item with only the URL and Priority fields filled out */
		var currUrl = document.location.pathname;
		var clientContext = new SP.ClientContext();
		var itemCreateInfo = new SP.ListItemCreationInformation();
		var newItem = clientContext.get_web().get_lists().getByTitle(conditionalFormattingList).addItem(itemCreateInfo);
		newItem.set_item('URL', currUrl);
		/* Give the new item a priority that will put it at the end of the list. This is kind of a hack since the highest priority is not necessarily the rulecount. */
		newItem.set_item('Priority', document.getElementById("_conditional_formatting_rules").children.length + 1);
		newItem.update();
		clientContext.load(newItem);
		clientContext.executeQueryAsync(Function.createDelegate(this, function () {
			getConditions(); /* Reload to refresh the rules list after adding the item */
		}), Function.createDelegate(this, function (sender, args) { alert(args.get_message()); }));
	}

	/* This method is called when the Edit Item dialog box is closed. It refreshes the page it the item was saved. */
	function refreshPageConditions(result) { if (result != SP.UI.DialogResult.cancel) { window.location.replace(document.location.href) } }

	ExecuteOrDelayUntilScriptLoaded(function () {
		getConditions();
		/* If there are any collapsible sections on the page, keep checking to see whether formatting needs to be reapplied */
		this.TableRowCount = 0;

		if (document.querySelector("img[alt='expand']") != null) {
			setInterval(function () {
				var tempTableRowCount = document.querySelectorAll("tr").length;
				if (tempTableRowCount != this.TableRowCount) {
					/* Only reapply formatting if the count of table rows is different than it was previously */
					this.TableRowCount = tempTableRowCount;
					getConditions(false) /* Passing false reapplies loaded rules without re-querying the SharePoint list */
				}
			}, 1000)
		}
	}, "SP.JS");
</script>

然后，您需要添加如下所示的规则：

该脚本处理创建条件格式规则列表，根据页面上的列表视图Web部件检查这些规则以及在页面加载时应用它们的细节任务。所以你需要做的就是添加规则！