带有PDF预览的项目选择

Question

我需要用一个列表框(DropDown)创建一个页面，其中包含来自库的所有文件，然后是PDF预览。

我用HTML表单Web部件创建了一个页面。预览可以这样做：

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

现在，我如何提供一个清单框，其中包含库中的所有项，并将源从选定项更改为选定项？

Answer 1

好的我知道了..。

我用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>