按照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界面效果,就是在权力管理体系里头,机构涵盖的用户编辑界面,或者是角色包含人口的编纂界面里面,提供一个地点来记录用户的选料,用户确认后,可以把记录的内容保留到数据库里面。

图片 1

上图下边一个区域 “挑选的用户
里面就是本身动用那多少个控件来体现用户采纳的人手信息。

其实那个jQuery Tags Input
插件首要的用处,是用来记录用户输入的价签的,它可以在空白的地点接受输入的始末的,如下所示。

图片 2

 

只是这一个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控件里面,扩展几个按钮,用来操作这一个标签的,也就是记录,保存和清空多少个紧要的操作。

图片 3

上图的局部代码如下所示。

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

终极,大家就足以万事大吉看到真的的结果了。

图片 4

漫天界面就是最先的要命了。

图片 5

和自己Winform权限系统之中的对应界面对比,是不是发现很相近吗?利用EasyUI创设Web界面,一样能够做的很科学的啊。

图片 6

 

遵照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)–自动生成图标样式文件和图标的挑选操作

相关文章