代码之家 › 专栏 › 技术社区 › TangoAlee levi

xeditable&select2下拉列表,带有ajax源,提交后显示为空

x-editable jquery-select2 javascript

2

TangoAlee levi · 技术社区 · 7 年前

我得到了 xeditable select2 使用 api 调用作为源,除以下内容外,一切都很好。

提交select2下拉列表后,表格的值显示为 EMPTY 并且需要刷新页面才能更新到正确的值。

有人知道如何将值更新为选定的值吗 选择2 下拉值?

我的html:

<td class="eo_role"><a href="#" data-pk={{r.pk}} data-type="select2" data-url="/api/entry/{{r.pk}}/"
data-name="eo_role" data-title="Enter EO_role">{{r.eo_role}}</a></td>

$('#example .eo_role a').editable( {
    params: function(params) {  //params already contain `name`, `value` and `pk`
      var data = {};
      data[params.name] = params.value;
      return data;
    },
    source: 'http://localhost:8000/api/eo_role/select_two_data/',
    tpl: '<select></select>',
    ajaxOptions: {
        type: 'put'
        },
    select2: {
        cacheDatasource:true,
        width: '150px',
        id: function(pk) {
            return pk.id;
        },
        ajax: {
            url: 'http://localhost:8000/api/eo_role/select_two_data/',
            dataType: "json",
            type: 'GET',
            processResults: function(item) {return item;}    
        }
    },
    formatSelection: function (item) {
        return item.text;
    },
    formatResult: function (item) {
        return item.text;
    },
    templateResult: function (item) {
        return item.text;
    },
    templateSelection : function (item) {
        return item.text;
    }, 
});

同样-一切正常(数据库更新、dropdownlist填充等),但是 <td> "EMPTY" 提交下拉列表后-需要刷新页面以显示正确的值。

2 回复 | 直到 7 年前

1

2

TangoAlee levi 7 年前

我想出了一个解决办法。我超级兴奋。

//outside of everything, EVERYTHING
//test object is a global holding object that is used to hold the selection dropdown lists
//in order to return the correct text.
var test = {};

$('#example .eo_role a').editable( {
    params: function(params) {  //params already contain `name`, `value` and `pk`
      var data = {};
      data[params.name] = params.value;
      return data;
    },

    //MUST be there - it won't work otherwise.
    tpl: '<select></select>',
    ajaxOptions: {
        type: 'put'
        },
    select2: {

        width: '150px',
        //tricking the code to think its in tags mode (it isn't)
        tags:true,
        //this is the actual function that triggers to send back the correct text.
        formatSelection: function (item) {
            //test is a global holding variable set during the ajax call of my results json.
            //the item passed here is the ID of selected item. However you have to minus one due zero index array.
            return test.results[parseInt(item)-1].text;
        },
        ajax: {
            url: 'http://localhost:8000/api/eo_role/select_two_data/',
            dataType: "json",
            type: 'GET',
            processResults: function(item) {
            //Test is a global holding variable for reference later when formatting the selection.
            //it gets modified everytime the dropdown is modified. aka super convenient.
            test = item;
            return item;}    
        }
    },  
});

2

JÄdrzej Skrzypczak 7 年前

我也面临同样的问题。我是这样处理的:

在x-editable源代码中查找:

   value2html: function(value, element) {
     var text = '', data,
     that = this;
     if(this.options.select2.tags) { //in tags mode just assign value
       data = value;
       //data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc);
       } else if(this.sourceData) {
          data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
       } else {
          //can not get list of possible values
          //(e.g. autotext for select2 with ajax source)
       }

如您所见,还有一个语句,没有任何代码(只有2条注释),这就是我们遇到问题的情况。我的解决方案是添加缺失的代码:

(...) else {
      //can not get list of possible values
      //(e.g. autotext for select2 with ajax source)
      data = value;
}

这就解决了不启用标记模式的问题。到目前为止,我没有发现任何不想要的行为。

jQuery('[data-edit-client]').editable({
    type: 'select2',
    mode: 'inline',
    showbuttons: false,
    tpl: '<select></select>',
    ajaxOptions: {
        type: 'POST'
    },
    select2: {
        width: 200,
        multiple: false,
        placeholder: 'Wybierz klienta',
        allowClear: false,
        formatSelection: function (item) {
            //test is a global holding variable set during the ajax call of my results json.
            //the item passed here is the ID of selected item. However you have to minus one due zero index array.
            return window.cacheData[parseInt(item)].text;
        },
        ajax: {
            url: system.url + 'ajax/getProjectInfo/',
            dataType: 'json',
            delay: 250,
            cache: false,
            type: 'POST',
            data: {
                projectID: system.project_id,
                action: 'getProjectClients',
                customer: parseInt(jQuery("[data-edit-client]").attr("data-selected-company-id"))
            },
            processResults: function (response) {
                window.cacheData = response.data.clients;
                return {
                    results: response.data.clients
                };
            }
        }
    }
});