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>

这是Kendo Grid配置：

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

有谁能告诉我如何使它成为可能？提前谢谢！

Answer 1

我认为这是因为单选按钮或者我可以说整行重新初始化并且所选的值没有存储在除网格之外的任何地方，如果你使用use复选框你可以绑定dataSource模型中某些字段的值。但对于单选按钮，我建议为您的问题解决方法：

使用kendo observable对象创建视图模型，并具有存储当前所选单选按钮的内容
在触发dataBound的每个页面上，将网格重新绑定到视图模型

DEMO

说明：

首先，我在那里创建虚拟数据和视图模型

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#'来存储正在检查哪一行的单选按钮< / p>

$("#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);

但诀窍是每个数据绑定我都会使用viewModel vm重新绑定网格，因为每次进入next / prev页面都会重新初始化，因此新创建的单选按钮会自动选中dataBound: function(e){ kendo.bind($("#grid"),vm); }

Kendo UI网格：单选按钮和分页问题

1 个答案: