angular组件(ngKeybordSelect)-通过键盘实现多选

发布时间:2019-06-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了angular组件(ngKeybordSelect)-通过键盘实现多选脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

在刚刚结束的Angular交易系统项目中有几个需求是让我感觉要花点时间的

  • 如何更优雅的使用angular-bootstrap 的 Modal框。

  • 通过键盘实现ctrl多选,shfIT批量选的功能。

  • 何在angular去实现瀑布流

后面两个我都选择了自己写指令去完成,键盘多选的指令目前在github上并没有发现过,而瀑布流的组件写的倒是挺多的,但是都不适合我,因为在项目中我们的布局比较复杂,github上的项目在我的布局上面使用并没有效果。所以自己写了后面两个指令。今天要讲的是我的第一个指令 ngKeybordselect

ngKeyBordSelect

ng-keybord-select

The angular directive can be used to select(mulitselect) item by 'ctrl' and 'shfit' (使用指令完成系统常见的选择功能,例如ctrl多选,shfit批量选择的功能)

Update


  • 删除了Event和services,刚开始设计的时候是时候广播事件,来处理选中状态的,但是后来发现这样处理会导致同一页面下不能由多个组件,也就是组件不能独立,所以使用grid-group-data来获取选中的数据

  • 加上全选功能(grIDCheckAll)

Bower


    bower install --save-dev ng-keybord-select

Demo


usage


<ANY grid-group grid-select-name>
    <ANY grid-check-all>
    </ANY>
    <ANY grid-selected grid-selected-item grid-selected-disabled>
        .....
    </ANY>
</ANY>
@H_700_126@gridGroup Parameters
  • grid-select-name: 这个属性是用来绑定选择的字段,如果该字段为true则代表代表当前记录已经被选择

  • grid-group-data(新增): 这个属性是用来绑定选择的数据信息,他最终的得到的结果是选择的数据

gridSelected Parameters


  • grid-selected-item 该属性用来绑定当前记录的数据,该数据将会被指令读取

  • grid-selected-disabled 如果改属性为true,则记录不允许被选中

Event(已废弃,使用grid-group-data代替所要实现的功能)

  • selectStart 当你在选择某条记录之前,组件会向上传播该事件

  • selectEnd 当你选择某条记录之后,组件会向上传播该事件

$rootScope.$on('selectEnd', function(event, data) { //data为你选择的数据 selectItems = data; }) 

Services(已废弃,使用grid-group-data代替所要实现的功能)

MulitGrid 提供了两个方法去获取选择的信息 getSelectItems 和 getItemsLength

 angular,module('xxx')
        .controller('xxxxxCtrl',['MulitGrid',function(MulitGrid){
            //获取选中的所有数据
            VAR SelectItems = MulitGrid.getSelectItems();

            //获取选中数据的数量
             var SelectIteMLength = MulitGrid.getItemsLength();
        }])

就介绍到这里了,如果你觉得需要改进的地方欢迎@我,另外关于瀑布流和实现更优雅的Modal的框的文章我抽出时间写出来的

脚本宝典总结

以上是脚本宝典为你收集整理的angular组件(ngKeybordSelect)-通过键盘实现多选全部内容,希望文章能够帮你解决angular组件(ngKeybordSelect)-通过键盘实现多选所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。