亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

novo / 414人閱讀

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

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

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

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

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

后面兩個我都選擇了自己寫指令去完成，鍵盤多選的指令目前在github上并沒有發(fā)現(xiàn)過，而瀑布流的組件寫的倒是挺多的，但是都不適合我，因?yàn)樵陧?xiàng)目中我們的布局比較復(fù)雜，github上的項(xiàng)目在我的布局上面使用并沒有效果。所以自己寫了后面兩個指令。今天要講的是我的第一個指令 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,剛開始設(shè)計的時候是時候廣播事件，來處理選中狀態(tài)的，但是后來發(fā)現(xiàn)這樣處理會導(dǎo)致同一頁面下不能由多個組件，也就是組件不能獨(dú)立，所以使用grid-group-data來獲取選中的數(shù)據(jù)

加上全選功能(gridCheckAll)

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

Simple Demo

Usage 

    
    
    
        .....
gridGroup Parameters

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

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

gridSelected Parameters

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

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

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

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

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

$rootScope.$on("selectEnd", function(event, data) { //data為你選擇的數(shù)據(jù) selectItems = data; })
Services(已廢棄，使用grid-group-data代替所要實(shí)現(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();
        }])

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/80205.html

相關(guān)文章

  • ngScreening - angular 篩選器

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

    CompileYouth 評論0 收藏0

  • React思維方式·譯

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

    helloworldcoding 評論0 收藏0

  • 表格組件 GridManager Angular 1.x

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

    darcrand 評論0 收藏0

  • 前端插件一：jQuery Multi-Select多選插件

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

    NoraXie 評論0 收藏0

  • iView 近期的更新，以及那些“不為人知”的故事

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

    UsherChen 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<