月別: 2016年1月

SharePoint REST APIを使ったListデータの削除

Hawk104 コメントをする

REST APIを使ったリストからのデータの削除

function removeItem(id){
	$.support.cors = true;
  //サイトコレクションのURL
  spsite = "";
  
	var data = $.ajax({
		url: spsite + "_api/Web/Lists/GetByTitle('<listname>')/items(" + id + ")",
		type: "POST",
		headers: {
			"Content-Type" : "application/json;odata=verbose",
			"accept": "application/json;odata=verbose",
			"X-RequestDigest": $("#__REQUESTDIGEST").val(),
			"IF-MATCH": "*",
			"X-HTTP-Method":"DELETE"
		},
    success: function (data) {
            alert('Successfully removed');
        },
		error: function (xhr) { alert(xhr.status + ": " + xhr.statusText) }
	});
}
</listname>

Item Idをキーにして直接削除するのが一番簡単。ajaxのTypeがPOSTで、MethodがDeleteになる。
また、Item Idはリストデータの取得で取得できる。

SharePoint REST APIを使ったListデータの取得

Hawk104 コメントをする

REST APIを使ったリストからのデータ取得

<pre>function getItems() {
$.support.cors = true;
//サイトコレクションのURL
spsite = "";

var data = $.ajax({
  url: spsite + "_api/Web/Lists/GetByTitle('<listname>')/items?$select=Member/Name,Member/Title,Member/Id,Member/Department,Member/JobTitle,Title,Id&$expand=Member&$filter=title eq 'dammy'",
  type: "GET",
  headers: {
    "accept": "application/json;odata=verbose",
  },
  success: this.successGetItems,
  error: function (xhr) { alert(xhr.status + ": " + xhr.statusText) }
  });
}

function successGetItems(data) {
	for (i = 0; i < data.d.results.length ; i++) {
    //data.d.results[i].Member.Name
    //data.d.results[i].Title
	}
});
}
</listname></pre>

ポイントはPeople型の要素の扱いで、そのままだとユーザ名などが取得できず、$expand=Memberで展開して$select=にMember/Name（名前）やMember/Id（ID）などルックアップされた情報を明記しないと使いづらい。
filter=title eq ‘dammy’などでフィルターも可能。

取得したデータはsuccessGetItemsで、forとかで回して１つづつ処理する。

モーダルウィンドウのサンプル

Hawk104 コメントをする

初心者でも分かる！モーダルウィンドウの作り方を参考にモーダルを作ってみた。

コンテンツの流し込みはJqueryのhtmlで。

引用元:初心者でも分かる！モーダルウィンドウの作り方

HTML

<div id="modal-content">
<p><a id="modal-close" class="button-link"></a>close</p>
</div>

Javascript

$(this).blur() ;
if($("#modal-overlay")[0]) return false ;
$("body").append('
<div id="modal-overlay"></div>
');
$("#modal-overlay").fadeIn("slow");

centeringModalSyncer() ;

$( "#modal-content" ).fadeIn( "slow" ) ;

$( "#modal-overlay,#modal-close" ).unbind().click( function(){
  $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
    $('#modal-overlay').remove() ;
  } ) ;
} ) ;

// 他の領域かクローズでModalを消す
$( "#modal-overlay,#modal-close" ).unbind().click( function(){
  $("#modal-content,#modal-overlay").fadeOut("slow",function(){
    $("#modal-overlay").remove();
  });
});

// HTMLの流し込み
$("div#modal-content").html();

// 中心位置の調整
function centeringModalSyncer(){
 var w = $(window).width();
 var h = $(window).height();
 var cw = $("#modal-content").outerWidth({margin:true});
 var ch = $("#modal-content").outerHeight({margin:true});
 var pxleft = ((w - cw)/2);
 var pxtop = ((h - ch)/2);
 $("#modal-content").css({"left": pxleft + "px"});
 $("#modal-content").css({"top": pxtop + "px"});
}

CSS

<style type="text/css">
#modal-content {
	width: 50% ;
	height: 400px;
	margin: 0 ;
	padding: 10px 20px ;
	border: 2px solid #aaa ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 2 ;
}
  
#modal-overlay {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

.button-link {
	color: #00f ;
	text-decoration: underline ;
}
 
.button-link:hover {
	cursor: pointer ;
	color: #f00 ;
}
<style>