如何在复选框点击时动态修改Kendo UI ListView的数据源URL？

要实现复选框点击时更新ListView的数据源URL，核心是修改DataSource的transport.read.url属性，再触发数据重新加载即可。下面是具体的实现步骤和代码示例：

实现步骤 #

• 给目标复选框绑定点击事件，监听其状态变化
• 在事件处理函数中，获取已初始化的DataSource实例，修改其transport.read.url的值
• 调用DataSource的read()方法重新拉取数据，ListView会自动同步更新

完整代码示例 #

先假设你的复选框HTML结构如下：

<input type="checkbox" id="toggleDataSource" />
<label for="toggleDataSource">切换数据源</label>

<!-- 你的ListView模板与容器 -->
<script type="text/x-kendo-template" id="template">
  <!-- 这里是你的ListView项模板内容 -->
</script>
<div id="listView"></div>
<div id="pager"></div>

然后修改你的JavaScript代码，添加复选框的事件逻辑：

// 初始化数据源和控件
var dataSource = new kendo.data.DataSource({ 
  transport: { 
    read: { 
      url: "ASPCode/RMScheduleList.asp", 
      dataType: "json" 
    } 
  }, 
  pageSize: 50 
}); 

$("#pager").kendoPager({ dataSource: dataSource }); 
$("#listView").kendoListView({
  dataSource: dataSource,
  template: kendo.template($("#template").html())
});

// 绑定复选框点击事件
$("#toggleDataSource").on("click", function() {
  // 根据复选框选中状态设置新URL
  var targetUrl = $(this).is(":checked") 
    ? "ASPCode/RMScheduleList_YourTargetUrl.asp"  // 替换为你需要的目标URL
    : "ASPCode/RMScheduleList.asp";               // 切换回原URL

  // 更新数据源的读取地址
  dataSource.transport.read.url = targetUrl;
  
  // 重新读取数据，ListView会自动刷新
  dataSource.read();
});

关键说明 #

• Kendo DataSource在每次调用read()时都会使用当前的配置，所以直接修改transport.read.url是有效的
• 如果需要传递额外参数，也可以在transport.read.data中配置，同样可以在事件中动态修改
• 调用dataSource.read()会自动触发ListView的重新渲染，无需手动刷新控件

内容的提问来源于stack exchange，提问作者Ravi Bhartiya