填写 jQuery UI 可通过 AJAX 调用选择

Question

我正在努力填充一个 jQuery 可选择的 AJAX 调用。我准备了服务器端API，已经过测试会return序列化jason对象。

我已经在客户端声明了可选

<ol id="selectable"></ol>

然后我有一个按钮会触发AJAX调用来获取数据。

$.ajax({
    url: '/api/XXX/XXX,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    //error: OnAjaxError,
    success: function (data) {

    }
});

button.onclick = function () {
    $("#selectable").selectable({
      //here to fill the selectable list
    });                
}

我通过 Google 进行了搜索，但我发现的大多数案例都是在客户端预定义的列表。

那我拿到数据后怎么渲染列表呢？

Answer 1

对从服务器返回的数据进行循环，将 li 标签动态构建到 ol 标签中，然后应用插件。

$.ajax({
    url: '/api/XXX/XXX,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    //error: OnAjaxError,
    success: function (data) {
       $.each(data,function(){
         $("#selectable").append('<li>'+this.Name+'</li>');
         //here I am using data.item change it to whatever your server is returning and what you have to show in the li tags
       });
       $("#selectable").selectable(); //apply the plugin
    }
});

填写 jQuery UI 可通过 AJAX 调用选择

Fill jQuery UI selectable by AJAX call

javascript

ajax

jquery

jquery-ui-selectable