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

novo 發布于2019-08-20 10:33 / 357人閱讀

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

在剛剛結束的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的框的文章我抽出時間寫出來的

GPU云服務器云服務器 asp 多選實現 html如何實現多選 android實現軟鍵盤通過消息隊列實現

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/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