zoukankan      html  css  js  c++  java
  • Extjs 3.4 复选框的,默认选中 ,禁用,(纯属于自己代码中需要,总结!)

         var sm = new Ext.grid.CheckboxSelectionModel( {         //一个特定的选择模型,它将渲染一列复选框,可以用来选择或反选多行数据。
                   handleMouseDown : Ext.emptyFn,          //不响应MouseDown事件
                   renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
                      if(record.get('state')=='1'){              //判断条件
                           sm.selectRow(rowIndex,true);             //符合的行 进行默认勾选      下面还有一些参考
                           return '<div class="x-grid3-row-checker" >&#160;</div>';      //返回的是一个复选框
                      }else{
                           return '<div ><input type="checkbox" style="margin:-1 0 0 -2" disabled/></div>';    //把复选框禁用  (完全禁用,显示的是实体小正方形)
                      }
                    },
                    listeners:{         //listeners监听可以根据需求 写或不写                                                                                                 
                       beforerowselect:function(SelectionModel, rowIndex, keepExisting,record){
                           if(record.get('status')!='1' ){
                              return true;      //返回true 可以进行勾选操作
                           }else{
                             return false;     //禁止勾选, (显示没效果,只有鼠标点击时才知道狗选不上)
                           }
                       },
                      selectionchange:function(sms){       //当选中状态发生改变时触发
                          var row= sm.getSelections();       //返回所有选中记录
                         if(sms.hasSelection()){                 //返回 选中:true   取消选中:false 
                             if(arr!=""){            
                               arr="";            //每次选择之前判断一下    解决数据累加的情况
                          }
                            for(var i=0;i<row.length;i++){           //选中条数遍历
                               if(row[i].get('state')=='1'){
                                arr += row[i].get('userid')+",";     //逗号分隔    params传入后台遍历数据
                              }
                            }
                        }
                      }


                    }
                });

    renderer详解:

    value:将要像是单元格里的值,即dataIndex的值

    cellmeta:单元格的相关属性,主要是id和CSS

    record:这行的数据对象。通过record.data['id']方式得到其他列的值

    rowIndex:行号

    columnIndex:当前列的行号

    store:构造表格时传递的ds,也就是说,表格里所有的数据都可以通过store获得。

    选中的状态:

    1. sm.selectAll();  
    2. sm.selectFirstRow();  
    3. sm.selectLastRow();  
    4. selectNext();  
    5. selectPrevious();  
    6. selectRange( Number startRow, Number endRow, [Boolean keepExisting] ) ;  
    7. selectRecords( Array records, [Boolean keepExisting] );  
    8. selectRow( Number row, [Boolean keepExisting] );

            未禁用                     禁用    

     

     全选状态

     

    最终效果:

  • 相关阅读:
    PHP中的类函数和类对象
    PHP魔术方法__clone()篇
    PHP魔术方法__tostring()篇
    PHP魔术方法__call()篇
    自己写的PHP的mql类
    PHP的分页
    ThinkPHP的调用css,js和图片的路径
    JavaScript作用域链
    在Eclipse中开发WEB项目
    eclipse官方网址、各个版本的下载
  • 原文地址:https://www.cnblogs.com/shenpiao/p/5009224.html
Copyright © 2011-2022 走看看