现在，我使用JS调用REST API并获得结果“WPTList”。我编写了一个CKEditor插件的硬编码版本，现在我想将下拉列表的填充设置为API返回结果“WPTList”的值。如何将它们组合在一起？
1，这是硬编码版本，效果很好。我想改变这些项目。
CKEDITOR.dialog.add( 'EPWebPart', function( editor ) {
return {
title: 'Find and Select WebPart',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
elements: [
{
type: 'select',
id: 'WebPartId',
label: 'WebPart Id',
//Now I hardcoded the items.
items: [ [ 'Account Home : WPT-10000655','WPT-10000655' ],
[ 'Account Summary : WPT-10000127','WPT-10000127' ],
[ 'Back Order Summary : WPT-10000609','WPT-10000609' ],
[ 'Bulk Order : WPT-10000708','WPT-10000708' ],
[ 'Check Price And Availability Single: WPT-10000401','WPT-10000401' ],
[ 'Check Price and Availability Multi: WPT-10000798','WPT-10000798' ],
[ 'Contact Form : WPT-10000688','WPT-10000688' ],
[ 'EASYCommerce Item Catalog : WPT-10000656','WPT-10000656' ],
[ 'Find And Track Orders : WPT-10000267','WPT-10000267' ]],
validate: CKEDITOR.dialog.validate.notEmpty( "WebPart Id field cannot be empty." )
}
]
},
{
id: 'tab-adv',
label: 'Advanced Settings',
elements: [
// UI elements of the second tab will be defined here.
]
}
],
onOk: function() {
var dialog = this;
var abbr = editor.document.createElement( 'krise:KView' );
abbr.setAttribute( 'runat', 'server');
abbr.setAttribute( 'ID', dialog.getValueOf( 'tab-basic', 'WebPartId' ).replace('-','') );
abbr.setAttribute( 'WebPartId', dialog.getValueOf( 'tab-basic', 'WebPartId' ) );
abbr.setText( dialog.getValueOf( 'tab-basic', 'WebPartId' ) );
editor.insertElement( abbr );
//editor.insertHtml( '<h2>This is a sample header</h2><p>This is a sample paragraph.</p>' );
}
};
});
2，这是我调用的API，结果是WPTList。
function generateList(target, responseData){
var obj = JSON.parse(responseData);
//WPTList is the result.
WPTList = obj.ListWPT.Output.List;
document.getElementById('show').value = WPTList;
}
function myFunction(){
var queryString = '';
var res = CallRestAPI(event, 'ListWPT', 'GET', 'JSON', queryString, generateList);
}
function getWindowURL(){
var path = window.location.pathname.split('/');
if (path[path.length-1].indexOf('.aspx')>-1) {
path.length = path.length - 1;
}
if (path[path.length-1].indexOf('.html')>-1) {
path.length = path.length - 1;
}
//var app = path[path.length-2]; // if you just want 'three'
var app = path.join('/'); // if you want the whole thing like '/one/two/three'
if (app != "") app = app + "/";
return window.location.protocol + "//" + window.location.host + "/" + app;
}
function setHttpRequest(){
try{
xmlHttp = new XMLHttpRequest();
}
catch(e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
alert("Your browser does not support AJAX!");
xmlHttp = null;
}
}
}
}
function CallRestAPI(event, APIName, Verb, XMLorJSON, inputData, callback){
var windowURL = getWindowURL();
var target;
if(event){
target = event.target?event.target:event.srcElement;
}
rendering = true;
setHttpRequest();
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if(callback){
callback(target, xmlHttp.responseText);
rendering = false;
}
}
}
var url;
if(Verb == "GET"){
url = windowURL + "REST/" + XMLorJSON + "/" + APIName + '?' + inputData;
xmlHttp.open("GET",url,true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlHttp.send();
}else if(Verb == "POST"){
var APIKey = getCookie('APIKey');
url = windowURL + "REST/" + XMLorJSON + "/" + APIName;
var postData = 'Input='+encodeURIComponent(inputData); //'Input=' + inputData;
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlHttp.setRequestHeader('Key', APIKey);
xmlHttp.send(postData);
}
return false;
}
3，我尝试以这种方式组合它们，但它不起作用，列表是空白的。
function generateList(target, responseData){
var obj = JSON.parse(responseData);
WPTList = obj.ListWPT.Output.List;
CKEDITOR.dialog.add( 'EPWebPart', function( editor ) {
return {
title: 'Find and Select WebPart',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
elements: [
{
type: 'select',
id: 'WebPartId',
label: 'WebPart Id',
items: [WPTList],
validate: CKEDITOR.dialog.validate.notEmpty( "WebPart Id field cannot be empty." )
}
]
},
{
id: 'tab-adv',
label: 'Advanced Settings',
elements: [
// UI elements of the second tab will be defined here.
]
}
],
onOk: function() {
var dialog = this;
var abbr = editor.document.createElement( 'krise:KView' );
abbr.setAttribute( 'runat', 'server');
abbr.setAttribute( 'ID', dialog.getValueOf( 'tab-basic', 'WebPartId' ).replace('-','') );
abbr.setAttribute( 'WebPartId', dialog.getValueOf( 'tab-basic', 'WebPartId' ) );
abbr.setText( dialog.getValueOf( 'tab-basic', 'WebPartId' ) );
editor.insertElement( abbr );
//editor.insertHtml( '<h2>This is a sample header</h2><p>This is a sample paragraph.</p>' );
}
};
});
}
function CallRestAPI(event, APIName, Verb, XMLorJSON, inputData, callback){
var windowURL = getWindowURL();
var target;
if(event){
target = event.target?event.target:event.srcElement;
}
rendering = true;
setHttpRequest();
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if(callback){
callback(target, xmlHttp.responseText);
rendering = false;
}
}
}
var url;
if(Verb == "GET"){
url = windowURL + "REST/" + XMLorJSON + "/" + APIName + '?' + inputData;
xmlHttp.open("GET",url,true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlHttp.send();
}else if(Verb == "POST"){
var APIKey = getCookie('APIKey');
url = windowURL + "REST/" + XMLorJSON + "/" + APIName;
var postData = 'Input='+encodeURIComponent(inputData); //'Input=' + inputData;
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlHttp.setRequestHeader('Key', APIKey);
xmlHttp.send(postData);
}
return false;
}
function myFunction(){
var queryString = '';
var res = CallRestAPI(event, 'ListWPT', 'GET', 'JSON', queryString, generateList);
}
myFunction();
所以我的问题是如何组合它们并让项目动态变化。
答案 0 :(得分：0)
现在，我找到了一种可以添加结果的方法。
1，更改项目并在加载时调用RESTAPI，也将项目作为参数传递。
items: [],
onLoad: function(element){
this.add('Please select a webpart', '');
myFunction(this);
}
2，编辑功能，添加新参数作为下拉列表。在生成列表功能中，浏览结果并添加结果。
function generateList(target, responseData, dropdownList){
var obj = JSON.parse(responseData);
var WPTList = obj.ListWPT.List;
for(var v in WPTList){
dropdownList.add(WPTList[v]['Description'], WPTList[v]['Value']);
}
}
function myFunction(dropdownList){
var queryString = '';
CallRestAPI(event, 'ListWPT', 'GET', 'JSON', queryString, generateList, dropdownList);
}