如何从 koGrid 行中选择某些单元格？答案

【问题标题】：How to select certain cells from koGrid row?如何从 koGrid 行中选择某些单元格？
【发布时间】：2013-06-05 09:11:07
【问题描述】：

我有一个 koGrid，我只想从行中选择一些单元格（2 个单元格）。如果使用 canSelectRows: true 属性，我可以选择整行 - 我不需要这个。如何从 koGrid 行中选择某些单元格？

网格来源：

 this.gridOptions = {
        data: self.people,
        enablePaging: true,
        pagingOptions: self.pagingOptions,
        useExternalSorting: true,
        sortInfo: self.sortingOptions,
        enableColumnResize: false,
        keepLastSelected: false,
        multiSelect: true,
        showColumnMenu: false,
        showFilter: false,
        canSelectRows: false,
        columnDefs: [{
            field: "Age",
            displayName: "Age",
            width: "33.3%",
            sortable: true
        },
        {
            field: "Address",
            displayName: "Address",
            width: "33%",
            sortable: true
        },
         {
             field: "Website",
             displayName: "Website",
             cellTemplate:
                 '<div>' +                   
                ' <a data-bind="attr: {href:\'linkAddress'">People</a>' +
                '</div>',
             width: "33%"
         }],

        selectedItems: self.selectedItems,
        plugins: [new koGridSetDefaultSortingPlugin(this.sortingOptions), new koGridSetNextPagePlugin()]

    };

【问题讨论】：

如果我使用rowTemplate:会怎样？
当您说您只想选择 2 个单元格时，您的意思是您希望能够仅基于这 2 个单元格来选择行，还是您希望在单击时运行一个操作那两个细胞？
我想在点击这两个单元格时运行一个动作；谢谢！
但我不知道如何选择这 2 个 cels

标签： knockout.js knockout-2.0 knockout-mvc kogrid

【解决方案1】：

我为此使用了列模板，尽管那时我只希望一个单元格可点击。

<script type="text/html" id="removePostCodeTmpl">
    <div data-bind="attr: { 'class': 'kgCellText colt' + $index() },
    text: $data.getProperty($parent),
    click: function (itemRow, event) { $userViewModel.removePostcode($parent.entity); },
    style: { cursor: 'pointer' }"></div>
</script>

<script type="text/html" id="addPostCodeTmpl">
    <div data-bind="attr: { 'class': 'kgCellText colt' + $index() },
    text: $data.getProperty($parent),
    click: function (itemRow, event) { $userViewModel.addPostcode($parent.entity); },
    style: {
        cursor: $parent.entity.PostcodeGroupId === null ? 'pointer' : 'default',
        backgroundColor: $parent.entity.PostcodeGroupId === null ? '' : '#cc4444'
    }"></div>
</script>

我在 html 页面中有这些模板，我不喜欢在后端生成 UI，它隐藏了它。

columnDefs:
    [
        { field: 'Name', displayName: 'Search Results', cellTemplate: $('#removePostCodeTmpl').html(), width: '*' },
        { field: 'Data', displayName: 'Search Results', cellTemplate: $('#addPostCodeTmpl').html(), width: '*' }
    ]

不过，如果您愿意，也可以将它们组合成一个行模板。

【讨论】：