表单中的 w2ui 远程源枚举字段

Question

我有一个链接到远程源的枚举字段，当您在该字段中键入时，远程源提供匹配项，就像您期望的那样弹出。它很好用。但我需要那个字段在一个表格中。问题是当它处于形式时它不再起作用。我剥离了代码并将其列在下面。希望下面的代码足够了，但您可以单击提供的链接来尝试它并在接下来的几周左右查看源代码。

谁能解释一下如何让它在表格中发挥作用？

此代码有效（try it here）：

<html>
<head>
    <title>Remote Source Enum</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div class="w2ui-field"><label>Name Picker:</label><div> <input id="tcidPicker"></div></div>
<script>
$('#tcidPicker').w2field('enum', {
    url: '/v1/transactantstd/ISO',
    renderItem: function (item) {return item.FirstName + ' ' + item.LastName; },
    renderDrop: function (item) {return item.FirstName + ' ' + item.LastName; },
    compare: function (item, search) {
        // ... lines removed for brevity ...
    }
});
</script>
</body>
</html>

此代码无效（try it here）：

<html>
<head>
    <title>Remote Source Enum in a Form</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="form">
    <div class="w2ui-field">
    <label>Name Picker:</label><input id="tcidPicker" name="tcidPicker">
    </div>
</div>
<script type="text/javascript">
$(function () {
    $('#form').w2form({ 
        name  : 'form',
        fields: [
            { field: 'tcidPicker', 
                type: 'enum', 
                url: '/v1/transactantstd/ISO',
                renderItem: function (item) {return item.FirstName + ' ' + item.LastName; },
                renderDrop: function (item) {return item.FirstName + ' ' + item.LastName; },
                compare: function (item, search) {
                    // ... lines removed for brevity
                },
            },
        ],
    });
});
</script>
</body>
</html>

Answer 1

您需要将选项包装在 options 属性.

中

参见：http://w2ui.com/web/docs/1.5/w2form.fields

你的情况：

    fields: [
        { field: 'tcidPicker', 
            type: 'enum', 
            options: {
                url: '/v1/transactantstd/ISO',
                renderItem: function (item) {return item.FirstName + ' ' + item.LastName; },
                renderDrop: function (item) {return item.FirstName + ' ' + item.LastName; },
                compare: function (item, search) {
                    // ... lines removed for brevity
                },
            },
        },
    ],

表单中的 w2ui 远程源枚举字段

w2ui remote source enum field in a Form

w2ui