jquery - 剑道 UI 网格 : radio button and pagination issue

Question

我已经实现了一个带有过滤和分页功能的简单 Kendo UI 网格。我的第一列每行都有单选按钮，显然我一次只能选择一个单选按钮。但是，当我更改页面时，当前选择被清除，当我返回该页面时，我发现没有选择单选按钮!

这是我的 HTML 表格:

<table id="grid">
            <colgroup>
                <col />
                <col />
                <col />
                <col style="width:110px" />
                <col style="width:120px" />
                <col style="width:130px" />
            </colgroup>
            <thead>
                <tr>
                    <th data-field="select">Select</th>
                    <th data-field="make">Car Make</th>
                    <th data-field="model">Car Model</th>
                    <th data-field="year">Year</th>
                    <th data-field="category">Category</th>
                    <th data-field="airconditioner">Air Conditioner</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="radio" name="rg" /></td>
                    <td>Volvo</td>
                    <td>S60</td>
                    <td>2010</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                </tr>
                <tr>
                <!-- Contains many similar rows with radio button -->
                </tr>
            </tbody>
         </table>

这是剑道网格配置:

$("#grid").kendoGrid({
  sortable: true,
  pageable: {
    pageSize: 10
  },
  filterable: {
    mode: "row",
    extra: false
  }
});

谁能告诉我如何让它成为可能？提前致谢!

Answer 1

我认为这是因为单选按钮或者我可以说整行重新初始化并且所选值没有存储在网格以外的任何地方，如果您使用使用复选框，您可以将值绑定(bind)到某个字段你的数据源模型。但是对于单选按钮，我为您的问题提出了一个解决方法:

1. 使用 kendo 可观察对象创建一个 View 模型，并有一些东西来存储当前选择的单选按钮
2. 在每个数据绑定(bind)的页面更改都会被触发，将网格重新绑定(bind)到 View 模型

DEMO

解释:

首先我在那里创建虚拟数据和 View 模型

var data = [
      {id:1,make:"volvo",model:"S60",year:"2010",category:"saloon",airconditioner:"yes"},
      {id:2,make:"audi",model:"S60",year:"2010",category:"saloon",airconditioner:"yes"},
      {id:3,make:"bmw",model:"S60",year:"2010",category:"saloon",airconditioner:"yes"},
      {id:4,make:"ferari",model:"S60",year:"2010",category:"saloon",airconditioner:"yes"},
      {id:5,make:"honda",model:"S60",year:"2010",category:"saloon",airconditioner:"yes"},
      {id:6,make:"lamborghini",model:"S60",year:"2010",category:"saloon",airconditioner:"yes"},
      {id:7,make:"toyota",model:"S60",year:"2010",category:"saloon",airconditioner:"yes"},
      {id:8,make:"mazda",model:"S60",year:"2010",category:"saloon",airconditioner:"yes"},
      {id:9,make:"viper",model:"S60",year:"2010",category:"saloon",airconditioner:"yes"}
    ];

var vm = new kendo.data.ObservableObject({
    selectedRow: null,
    select: function(){ console.log(vm.selectedRow); },
    datasource : new kendo.data.DataSource({
        data: data,
        pageSize: 3
    }),
});

其次，我初始化网格(使用单选按钮的自定义列模板)，如您所见，我有 data-bind='checked:selectedRow' 和 value='#: id#' 存储哪一行的单选按钮被选中

$("#grid").kendoGrid({
    columns: [
      { title: "id", width: "50px", template: "<input type='radio' name='rg' value='#:id#'  data-bind='click:select, checked: selectedRow' />" },
      { field: "make", title: "Car Make", width: "130px" },
      { field: "model", title: "Car Model", width: "130px" },
      { field: "year", title: "Year", width: "130px" },
      { field: "category", title: "category", width: "130px" },
      { field: "category", title: "category", width: "130px" },
    ],
    dataBound: function(e){ 
      kendo.bind($("#grid"),vm);
    },
    dataSource: vm.datasource,
    sortable: true,
    pageable: {
      pageSize: 3
    },
    filterable: {
      mode: "row",
      extra: false
    }
});

kendo.bind($("#example"),vm);

但诀窍是每个数据绑定(bind)我都将网格与 viewModel vm 重新绑定(bind)，因为每次转到下一页/上一页它都会重新初始化，因此新创建的单选按钮会自动选择 dataBound: function(e ){ kendo.bind($("#grid"),vm); }