最近花了不少時間在重構和進一步提煉我的Web開發(fā)框架上，力求在用戶體驗和界面設計方面摩泪，和Winform開發(fā)框架保持一致族购，而在Web上，我主要采用EasyUI的前端界面處理技術直撤，走MVC的技術路線，在重構完善過程中蜕着，很多細節(jié)花費不少時間進行研究和提煉谋竖，一步步走過來，也積累了不少經(jīng)驗承匣，本系列將主要介紹我在進一步完善我的Web框架基礎上積累的經(jīng)驗進行分享蓖乘，本隨筆主要介紹利用jQuery Tags Input 插件顯示選擇記錄。
我在利用jQuery Tags Input 插件之前韧骗，一直想找一個合適的Jquery插件或者合適的做法嘉抒，來實現(xiàn)我Winform框架里面權限系統(tǒng)的一個用戶選擇場景，就是能夠記錄用戶的選擇袍暴，并最終能夠保存到數(shù)據(jù)庫里面去些侍。在WInform里面，我可以用自定義控件的方式政模，很好地實現(xiàn)了這個功能岗宣，但是在Web界面上，我嘗試用Jquery試過了很多方法淋样，沒能實現(xiàn)這個效果耗式，花了不少時間來尋找，終于找到這個不錯的插件。
先來看看我的最終實現(xiàn)的Web界面效果刊咳，就是在權限管理系統(tǒng)里面彪见，機構包含的用戶編輯界面，或者是角色包含人員的編輯界面里面娱挨，提供一個地方來記錄用戶的選擇余指，用戶確認后，可以把記錄的內(nèi)容保存到數(shù)據(jù)庫里面让蕾。

不過這個JQuery的插件顿颅，也能夠屏蔽用戶的輸入，由我們通過Javaascript進行添加即可足丢，因此就正好符合我上面例子的需求了粱腻，這個jquery插件的下載地址是（http://xoxco.com/projects/code/tagsinput/），GitHub的下載地址是（https://github.com/xoxco/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" />

簡單的例子就是在需要的表單里創(chuàng)建一個包含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標簽輸入昂勒，從而讓腳本根據(jù)需要寫入不同的標簽≈弁可以使用addTag() and removeTag()函數(shù)增加和刪除掉標簽戈盈，代碼如下：

$('#tags').addTag('foo');$('#tags').removeTag('bar');

還可以用imporTags()方法導進一組tag列表，需要注意的是這樣會將value里設置tag替換掉。

$('#tags').importTags('foo,bar,baz');

如果傳遞參數(shù)為空塘娶，那么相當于清空列表了归斤。

$('#tags').importTags('');

使用tagExist()可以判斷一個標簽是否存在：

if ($('#tags').tagExist('foo')) { ... }

這個插件還可以接受自動提示的插入操作，如下所示刁岸。

$('#tags').tagsInput({ 
autocomplete_url:'http://myserver.com/api/autocomplete'});

如果想要在增加或移除掉標簽的時候增加額外的功能或觸發(fā)其它動作脏里，你可以通過onAddTag和onRemoveTag這兩個參數(shù)里指定回調函。這兩個函數(shù)都返回了一個標簽值作為參數(shù)

$('#tags').tagsInput({
    width:'auto',
    onAddTag:function(tag){
        console.log('增加了'+tag)
    },
    onRemoveTag:function(tag){
        console.log('刪除了'+tag)
    }
});

前面講了虹曙，可以屏蔽界面的Tag標簽輸入迫横，而通過腳本插入標簽，或者你想提供其它交互方式增加標簽酝碳，可以增加一個值為false的interactive參數(shù)矾踱，這樣就禁止了增加標簽，而其它的功能和呈現(xiàn)都跟原來一樣疏哗。

$('#tags').tagsInput({
    width:'auto',
    onRemoveTag:function(tag){
        console.log('移除標簽：'+'"'+tag+'"')
    },
    interactive:false
});

這個插件完整的調用語法代碼如下所示呛讲，根據(jù)需要使用即可。

$(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 插件

前面介紹了這個插件的各種用法贝搁，其中我們看到，里面主要就是記錄用戶選擇或者錄入的名稱的芽偏，但是我們在界面上顯示用戶內(nèi)容雷逆，還需要記住對應內(nèi)容的ID，因為我們需要保存選擇用戶的ID污尉，而不是它的名稱关面，那么我們應該如何操作呢？

前面也介紹了十厢，在界面上使用等太，我們需要在視圖里面添加一個層，用來放置這個標簽內(nèi)容蛮放，把它排版好就是了缩抡。

<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();//實現(xiàn)添加記錄
    },
}, '-', {
    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 () {
        //實現(xiàn)刷新欄目中的數(shù)據(jù)
        $("#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操作吼肥，代碼也很簡單了，都是我小節(jié)1介紹的內(nèi)容麻车，熟練應用就是了缀皱。

//清空用戶選擇記錄
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
        }
    });
}

最后枣察，我們就可以順利看到真正的結果了争占。

整個界面就是開始的那個了燃逻。