基於MVC4+EasyUI的Web開發框架經驗總結（1）-利用jQuery Tags Input 外掛顯示選擇記錄
最近花了不少時間在重構和進一步提煉我的Web開發框架上，力求在使用者體驗和介面設計方面，和Winform開發框架保持一致，而在Web上，我主要採用EasyUI的前端介面處理技術，走MVC的技術路線，在重構完善過程中，很多細節花費不少時間進行研究和提煉，一步步走過來，也積累了不少經驗，本系列將主要介紹我在進一步完善我的Web框架基礎上積累的經驗進行分享，本隨筆主要介紹利用jQuery Tags Input 外掛顯示選擇記錄。
我在利用jQuery Tags Input 外掛之前，一直想找一個合適的Jquery外掛或者合適的做法，來實現我Winform框架裡面許可權系統的一個使用者選擇場景，就是能夠記錄使用者的選擇，並最終能夠儲存到資料庫裡面去。在WInform裡面，我可以用自定義控制元件的方式，很好地實現了這個功能，但是在Web介面上，我嘗試用Jquery試過了很多方法，沒能實現這個效果，花了不少時間來尋找，終於找到這個不錯的外掛。
先來看看我的最終實現的Web介面效果，就是在許可權管理系統裡面，機構包含的使用者編輯介面，或者是角色包含人員的編輯介面裡面，提供一個地方來記錄使用者的選擇，使用者確認後，可以把記錄的內容儲存到資料庫裡面。
上圖下面一個區域 “選擇的使用者” 裡面就是我用到這個控制元件來展示使用者選擇的人員資訊。
其實這個jQuery Tags Input 外掛主要的用途，是用來記錄使用者輸入的標籤的，它可以在空白的地方接受輸入的內容的，如下所示。
1、jQuery Tags Input 外掛的使用
應用指令碼和樣式檔案，如下所示。
<script src="jquery.tagsinput.js"></script> <link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
由於在MVC專案裡面中整合使用，因此你需要整理好合適的路徑，我的專案程式碼引用的路徑如下所示。
@*Tag標籤的控制元件應用*@ <script src="~/Content/JQueryTools/Tags-Input/jquery.tagsinput.js"></script> <link rel="stylesheet" type="text/css" href="~/Content/JQueryTools/Tags-Input/jquery.tagsinput.css"/>
簡單的例子就是在需要的表單裡建立一個包含tags列表的input輸入框，你可以在value裡設定預設或目前有的tags，並用逗號隔開。
<input name="tags" id="tags" value="foo,bar,baz" />
如我在MVC專案的視圖裡面，增加了一個層，用來放置使用者選擇的使用者資訊，和上面的例子不同，我的輸入預設初始化為空，如下所示。
<div id="tbEditChoise" data-options="region:'south',split:true,title:'選擇的使用者',iconCls:'icon-book'" style="padding:5px;height:150px"> <div id="selectedUsers" title="選擇的使用者" data-options="iconCls:'icon-view'" style="height:100px"> <input name="tags" id="tags" value="" /> </div> </div>
這個外掛可以遮蔽介面上的Tag標籤輸入，從而讓指令碼根據需要寫入不同的標籤。可以使用addTag() and removeTag()函式增加和刪除掉標籤，程式碼如下：
$('#tags').addTag('foo');
$('#tags').removeTag('bar');還可以用imporTags()方法導進一組tag列表，需要注意的是這樣會將value裡設定tag替換掉。
$('#tags').importTags('foo,bar,baz');如果傳遞引數為空，那麼相當於清空列表了。
$('#tags').importTags('');使用tagExist()可以判斷一個標籤是否存在：
if ($('#tags').tagExist('foo')) { ... }這個外掛還可以接受自動提示的插入操作，如下所示。
$('#tags').tagsInput({
autocomplete_url:'http://myserver.com/api/autocomplete'
});如果想要在增加或移除掉標籤的時候增加額外的功能或觸發其它動作，你可以通過onAddTag和onRemoveTag這兩個引數裡指定回撥函。這兩個函式都返回了一個標籤值作為引數
$('#tags').tagsInput({
width:'auto',
onAddTag:function(tag){
console.log('增加了'+tag)
},
onRemoveTag:function(tag){
console.log('刪除了'+tag)
}
});前面講了，可以遮蔽介面的Tag標籤輸入，而通過指令碼插入標籤，或者你想提供其它互動方式增加標籤，可以增加一個值為false的interactive引數，這樣就禁止了增加標籤，而其它的功能和呈現都跟原來一樣。
$('#tags').tagsInput({
width:'auto',
onRemoveTag:function(tag){
console.log('移除標籤：'+'"'+tag+'"')
},
interactive:false
});這個外掛完整的呼叫語法程式碼如下所示，根據需要使用即可。
$(selector).tagsInput({ 'autocomplete_url': url_to_autocomplete_api, 'autocomplete': { option: value, option: value}, 'height':'100px', 'width':'300px', 'interactive':true, 'defaultText':'add a tag', 'onAddTag':callback_function, 'onRemoveTag':callback_function, 'onChange' : callback_function, 'removeWithBackspace' : true, 'minChars' : 0, 'maxChars' : 0 //if not provided there is no limit, 'placeholderColor' : '#666666' });
2、在專案中使用jQuery Tags Input 外掛
前面介紹了這個外掛的各種用法，其中我們看到，裡面主要就是記錄使用者選擇或者錄入的名稱的，但是我們在介面上顯示使用者內容，還需要記住對應內容的ID，因為我們需要儲存選擇使用者的ID，而不是它的名稱，那麼我們應該如何操作呢？
前面也介紹了，在介面上使用，我們需要在視圖裡面新增一個層，用來放置這個標籤內容，把它排版好就是了。
<div id="tbEditChoise" data-options="region:'south',split:true,title:'選擇的使用者',iconCls:'icon-book'" style="padding:5px;height:150px"> <div id="selectedUsers" title="選擇的使用者" data-options="iconCls:'icon-view'" style="height:100px"> <input name="tags" id="tags" value="" /> </div> </div>
然後我們在easyUI的datagrid控制元件裡面，增加幾個按鈕，用來操作這個標籤的，也就是記錄，儲存和清空幾個重要的操作。
上圖的部分程式碼如下所示。
toolbar: [{ id: 'btnAddChoise', text: '新增選擇', iconCls: 'icon-add', handler: function () { addChoise();//實現新增記錄 }, }, '-', { id: 'btnComplete', text: '完成選擇', iconCls: 'icon-ok', handler: function () { completeChoise();//完成選擇並返回 } }, '-', { id: 'btnCleare', text: '清空', iconCls: 'icon-remove', handler: function () { cleareChoise();//清空使用者選擇記錄 } }, '-', { id: 'btnReload', text: '重新整理', iconCls: 'icon-reload', handler: function () { //實現重新整理欄目中的資料 $("#grid").datagrid("reload"); } }],
前面介紹了，我們需要顯示名稱，同時也要記錄選擇的專案ID（使用者ID），那麼我們可以用兩個列表物件來記錄它們，它們寫入的順序一樣，獲取的下標也就一樣了。
我們先初始化列表和Tags標籤物件，並增加一個新增使用者的封裝和移除使用者的封裝操作，程式碼如下所示。
<script type="text/javascript"> $(function () { $('#tags').tagsInput({ width: 'auto', height: '100px', onRemoveTag: function (tag) { var i = addNameList.indexOf(tag); var id = addUserList[i]; removeUser(id, tag); }, interactive: false }); }); var addUserList = new Array(); var addNameList = new Array(); function addUser(id, name) { if ($.inArray(id, addUserList) == -1) { addUserList.push(id); addNameList.push(name); $('#tags').addTag(name); } } function removeUser(id, name) { if ($.inArray(id, addUserList) != -1) { addUserList.pop(id); addNameList.pop(name); $('#tags').removeTag(name); } } </script>
清除使用者選擇的Tag操作，程式碼也很簡單了，都是我小節1介紹的內容，熟練應用就是了。
//清空使用者選擇記錄 function cleareChoise() { $('#tags').importTags(''); addUserList = new Array(); addNameList = new Array(); }
對於最重要的儲存操作，就是把儲存使用者ID的列表，把他們傳遞給對應的Ajax呼叫就搞定了。
//完成選擇並返回 function completeChoise() { var ouid = $('#txtID').val(); if (ouid != "") { var url = '/OU/EditOuUsers?r=' + Math.random(); saveAction(url, ouid, addUserList); } $("#DivEditUser").dialog('close'); reloadRelation();//重新重新整理 } //儲存機構使用者操作 function saveAction(url, id, newList) { $.ajax({ type: 'POST', url: url, async: false, data: { ouid: id, newList: newList.join(',') }, success: function (result) { $.messager.alert("提示", "操作成功！ "); $('#DivEditUser').dialog('close'); reloadRelation(); }, error: function (xhr, status, error) { $.messager.alert("提示", "操作失敗"); //xhr.responseText } }); }
最後，我們就可以順利看到真正的結果了。
整個介面就是開始的那個了。
和我Winform許可權系統裡面的對應介面對比，是不是發現很接近呢？利用EasyUI建立Web介面，一樣可以做的很不錯的哦。
撰寫人：伍華聰