Question

好吧，所以我有一个网格，其中有两个字段，我想从两个下拉列表中添加选定的值，但是我无法让两个字段都添加到相同的值上，或者我只能得到一个值，或者它会添加一行但没有显示值

这是使用一个属性时代码的外观

<div id="gameSelectionForm">
<div class="col-sm-12 no-pad-sides">
    <div class="col-sm-12">
        <label>@Resources.GetString("common.games"):</label>
    </div>
    <div class="row no-pad-sides">
        <div class="col-sm-4">
            <select id="games" data-role="dropdownlist" data-bind="source: allGames, value: selectedGame"
                    data-text-field="Name" data-value-field="GameId" data-option-label="Select Games"></select>
        </div>
        <div class="col-sm-3">
            <select id="rtp" data-role="dropdownlist" data-bind="source: allRtpLevels, value: selectedRtpLevel"
                    data-text-field="Level" data-value-field="RtpLevelId" data-option-label="Select RTP Level"></select>
        </div>
        <div class="col-sm-2 no-pad-left">
            <button type="button" id="AddGameBtn" data-bind="click: addGame" class="blue-button k-primary k-button button-level-height max-width">
                <span class="fa fa-plus-circle"></span>&nbsp;@Resources.GetString("common.add")
            </button>
        </div>
    </div>
    <div class="col-sm-12">
        <div id="gamesGrid" data-role="grid"
             data-sortable="true"
             data-editable="{update: false, destroy: true, confirmation: false}"
             data-columns='[{"field": "Name", "title": "@Resources.GetString("common.name")"},{"field": "Level", "title": "@Resources.GetString("common.rtplevel")"},
                            {"command": "destroy", width: 150}] '
             data-bind="source: selectedGames"
             data-scrollable="true">
        </div>
    </div>
</div>

和逻辑

var gameSelectionViewModel = kendo.observable({
        allGames: new kendo.data.DataSource({
            data: @Html.Raw(JsonConvert.SerializeObject(Model.GamesList)),
            schema: {
                model: {
                    id: "GameId",
                    fields: {
                        GameId: { type: "number" },
                        Name: { type: "string" }
                    }
                }
            }
        }),
        selectedRtpLevel: "",
        selectedGame: "",
        selectedGames: '@(Model.SelectedGames != null)' === 'True' ? @Html.Raw(JsonConvert.SerializeObject(Model.SelectedGames)) : new kendo.data.DataSource(),
        selectedRtpLevels: '@(Model.SelectedRtpLevel != null)' === 'True' ? @Html.Raw(JsonConvert.SerializeObject(Model.SelectedRtpLevel)) : new kendo.data.DataSource(),
        addGame: function () {
            if (gameSelectionViewModel.selectedGame === '' || gameSelectionViewModel.selectedRtpLevel === '')
                return;

            var selectedRtpLevel = gameSelectionViewModel.allRtpLevels.get(gameSelectionViewModel.selectedRtpLevel);
            var selectedRtpLevels = gameSelectionViewModel.selectedRtpLevels.data();
            var selectedGames = gameSelectionViewModel.selectedGames.data();
            var selectedGame = gameSelectionViewModel.allGames.get(gameSelectionViewModel.selectedGame);

            if (selectedGame && selectedGames.indexOf(selectedGame) < 0) {
                selectedGames.push(selectedGame)
            } else {
                warnBox('Game already exists!');
            }
        },
        allRtpLevels: new kendo.data.DataSource({
            data: @Html.Raw(JsonConvert.SerializeObject(Model.RtpConfigurations)),
            schema: {
                model: {
                    id: "RtpLevelId",
                    fields: {
                        RtpLevelId: { type: "number" },
                        Level: { type: "string" }
                    }
                }
            }
        })
    });

    // Attach view model to html
    kendo.bind($("#gameSelectionForm"), gameSelectionViewModel);

添加的行是

if (selectedGame && selectedGames.indexOf(selectedGame) < 0) {
            selectedGames.push(selectedGame)

我一直在尝试两次按入各种解决方案，但这在不同的行上给出了值。我是使用剑道的新手，还没有完全了解如何使用剑道。当我调用addGame函数时，如何使selectedRtpLevel和selectedGame都出现在网格中？

Answer 1

这是我准备的道场。

http://dojo.telerik.com/oJofAgoD

这里的主要要点是您试图比较游戏并将其添加到数据源的方式。

通过将您的addGame函数替换为以下代码，我在某种程度上简化了该过程：

if (gameSelectionViewModel.selectedGame === '' || gameSelectionViewModel.selectedRtpLevel === '')
                return;


          var newgame = {Name:gameSelectionViewModel.get("selectedGame"), Level:gameSelectionViewModel.get("selectedRtpLevel")}; 

          var filteredList = gameSelectionViewModel.get("selectedGames").data().filter(function(item){
            return item.Level === newgame.Level &&  item.Name === newgame.Name;
          }); 

          console.log(filteredList); 

          if(newgame && (filteredList === undefined || filteredList.length === 0))
          {
             gameSelectionViewModel.selectedGames.add(newgame); 
          }
          else 
          {
            alert('game already added'); 
          }

这里最大的事情是您正在构造位于数据源中的对象，而不是网格中显示的对象。因此，我通常喜欢使用一个为我提供默认对象的函数，或者允许我构造一个可以插入具有正确属性集的数据源的对象。

然后确定新构建的游戏是否在我正在过滤的集合中，我们希望看到过滤后的列表未定义或长度为零。除此之外，我们都知道该商品已经在收藏夹中，因此请不要添加。

用数据绑定上的两个值填充网格

1 个答案: