使用 w2ui 网格，如何使选择/下拉列表类型具有不同的项

Question

如何使下拉列表项目更改取决于记录？

例如

some_items变量下拉选项是"A"，"B"，"C">

new_items1变量下拉选项是"D"，"E"，"F">

new_items2变量下拉选项是"G"，"H"，"I">

$('#grid').w2grid({
    name: 'grid',
    show: {
        toolbar: true,
    },
    columns: [
        { field: "recid", caption: "ID", size: "170px", sortable: true, resizeable: true },
        { field: "some_text", caption: "Some Text", size: "170px", sortable: true, resizeable: true },
        { field: "some_dropdown", caption: "Some Dropdown", size: "75px", sortable: true, resizeable: true,
            editable: { type: 'select', items: some_items },
            render: function (record, index, col_index) {
                var html = '';
                for (var s in some_items) {
                    if (some_items[s].id == this.getCellValue(index, col_index)) html = some_items[s].text;
                }
                return html;
            }
        }
    ],
    records: [
        {"recid": 1, "some_text": "Text1", "some_dropdown": new_items1},
        {"recid": 1, "some_text": "Text1", "some_dropdown": new_items2}
    ],
    onChange: function(event){
        console.log(event)
    }
});

是否可以更改每条记录的下拉列表？

Answer 1

是的，可以在工具栏内创建一个下拉元素，然后选择列绑定/加载服务器端数据到下拉列表。

编辑：1-在工具栏内添加下拉元素

toolbar: {
        items: [
                { type: 'html', html: '<select id="getDropdownData" "></select>' }
               ]
}

2-当一列选择绑定/加载相关数据到下拉列表时

     onSelect: function (event) {
          $("#getDropdownData").select2({ width: "160px" });
         var selectedColumnId = w2ui["grid"].get(event["columnId"]);
        $.ajax({
                type: "POST",
                url: //your url to return column related-data,
                data: {
                    Id: selectedColumnId 
                },
                success: function (data) {
                        for (i = 0; i < data.result.length; i++) {
                            $(getDropdownData).append($('<option></option>')
                                .attr({ value: data.result[i][0] })
                                .html(data.result[i][1]));
                        }//for                    
                },
               error: function (request, status, error) {
                       alert(request.responseText);
              }
      });
}

3-当列取消选择清除下拉列表数据时

onUnselect: function (event) {
    $('#getDropdownData').children().remove().end().append('<option selected value="select one column"></option>');
}

4-当电网荷载设置宽度为下拉列表时

onLoad: function (event) {
     $("#getDropdownData").select2({ width: "160px" });
}