angular組件(ngKeybordSelect)－通過鍵盤實現(xiàn)多選

novo 發(fā)布于2019-08-20 10:33 / 386人閱讀

摘要：在剛剛結束的交易系統(tǒng)項目中有幾個需求是讓我感覺要花點時間的如何更優(yōu)雅的使用的框。通過鍵盤實現(xiàn)多選，批量選的功能。所以自己寫了后面兩個指令。

在剛剛結束的angular交易系統(tǒng)項目中有幾個需求是讓我感覺要花點時間的

如何更優(yōu)雅的使用angular-bootstrap 的 Modal框。

通過鍵盤實現(xiàn)ctrl多選，shfit批量選的功能。

如何在angular去實現(xiàn)瀑布流

后面兩個我都選擇了自己寫指令去完成，鍵盤多選的指令目前在github上并沒有發(fā)現(xiàn)過，而瀑布流的組件寫的倒是挺多的，但是都不適合我，因為在項目中我們的布局比較復雜，github上的項目在我的布局上面使用并沒有效果。所以自己寫了后面兩個指令。今天要講的是我的第一個指令 ngKeybordSelect

ngKeyBordSelect ng-keybord-select

The angular directive can be used to select(mulitselect) item by "ctrl" and "shfit" （使用指令完成系統(tǒng)常見的選擇功能,例如ctrl多選，shfit批量選擇的功能）

Update

刪除了Event和services,剛開始設計的時候是時候廣播事件，來處理選中狀態(tài)的，但是后來發(fā)現(xiàn)這樣處理會導致同一頁面下不能由多個組件，也就是組件不能獨立，所以使用grid-group-data來獲取選中的數(shù)據(jù)

加上全選功能(gridCheckAll)

Bower

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

Demo

Simple Demo

Usage

gridGroup Parameters

grid-select-name: 這個屬性是用來綁定選擇的字段，如果該字段為true則代表代表當前記錄已經(jīng)被選擇

grid-group-data(新增): 這個屬性是用來綁定選擇的數(shù)據(jù)信息，他最終的得到的結果是選擇的數(shù)據(jù)

gridSelected Parameters

grid-selected-item 該屬性用來綁定當前記錄的數(shù)據(jù)，該數(shù)據(jù)將會被指令讀取

grid-selected-disabled 如果改屬性為true，則記錄不允許被選中

Event(已廢棄，使用grid-group-data代替所要實現(xiàn)的功能)

selectStart 當你在選擇某條記錄之前，組件會向上傳播該事件

selectEnd 當你選擇某條記錄之后，組件會向上傳播該事件

$rootScope.$on("selectEnd", function(event, data) { //data為你選擇的數(shù)據(jù) selectItems = data; })

Services(已廢棄，使用grid-group-data代替所要實現(xiàn)的功能)

MulitGrid 提供了兩個方法去獲取選擇的信息 getSelectItems 和 getItemsLength

 angular,module("xxx")
        .controller("xxxxxCtrl",["MulitGrid",function(MulitGrid){
            //獲取選中的所有數(shù)據(jù)
            var SelectItems = MulitGrid.getSelectItems();

            //獲取選中數(shù)據(jù)的數(shù)量
             var SelectItemLength = MulitGrid.getItemsLength();
        }])

就介紹到這里了，如果你覺得需要改進的地方歡迎@我，另外關于瀑布流和實現(xiàn)更優(yōu)雅的Modal的框的文章我抽出時間寫出來的

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/80205.html

ngScreening - angular 篩選器

摘要：篩選器組件通過控制器定義數(shù)據(jù)，幫你完成數(shù)據(jù)的渲染監(jiān)聽過濾等功能。點擊按鈕會重置組件內(nèi)的數(shù)據(jù)。包括單選組多選組的選中狀態(tài)，原生的輸入值，的按鈕點擊后，會執(zhí)行這個函數(shù)當然，如果你不需要的回調(diào)，這樣寫就可以了。 ngScreening v0.4.9 angular篩選器組件通過控制器定義數(shù)據(jù)，screening幫你完成數(shù)據(jù)的渲染、監(jiān)聽、過濾等功能。 DEMO http://moerj.git...

CompileYouth 2019-08-20 10:19 評論0 收藏0
React思維方式·譯

摘要：搜索文本和多選框因為會發(fā)生變化，且不能通過計算得出，所以是狀態(tài)。最后，過濾過的產(chǎn)品列表，可以通過原始產(chǎn)品列表搜索文本和多選框值計算出來，因此它不是狀態(tài)。從傳入的回調(diào)函數(shù)會調(diào)用，從而更新組件。在使用JavaScript開發(fā)大型、快速的網(wǎng)頁應用時，React是我們的首選。在Facebook和Instagram，React很好地減少了我們的工作量。React最強大部分之一，是讓你在開發(fā)應用...

helloworldcoding 2019-08-20 14:24 評論0 收藏0
表格組件 GridManager Angular 1.x

摘要：非必設項篩選條件列表數(shù)組對象。格式在使用時該參數(shù)為必設項。前端雞湯前端框架前端相關篩選選中項，字符串默認為。非必設項，選中的過濾條件將會覆蓋否為多選布爾值默認為。刷新更新查詢條件其它更多請直接訪問查看當前版本 GridManager Angular 1.x 基于 Angular 1.x 的 GridManager 封裝, 用于便捷的在 Angular 中使用GridManager. s...

darcrand 2019-08-23 16:46 評論0 收藏0
前端插件一：jQuery Multi-Select多選插件

摘要：項目此項目是替換標準含有屬性的標簽的一套交互友好的組件。類型默認值禁用狀態(tài)選項的。類型默認值為時已選區(qū)域的選項根據(jù)選中順序排序。方法初始化多選插件。選項選項選項取消選中匹配值的一項或多項。取消選中所有選項。項目此項目是替換標準（含有multiple屬性的select標簽）的一套交互友好的組件。特點免費（基于WTFPL許可證）支持鍵盤操作提供一些回調(diào)函數(shù) css完全自定義 ...

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

摘要：如圖所示還有其它很多項的更新，比如新增屬性，可以設置面板展開時默認顯示的日期。目前最新版本支持鍵盤可訪問性的組件有。期待你的加入下個版本預告下個版本計劃重構組件，以全面支持表單組件的鍵盤可訪問性，敬請期待。在過去的兩個多月里，iView 陸續(xù)發(fā)布了 2.9.0 和 2.10.0 兩個重要版本。這兩個版本總共有 255 個 commit，超過 40 項更新。來看一下，iView 具體都...

UsherChen 2019-08-22 15:17 評論0 收藏0