`
shuai1234
  • 浏览: 977964 次
  • 性别: Icon_minigender_1
  • 来自: 山西
社区版块
存档分类
最新评论

基于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 插件主要的用途,是用来记录用户输入的标签的,它可以在空白的地方接受输入的内容的,如下所示。

 

不过这个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" />

简单的例子就是在需要的表单里创建一个包含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界面,一样可以做的很不错的哦。

 

基于MVC4+EasyUI的Web开发框架的系列文章:

基于MVC4+EasyUI的Web开发框架形成之旅--总体介绍

基于MVC4+EasyUI的Web开发框架形成之旅--MVC控制器的设计

基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用

基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

基于MVC4+EasyUI的Web开发框架形成之旅--框架总体界面介绍

基于MVC4+EasyUI的Web开发框架形成之旅--基类控制器CRUD的操作

基于MVC4+EasyUI的Web开发框架形成之旅--权限控制

基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

基于MVC4+EasyUI的Web开发框架经验总结(3)- 使用Json实体类构建菜单数据

基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

基于MVC4+EasyUI的Web开发框架经验总结(5)--使用HTML编辑控件CKEditor和CKFinder

基于MVC4+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理

基于MVC4+EasyUI的Web开发框架经验总结(7)--实现省份、城市、行政区三者联动

基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览

基于MVC4+EasyUI的Web开发框架经验总结(9)--在Datagrid里面实现外键字段的转义操作

基于MVC4+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出

基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码

基于MVC4+EasyUI的Web开发框架经验总结(12)--利用Jquery处理数据交互的几种方式

基于MVC4+EasyUI的Web开发框架经验总结(13)--DataGrid控件实现自动适应宽带高度

基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作

主要研究技术:代码生成工具、会员管理系统、客户关系管理软件、病人资料管理软件、Visio二次开发、酒店管理系统、仓库管理系统等共享软件开发
专注于Winform开发框架Web开发框架、WCF开发框架、微信门户开发框架的研究及应用。
  转载请注明出处:
撰写人:伍华聪  http://www.iqidi.com 
    
分享到:
评论

相关推荐

    ASP.NET MVC5+EasyUI企业开发框架源码

    ASP.NET MVC5+EasyUI企业开发框架源码是一款基于微软的ASP.NET MVC5技术和EasyUI前端框架构建的企业级应用开发框架。此框架旨在提供高效、稳定且易于维护的解决方案,适用于开发复杂的Web应用程序。下面将详细阐述这...

    ASP.NET WebAPI+mvc4.0+EasyUI快速开发框架+通用权限管理系统源码

    1、基于ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout的架构设计开发 2、采用MVC的框架模式,具有耦合性低、重用性高、生命周期成本低、可维护性高、有利软件工程化管理等优点 3、采用WebAPI,客户端完全摆脱了代理...

    007-ASP.NET MVC5+EasyUI企业开发框架源码.7z

    ASP.NET MVC5是一种微软开发的Web应用程序框架,用于构建可维护性和可测试性极高的Web应用。这个框架是ASP.NET的一部分,它结合了Model-View-Controller(MVC)设计模式,提供了对ASP.NET Web API的支持,使得开发...

    ASP.NET MVC5+EasyUI企业开发框架源码-

    ASP.NET MVC5是一种微软开发的开源Web应用程序框架,它结合了ASP.NET Web Forms的事件驱动模型和MVC(Model-View-Controller)设计模式,为Web应用开发提供了更灵活、可测试的架构。该框架主要面向专业开发人员,...

    一套通用的Easyui+asp.net mvc开发框架源码

    【标题】"一套通用的Easyui+asp.net mvc开发框架源码"揭示了这是一个用于构建Web应用程序的基础架构,结合了两种技术:Easyui和asp.net MVC5。Easyui是一个基于jQuery的用户界面库,提供了丰富的组件和主题,用于...

    基于ASP.NET WebAPI+mvc4.0+EasyUI快速开发框架通用权限管理系统源码+说明教程文档.zip

    基于ASP.NET WebAPI+mvc4.0+EasyUI快速开发框架通用权限管理系统源码+说明教程文档: 1、基于ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout的架构设计开发 2、采用MVC的框架模式,具有耦合性低、重用性高、生命周期...

    基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用

    在基于MVC4+EasyUI的Web开发框架中,界面控件是构建用户交互界面的关键元素。EasyUI是一个轻量级的JavaScript库,它提供了一系列的组件,使得开发者能够快速地构建美观且功能丰富的Web应用界面。在本文中,我们将...

    asp.netMVC4+Shop+easyui.zip(2014-01-05)

    asp.netMVC4+Shop+easyui.zip(2014-01-05)

    【ASP.NET编程知识】基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用.docx

    【ASP.NET编程知识】基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用 在ASP.NET的Web应用开发中,经常会遇到文件上传的需求,而Uploadify是一款非常实用的JQuery插件,它能实现无刷新的文件上传功能。...

    ASP.NET MVC4+EasyUI+三层工厂模式 实现权限管理系统.rar

    ASP.NET MVC4+EasyUI+三层工厂模式 实现权限管理系统 其中Entity为模型实体层类库;DAL为数据访问层类库,主要负责数据库操作;BLL为业务逻辑类库,Common为公共帮助类库,WebUI为用户层。

    C# MVC4+EasyUI 管理系统完整源码

    1. 本例子采用Vs2012编译(其它VS版本可以转换后使用) 2. MVC + easyUI + sqlserver2005(及以上) 3. 主要功能:新增、修改、删除、分页、表格多表头、表格行内编辑、导出Excel文件、上传图片、权限设置。

    ASP.NET MVC5+EasyUI 企业开发框架源码

    开发工具:VS2013,数据库:Sqlserver2012 开发语言:Asp.net MVC5 ,界面UI:jquery easyui1.4.4,包含框架权限管理部分核心功能,是一套基础的BS开发框架,权限管理到按钮级别,代码也是高质量、清晰、简介、含注释...

    基于ASP.NET MVC4+JQuery easyui的企业管理系统开发案例源码

    《基于ASP.NET MVC4+JQuery easyui的企业管理系统开发详解》 在当今信息化时代,企业管理系统已经成为企业管理不可或缺的一部分。本文将深入探讨一个基于ASP.NET MVC4框架和JQuery EasyUI库构建的企业管理系统的...

    MVC4+EasyUI商城源码

    【MVC4+EasyUI商城源码】是一个基于ASP.NET MVC4框架和EasyUI前端库构建的电子商务系统源代码。这个项目旨在提供一个完整的在线购物平台的实现,可以帮助开发者理解和学习如何在实际环境中运用MVC架构和EasyUI设计...

    C#基于MVC+EasyUI+ECharts后台管理系统完整源码

    是在我之前上传的基础上修改的,添加了一些新功能和图形报表 1. 本例子采用Vs2012编译(其它VS版本可以转换后使用) 2. MVC + easyUI + sqlserver2014 + ECharts 3. 主要功能:新增、修改、删除、分页、导出Excel文件、...

Global site tag (gtag.js) - Google Analytics