基于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
                    }
                });
            }