0

我有一个按钮，单击该按钮时，我会将一些数据行值推送到数组中。我根据其选定/未选定状态交换文本。这很好用，但是如果用户通过数据网格进行分页或过滤它，选定的值仍然存在，但按钮文本会变回其“添加”状态。这是我的按钮代码：

    command: [
                { 
                   name: "Select", template:  "<a href='\\\#' class='k-button k-button-icontext btn-destroy k-grid-Select'>#= this.Selected === true ? 'Remove' : 'Add' #</a>",
click: function (e) {
                     var curBtn = $(e.target);
                     var tr = $(e.target).closest("tr"); // get the current table row (tr)
                     var data = this.dataItem(tr);
                     console.log(data);
                     var selected = data.Selected;

                     if (selected == false || selected == undefined) {
                         data.Selected = true;
                         curBtn.html('remove');
                     }
                     else { 
                         data.Selected = false;
                         curBtn.html('add');
                     }
                     console.log(curBtn);
                     data.refresh();
             }

         }],

我为模板尝试了这个，但不断收到无效的模板错误。我相信造成这种情况的原因是我无法直接访问数据单元之外的项目？ 

 template:  "<a href='\\\#' class='k-button k-button-icontext btn-destroy k-grid-Select'>#= Selected == true ? Remove : Add #</a>"

任何帮助都会像往常一样不胜感激！！感谢和快乐的编码！

编辑：

这是一个小提琴：http: //jsfiddle.net/rKBZq/27/

这非常代表我正在尝试做的事情。数据是本地的，就像在这个演示中一样。所以基本上，根据行的选定属性，我想将按钮的文本更改为“添加”或“删除”，并通过单击操作适当地更新行和数据......

我观察到的事情是当console.log(data) 选择的值实际上更新时......但是，现在是网格单元。这很好，因为无论如何我通常都会隐藏它......所以我已经进入模板的 this.Selected 是否有可能从表格行而不是支持数据中提取？- 编辑：添加 this.refresh() 也会更新表格，但这样做时按钮不会重新呈现......我更新了命令按钮以反映它，并且它在分页或过滤时确实保存......所以这个归结为当数据执行时调用刷新时按钮为什么不刷新/重新呈现？

另一个观察显然是我不应该做 curBtn.html('Add') 如果这有效......我希望随着数据的变化相应地交换按钮的状态......

4

1 回答 1

2

很抱歉，但据我所知，您无法使用command. 我在命令中找不到 Kendo UI Grid 文档引用template，当添加跟踪以查看模板何时展开时，我发现它仅在第一次加载 Grid 时执行。

您可以轻松验证是否将某些初始Selected状态设置true为button实际未正确初始化。

但这并不意味着你不能做类似的事情（得到相同的结果）。

我建议不要将其定义为 a command，而是将其定义为 afield然后使用您的template.

这样做你仍然有一些问题需要解决：

  1. 字段没有click事件，因此您应该在网格初始化之后添加一些代码来执行此操作。
  2. 避免单击时，该字段Selected进入编辑模式。如果您尝试使用，editable: false那么您将无法更改 的值，Selected所以我要做的是一个小技巧，包括定义field为空，然后将 定义title为我们想要的。
  3. 如果您更新DataSourceusing中的字段data.Selected = true，您实际上并没有在模型中设置它，因此在分页时您会丢失它。所以你应该使用set更新值。

这样做你的代码将是：

var grid = $("#grid").kendoGrid({
    dataSource: suppds,
    filterable: true,
    sortable  : true,
    height    : "600px",
    pageable  : {
        input  : true,
        numeric: false
    },
    save      : function () {
        this.refresh();
    },
    editable  : true,
    columns   : [
        {
            field : "",
            title : "Selected",
            template: "<a href='\\\#' class='k-button k-button-icontext btn-destroy k-grid-Select'>#= data.Selected == true ? 'Remove' : 'Add' #</a>",
            width  : "100px"
        },
        { field: "OrderDate", title: "Date", format: "{0:MM/dd/yyyy}" },
        {
            field     : "Title", title: "Title",
            filterable: {
                extra    : false,
                operators: {
                    string: {
                        contains: "Contains"
                    }
                }
            }
        },
        { field: "Records", title: "Records" },
        { field: "Selected"  }
    ]
}).data("kendoGrid");

$(grid.tbody).on("click", ".k-grid-Select", function (e) {
    var curBtn = $(e.target);
    var tr = $(e.target).closest("tr"); // get the current table row (tr)
    var data = grid.dataItem(tr);
    var selected = data.Selected;
    console.log(curBtn);
    console.log(data);
    if (selected == false || selected == undefined) {
        data.set("Selected", true);
        curBtn.text('Remove');
    }
    else {
        data.set("Selected", false);
        curBtn.text('Add');
    }
});

和修改后的JSFiddle：http: //jsfiddle.net/OnaBai/rKBZq/39/

于 2013-10-01T00:10:04.280 回答