基於MVC4+EasyUI的Web開發框架經驗總結（1）-利用jQuery Tags Input 插件顯示選擇記錄

時間 2019-11-10

標籤基於 mvc4+easyui mvc easyui web 開發框架經驗總結利用 jquery tags input 插件顯示選擇記錄欄目 HTML 简体版

原文原文鏈接

最近花了很多時間在重構和進一步提煉個人Web開發框架上，力求在用戶體驗和界面設計方面，和Winform開發框架保持一致，而在Web上，我主要採用EasyUI的前端界面處理技術，走MVC的技術路線，在重構完善過程當中，不少細節花費很多時間進行研究和提煉，一步步走過來，也積累了很多經驗，本系列將主要介紹我在進一步完善個人Web框架基礎上積累的經驗進行分享，本隨筆主要介紹利用jQuery Tags Input 插件顯示選擇記錄。javascript

我在利用jQuery Tags Input 插件以前，一直想找一個合適的Jquery插件或者合適的作法，來實現我Winform框架裏面權限系統的一個用戶選擇場景，就是可以記錄用戶的選擇，並最終可以保存到數據庫裏面去。在WInform裏面，我能夠用自定義控件的方式，很好地實現了這個功能，可是在Web界面上，我嘗試用Jquery試過了不少方法，沒能實現這個效果，花了很多時間來尋找，終於找到這個不錯的插件。css

先來看看個人最終實現的Web界面效果，就是在權限管理系統裏面，機構包含的用戶編輯界面，或者是角色包含人員的編輯界面裏面，提供一個地方來記錄用戶的選擇，用戶確認後，能夠把記錄的內容保存到數據庫裏面。html

上圖下面一個區域「選擇的用戶」裏面就是我用到這個控件來展現用戶選擇的人員信息。前端

其實這個jQuery Tags Input 插件主要的用途，是用來記錄用戶輸入的標籤的，它能夠在空白的地方接受輸入的內容的，以下所示。java

不過這個JQuery的插件，也可以屏蔽用戶的輸入，由咱們經過Javaascript進行添加便可，所以就正好符合我上面例子的需求了，這個jquery插件的下載地址是（http://xoxco.com/projects/code/tagsinput/），GitHub的下載地址是（https://github.com/xoxco/jQuery-Tags-Input）。jquery

一、jQuery Tags Input 插件的使用

應用腳本和樣式文件，以下所示。git

<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

因爲在MVC項目裏面中集成使用，所以你須要整理好合適的路徑，個人項目代碼引用的路徑以下所示。github

    @*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，並用逗號隔開。ajax

<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'
});

二、在項目中使用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
                    }
                });
            }