获取所选网格行数据

环境

描述

我想通过使用选定的Grid行和Kendo UI ListBox创建一个购物列表。如何实现这个功能?

下面的示例仅获取当前页的选定行。

解决方案

为了得到dataItem对于每个选定的行:

1. 在改变事件处理程序，获取并保存变量中的行选择方法。
2. 元素循环遍历行每一个jQuery方法。
3. 方法获取每一行数据dataItem方法。
4. 推动dataItem到一个数组。
5. 属性将所选项添加到ListBox小部件数据方法。

笔记

该复选框可选列在Kendo UI R2 2017 SP1发行版中可用。

获取跨所有网格页的选定行数据

1. 得到了id控件中所选行的字段值selectedKeyNames ()方法。
2. 遍历Grid数据以匹配包含这些数据项的数据项id值。
3. 推动dataItems将所选行添加到数组中。
4. 属性将所选项添加到ListBox小部件数据方法。

 更新列表 
 
购物清单
  < / > < > $(文档)时(函数(){$(" #网格”)。kendoGrid({dataSource: {pageSize: 10，传输:{读取:{url: "https://demos.telerik.com/kendo-ui/service/Products"，数据类型:"jsonp"}}，模式:{模型:{id: "ProductID"}}}，可分页:true，可滚动:false, persistSelection: true，可排序:true，列:[{可分页:true，宽度:"50px"}，{字段:"ProductName"，标题:"产品名称"}，{字段:"UnitPrice"，标题:"UnitPrice"，格式:"{0:c}"}，{字段:"UnitsInStock"，标题:"UnitsInStock"}，{字段:"UnitsInStock"}，{字段:"UnitsInStock"，标题:"UnitsInStock"}，{字段:"UnitsInStock"“已停止”}]});$(" #列表框”)。kendoListBox({dataSource: {data: []}， template: "
#:ProductName# - $#:UnitPrice#
"});});function getSelectedRowsData(){//获取选定行的id字段值var keyNames = $("#grid").data("kendoGrid").selectedKeyNames();//将字符串值转换为数字var id = keyNames。map(函数(x){返回parseInt(x, 10);}); var gridData = $("#grid").data("kendoGrid").dataSource.data(); var selected =[]; ids.forEach(function(number) { gridData.forEach(function(dataItem) { if(number === dataItem.id) { selected.push(dataItem) } }) }); var listBox = $("#listBox").data("kendoListBox"); listBox.dataSource.data(selected); }  
         
另请参阅
         

          
关于复选框选择的常见问题
          
网格复选框选择演示
          
列的API参考。可选择的配置
         
        
       
      
      
     
     

      

       

        在本文中
       

      
      
      

       

        相关文章
       

      
      
      

       找不到你需要的帮助?
       

        联络支持
       
       
        
        
        改进这篇文章
      
     
    
   
   

   
  
  

   
   

    

     

      

       

        

         
开始
         

          
开始
          
演示
          
什么新
          
路线图
         
        
        

         
社区
         

          
论坛
          
博客
          
反馈信息门户
          
医生的贡献
         
        
        

         
框架
         

          
jQuery的剑道UI
          
Angular的Kendo UI
          
React的Kendo UI
          
剑道UI为Vue
         
        
       
       

        

         
          
         
版权所有©2023 Progress Software Corporation和/或其子公司或关联公司。
版权所有。
         
本协议中使用的Progress、Telerik和某些产品名称是Progress软件公司和/或其在美国和/或其他国家的子公司或关联公司之一的商标或注册商标。看到商标用于适当的标记。
        
        

         

          
            
            
            
            
            
            
            
            
            
            
            
            
         
         

          

           
使用条款
           
隐私中心
           
安全中心
           
商标
           
许可协议
           
行为准则
           
文档的版权
          
          不出售我的个人信息