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

novo 发布于2019-08-20 10:33 / 262人阅读

摘要：在刚刚结束的交易系统项目中有几个需求是让我感觉要花点时间的如何更优雅的使用的框。通过键盘实现多选，批量选的功能。所以自己写了后面两个指令。

在刚刚结束的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

Simple Demo

Usage

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的框的文章我抽出时间写出来的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80205.html

ngScreening - angular 筛选器

摘要：筛选器组件通过控制器定义数据，帮你完成数据的渲染监听过滤等功能。点击按钮会重置组件内的数据。包括单选组多选组的选中状态，原生的输入值，的按钮点击后，会执行这个函数当然，如果你不需要的回调，这样写就可以了。 ngScreening v0.4.9 angular筛选器组件通过控制器定义数据，screening帮你完成数据的渲染、监听、过滤等功能。 DEMO http://moerj.git...

CompileYouth 2019-08-20 10:19 评论0 收藏0
React思维方式·译

摘要：搜索文本和多选框因为会发生变化，且不能通过计算得出，所以是状态。最后，过滤过的产品列表，可以通过原始产品列表搜索文本和多选框值计算出来，因此它不是状态。从传入的回调函数会调用，从而更新组件。在使用JavaScript开发大型、快速的网页应用时，React是我们的首选。在Facebook和Instagram，React很好地减少了我们的工作量。React最强大部分之一，是让你在开发应用...

helloworldcoding 2019-08-20 14:24 评论0 收藏0
表格组件 GridManager Angular 1.x

摘要：非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。前端鸡汤前端框架前端相关筛选选中项，字符串默认为。非必设项，选中的过滤条件将会覆盖否为多选布尔值默认为。刷新更新查询条件其它更多请直接访问查看当前版本 GridManager Angular 1.x 基于 Angular 1.x 的 GridManager 封装, 用于便捷的在 Angular 中使用GridManager. s...

darcrand 2019-08-23 16:46 评论0 收藏0
前端插件一：jQuery Multi-Select多选插件

摘要：项目此项目是替换标准含有属性的标签的一套交互友好的组件。类型默认值禁用状态选项的。类型默认值为时已选区域的选项根据选中顺序排序。方法初始化多选插件。选项选项选项取消选中匹配值的一项或多项。取消选中所有选项。项目此项目是替换标准（含有multiple属性的select标签）的一套交互友好的组件。特点免费（基于WTFPL许可证）支持键盘操作提供一些回调函数 css完全自定义 ...

NoraXie 2019-08-20 12:29 评论0 收藏0
iView 近期的更新，以及那些“不为人知”的故事

摘要：如图所示还有其它很多项的更新，比如新增属性，可以设置面板展开时默认显示的日期。目前最新版本支持键盘可访问性的组件有。期待你的加入下个版本预告下个版本计划重构组件，以全面支持表单组件的键盘可访问性，敬请期待。在过去的两个多月里，iView 陆续发布了 2.9.0 和 2.10.0 两个重要版本。这两个版本总共有 255 个 commit，超过 40 项更新。来看一下，iView 具体都...

UsherChen 2019-08-22 15:17 评论0 收藏0