2012-08-27 68 views
0

項目選擇我需要從一個然後PDF預覽做出了列表框(下拉)頁面所有文件。與PDF預覽

我用HTML Form Web Part做了一個頁面。該預覽可製成這樣的:

<embed height="800" width="1200" src="..." type="application/pdf"> 

我如何可以提供現在一個列表框從庫中的所有項目和改變從該所選擇的項目?

回答

0

好吧我知道了..

我做了一個新的頁面與HTML表單Web部分,並得到這個用javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<script type="text/javascript"> 
var siteUrl = '/XX'; 
var listName = 'YY'; 
var listItems; 
function retrieveAllListProperties() { 
    var clientContext = new SP.ClientContext(siteUrl); 
    var oList = clientContext.get_web().get_lists().getByTitle(listName); 

    var query = new SP.CamlQuery(); 
    query.set_viewXml("<View Scope='RecursiveAll'><Query><OrderBy><FieldRef Name='FileLeafRef' Ascending='True' /></OrderBy></Query></View>"); 
    listItems = oList.getItems(query); 
    clientContext.load(listItems); 
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); 
} 

function onQuerySucceeded() { 
    var listEnumerator = listItems.getEnumerator(); 
    $('#select').find('option').remove().end().append('<option value="">Please select</option>'); 
    while (listEnumerator.moveNext()) { 
     var listItem = listEnumerator.get_current(); 
     $('#select').append('<option value="http://host' + listItem.get_item('FileRef') + '">' + listItem.get_item('FileLeafRef') + '</option>'); 
    } 
} 

function onQueryFailed(sender, args) { 
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); 
} 

$(this).ready(function() { 
    ExecuteOrDelayUntilScriptLoaded(retrieveAllListProperties, "sp.js"); 

    $('#etiketten').change(function() { 
     $('#pdf').remove(); 
     if($('#select').val() != '') { 
      $('#container').append('<embed name="pdf" id="pdf" height="768" width="1024" src="' + $('#select').val() + '" type="application/pdf">'); 
     } 
    }); 
}); 
</script> 

<div id="container" name="container"> 
<select name="select" id="select"> 
<option value="">Please select</option> 
</select> 
<br/> 
</div>