如何从koGrid行中选择某些单元格?

时间:2013-06-05 09:11:07

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

我有一个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()]

    };     

1 个答案:

答案 0 :(得分: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: '*' }
    ]

如果您愿意,也可以将它们一起滚动到行模板中。