如何使用对话框使fuelux数据网格（由主干集合生成）每一行可编辑答案

【问题标题】：How to make fuelux datagrid's(generated by backbone collection) each row editable using dialog如何使用对话框使fuelux数据网格（由主干集合生成）每一行可编辑
【发布时间】：2013-03-26 12:36:20
【问题描述】：

New StaticDataSource 将为fuelux 网格构造数据源。格式化程序将设置属性以在数据网格单元格中生成可编辑按钮。代码如下：

 app.PlayersView = Backbone.View.extend({
    template: _.template( $("#players-template").html() ),
    events: {
        "click #addUser" : "addUser",
    },
    initialize: function () {
        if(this.collection){
            this.collection.fetch();
        }
        this.listenTo(this.collection, 'all', this.render);
    },
    render: function () {           
        this.$el.html( this.template );
               var dataSource = new StaticDataSource({
            columns: [
                {
                    property: 'username',
                    label: 'Username',
                    sortable: true
                },
                {
                    property: 'group',
                    label: 'Groups',
                    sortable: true
                },
                {
                    property: 'edit',
                    label: 'Edit',
                    sortable: true
                }
            ],
             formatter: function (items) {
                  $.each(items, function (index, item) {
                    item.edit = '<div class="btn-group"><a id="editGroup" class="btn">Edit</a></div>';
                  });
             },
            data: this.collection.toJSON(),
            delay: 250
        });
          $('#MyGrid').datagrid({
            dataSource: dataSource,
            stretchHeight: true
        });
  });

app.Playerview 对象在 bakcbone 路由器的某处创建如下：

       new app.PlayersView({
            collection : new app.UsersCollection
        }));

在这里，列是用户名、组和编辑。每行的编辑列包含编辑按钮。当我单击任何行中的编辑按钮时，我想将特定的行模式或行数据传递给任何其他主干视图。我们该怎么做？

实际上，我将打开允许编辑该特定行的对话框。我希望 modal 由该行值预先填充。

提前致谢

【问题讨论】：

你的行是由模型+视图表示的吗？
@Loamhoof，fuelux 数据网格直接拿走我的收藏。因此，我想弄清楚如何获取每一行的模型并将它们传递给其他视图时点击编辑行
你的作品看起来很不错！

标签： javascript backbone.js datagrid fuelux

【解决方案1】：

从 Backbone 的角度来看，您无法控制网格。所以基本上，目前，您的行不代表任何模型。
现在的情况是，如果您只想预先填充模态框，我想您可以使用 jQuery 轻松完成。
但是，我假设您还希望同时更改模型。我不知道 Fuel UX，所以我不知道你是如何做到这一点的，但是（但我仍然很确定你可以，如果你想要更新你的模型，应该这样做）：等到创建网格，通过创建一个视图将您的模型绑定到网格，该视图将是每个元素的行，并在此视图中监听您的按钮的点击。在这里，您可以直接访问您的模型，从而访问您的数据。

如果您要发布更多代码（例如模型的定义）和网格的 HTML（或简化版本，因为我确信它充满了自定义类等等），我可以提供帮助，如果你希望如此。

【讨论】：

【解决方案2】：

如果您的玩家具有唯一标识符，您可以如下更改您的编辑按钮，以包含玩家 ID：

之前：

<a id="editGroup" class="btn">Edit</a>

之后：

<a id="editGroup" data-id="3" class="btn">Edit</a>

当然，您可以在现有的格式化程序函数中插入正确的 ID。然后，您可以从点击事件访问此 ID，以填充您的对话框并选择要更新的正确模型。

【讨论】：