最近花了不少時間在重構和進一步提煉我的Web開發架構上，力求在使用者體驗和界面設計方面，和Winform開發架構保持一緻，而在Web上，我主要采用EasyUI的前端界面處理技術，走MVC的技術路線，在重構完善過程中，很多細節花費不少時間進行研究和提煉，一步步走過來，也積累了不少經驗，本系列将主要介紹我在進一步完善我的Web架構基礎上積累的經驗進行分享，本随筆主要介紹利用jQuery Tags Input 插件顯示選擇記錄。
我在利用jQuery Tags Input 插件之前，一直想找一個合适的Jquery插件或者合适的做法，來實作我Winform架構裡面權限系統的一個使用者選擇場景，就是能夠記錄使用者的選擇，并最終能夠儲存到資料庫裡面去。在WInform裡面，我可以用自定義控件的方式，很好地實作了這個功能，但是在Web界面上，我嘗試用Jquery試過了很多方法，沒能實作這個效果，花了不少時間來尋找，終于找到這個不錯的插件。
先來看看我的最終實作的Web界面效果，就是在權限管理系統裡面，機構包含的使用者編輯界面，或者是角色包含人員的編輯界面裡面，提供一個地方來記錄使用者的選擇，使用者确認後，可以把記錄的内容儲存到資料庫裡面。
上圖下面一個區域 “選擇的使用者” 裡面就是我用到這個控件來展示使用者選擇的人員資訊。
其實這個jQuery Tags Input 插件主要的用途，是用來記錄使用者輸入的标簽的，它可以在空白的地方接受輸入的内容的，如下所示。
應用腳本和樣式檔案，如下所示。
由于在MVC項目裡面中內建使用，是以你需要整理好合适的路徑，我的項目代碼引用的路徑如下所示。
簡單的例子就是在需要的表單裡建立一個包含tags清單的input輸入框，你可以在value裡設定預設或目前有的tags，并用逗号隔開。
如我在MVC項目的視圖裡面，增加了一個層，用來放置使用者選擇的使用者資訊，和上面的例子不同，我的輸入預設初始化為空，如下所示。
這個插件可以屏蔽界面上的Tag标簽輸入，進而讓腳本根據需要寫入不同的标簽。可以使用addTag() and removeTag()函數增加和删除掉标簽，代碼如下：
還可以用imporTags()方法導進一組tag清單，需要注意的是這樣會将value裡設定tag替換掉。
如果傳遞參數為空，那麼相當于清空清單了。
使用tagExist()可以判斷一個标簽是否存在：
這個插件還可以接受自動提示的插入操作，如下所示。
如果想要在增加或移除掉标簽的時候增加額外的功能或觸發其它動作，你可以通過onAddTag和onRemoveTag這兩個參數裡指定回調函。這兩個函數都傳回了一個标簽值作為參數
前面講了，可以屏蔽界面的Tag标簽輸入，而通過腳本插入标簽，或者你想提供其它互動方式增加标簽，可以增加一個值為false的interactive參數，這樣就禁止了增加标簽，而其它的功能和呈現都跟原來一樣。
這個插件完整的調用文法代碼如下所示，根據需要使用即可。
前面介紹了這個插件的各種用法，其中我們看到，裡面主要就是記錄使用者選擇或者錄入的名稱的，但是我們在界面上顯示使用者内容，還需要記住對應内容的ID，因為我們需要儲存選擇使用者的ID，而不是它的名稱，那麼我們應該如何操作呢？
前面也介紹了，在界面上使用，我們需要在視圖裡面添加一個層，用來放置這個标簽内容，把它排版好就是了。
然後我們在easyUI的datagrid控件裡面，增加幾個按鈕，用來操作這個标簽的，也就是記錄，儲存和清空幾個重要的操作。
上圖的部分代碼如下所示。
前面介紹了，我們需要顯示名稱，同時也要記錄選擇的項目ID（使用者ID），那麼我們可以用兩個清單對象來記錄它們，它們寫入的順序一樣，擷取的下标也就一樣了。
我們先初始化清單和Tags标簽對象，并增加一個添加使用者的封裝和移除使用者的封裝操作，代碼如下所示。
清除使用者選擇的Tag操作，代碼也很簡單了，都是我小節1介紹的内容，熟練應用就是了。
對于最重要的儲存操作，就是把存儲使用者ID的清單，把他們傳遞給對應的Ajax調用就搞定了。
最後，我們就可以順利看到真正的結果了。
整個界面就是開始的那個了。
和我Winform權限系統裡面的對應界面對比，是不是發現很接近呢？利用EasyUI建立Web界面，一樣可以做的很不錯的哦。
<a href="http://www.cnblogs.com/wuhuacong/p/3281103.html">基于MVC4+EasyUI的Web開發架構形成之旅--總體介紹</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3317223.html">基于MVC4+EasyUI的Web開發架構形成之旅--界面控件的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3343967.html">基于MVC4+EasyUI的Web開發架構形成之旅--附件上傳元件uploadify的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3344096.html">基于MVC4+EasyUI的Web開發架構形成之旅--架構總體界面介紹</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3352016.html">基于MVC4+EasyUI的Web開發架構形成之旅--基類控制器CRUD的操作</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3361351.html">基于MVC4+EasyUI的Web開發架構形成之旅--權限控制</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3667703.html">基于MVC4+EasyUI的Web開發架構經驗總結（1）-利用jQuery Tags Input 插件顯示選擇記錄</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3669575.html">基于MVC4+EasyUI的Web開發架構經驗總結（2）- 使用EasyUI的樹控件建構Web界面</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3669708.html">基于MVC4+EasyUI的Web開發架構經驗總結（3）- 使用Json實體類建構菜單資料</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3736564.html">基于MVC4+EasyUI的Web開發架構經驗總結（4）--使用圖表控件Highcharts</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3780356.html">基于MVC4+EasyUI的Web開發架構經驗總結（5）--使用HTML編輯控件CKEditor和CKFinder</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3840321.html">基于MVC4+EasyUI的Web開發架構經驗總結（6）--在頁面中應用下拉清單的處理</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3841338.html">基于MVC4+EasyUI的Web開發架構經驗總結（7）--實作省份、城市、行政區三者關聯</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3871991.html">基于MVC4+EasyUI的Web開發架構經驗總結（8）--實作Office文檔的預覽</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3872890.html">基于MVC4+EasyUI的Web開發架構經驗總結（9）--在Datagrid裡面實作外鍵字段的轉義操作</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3873498.html">基于MVC4+EasyUI的Web開發架構經驗總結（10）--在Web界面上實作資料的導入和導出</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4073203.html">基于MVC4+EasyUI的Web開發架構經驗總結（11）--使用Bundles處理簡化頁面代碼</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4085682.html">基于MVC4+EasyUI的Web開發架構經驗總結（12）--利用Jquery處理資料互動的幾種方式</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4085725.html">基于MVC4+EasyUI的Web開發架構經驗總結（13）--DataGrid控件實作自動适應寬帶高度</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4093778.html">基于MVC4+EasyUI的Web開發架構經驗總結（14）--自動生成圖示樣式檔案和圖示的選擇操作</a>