【发布时间】：2021-04-22 03:39:07
【问题描述】：
我一直在尝试在 Blockly 工作区中创建一个自定义块，该块根据对同一块中先前下拉字段的选择来更改下拉字段中的选项。 关于区块：-
- 共有三个下拉字段
- 所有内容均使用 Blockly.Extensions 动态填充
- 所有代码都在下面
我已经为块初始化实现了一个“onchange”函数，该函数通过“event”变量获取更改数据并做出相应的响应。我在尝试更新不断变化的下拉字段时遇到问题。请帮忙。
代码
// the block JSON declaration variable
var updateTableData = {
"type": "al_update_table_data",
"message0": "Update in table %1 where column %2 is %3 set value for column %4 to %5",
"args0": [
{
"type": "input_dummy",
"name": "table_input",
},
{
"type": "input_dummy",
"name": "column_input",
},
{
"type": "input_value",
"name": "get_value"
},
{
"type": "input_dummy",
"name": "column_input1",
},
{
"type": "input_value",
"name": "set_value"
}
],
"inputsInline": false,
"previousStatement": null,
"nextStatement": null,
"fieldRow": false,
"colour": 90,
"tooltip": "Update value in a table",
"helpUrl": "",
"extensions": ["get_tables", "get_column", "get_column1"],
}
// the blockly extensions
// get list of tables and populate the 'table_input' drop-down field
Blockly.Extensions.register('get_tables', function () {
this.getInput("table_input")
.appendField(new Blockly.FieldDropdown(
function () {
let options = []
let tables = JSON.parse(localStorage.getItem('applab_myTables'))
tables.map(t => options.push([t.name, t.id]))
return options
}
), "table_input")
})
// get list of columns from the first table and populate the 'column_input' drop-down field
Blockly.Extensions.register('get_column', function () {
this.getInput('column_input')
.appendField(new Blockly.FieldDropdown(
function () {
let options = []
let table = JSON.parse(localStorage.getItem('applab_myTables'))[0]
Object.keys(table['columnData']).filter(cId => table['columnOrder'].includes(cId)).map(cId => options.push([table['columnData'][cId]['name'], cId]))
return options
}
), 'column_input')
})
// get list of columns from the first table, remove the column value already selected in 'column_input' and populate the 'column_input1' drop-down field
Blockly.Extensions.register('get_column1', function () {
var selectedColumn = this.getFieldValue('column_input')
this.getInput('column_input1')
.appendField(new Blockly.FieldDropdown(
function () {
let options = []
let table = JSON.parse(localStorage.getItem('applab_myTables'))[0]
Object.keys(table['columnData']).filter(cId => table['columnOrder'].includes(cId)).filter(cId => cId !== selectedColumn).map(cId => options.push([table['columnData'][cId]['name'], cId]))
return options
}
), 'column_input1')
})
// Comments with 7 slashes (///////) are my commentary on the issues, errors and outputs that I get
// blockly block initialization
Blockly.Blocks['al_update_table_data'] = {
init: function () {
this.jsonInit(updateTableData)
},
onchange: function (event) {
// console.log(event.type)
var table_id = this.getFieldValue('table_input')
var selectedcolumn = this.getFieldValue('column_input')
var otherColumn = this.getFieldValue('column_input1')
if (event.blockId === this.id) {
if (event.type === Blockly.Events.BLOCK_CHANGE) {
// console.log('name of changed field', event.name)
// console.log('old value', event.oldValue)
// console.log('new value', event.newValue)
if (event.name === 'table_input') {
// change in selected table, update column_input and column_input1
} else if (event.name === 'column_input') {
// change in selected column, update column_input1
/////// I tried to removeField which did remove the field, but also the label on the same field row. But when I tried to getInput, I get the error: 'column_input1' input doesn't exist
// this.removeField('column_input1', true)
/////// I tried to removeInput as well, which too removed the field, but also the label on the same field row. And when I tried to getInput, I again get the error: 'column_input1' input doesn't exist
// this.removeInput('column_input1')
/////// This functions runs fine when I don't remove any input or field. But it keeps adding new drop-downs next to existing ones with new options
this.getInput('column_input1')
/////// I tried this to use removeField after getInput as well. But it shows the error: this.getInput().removeField() is not a function
// .removeField('column_input1')
.appendField(new Blockly.FieldDropdown(
function () {
let options = []
let table = JSON.parse(localStorage.getItem('applab_myTables')).find(table => table.id === table_id)
Object.keys(table['columnData']).filter(cId => table['columnOrder'].includes(cId)).filter(cId => cId !== event.newValue).map(cId => options.push([table['columnData'][cId]['name'], cId]))
return options
}
), 'column_input1')
}
}
}
if (event.type === Blockly.Events.FINISHED_LOADING) {
// workspace finished loading, update column_input and column_input1 based on selected table
}
}
}
tldr; 当另一个下拉列表的选定选项更改时，更新块中下拉字段的选项。
谢谢， 乌特卡什
【问题讨论】：
标签： javascript web blockly