95992828九五至尊2

EasyUI的Web开发框架经验统计882828九五至尊手机版,插件展现拔取记录

一月 18th, 2019  |  882828九五至尊手机版

近些年花了众多时刻在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我重点利用EasyUI的前端界面处理技术,走MVC的技巧途径,在重构完善进程中,很多细节费用不少年华开展研讨和提纯,一步步走过来,也积累了不少经验,本系列将第一介绍自己在越来越周详自身的Web框架基础上积累的经验进行分享,本小说首要介绍利用jQuery
Tags Input 插件突显拔取记录。

为了增强客户体验和开展局部技术探讨,现在正准备把自家自己的客户关系管理连串CRM在做一个Web的版本,因而对基于MVC的Web界面继续拓展局部研商和优化,力求在职能和界面上保持和Winform一致,本文紧要介绍在自我的CRM系统中用到的全国省份、城市、行政区三者的三种意义,在Winform上得以完成没问题,在Web上按照MVC的EasyUI已毕,同样也从未问题。

我在运用jQuery Tags Input
插件之前,平昔想找一个得体的Jquery插件或者适度的做法,来完毕自我Winform框架之中权限系统的一个用户选取场景,就是可以记录用户的抉择,并最终可以保留到数据库里面去。在WInform里面,我可以用自定义控件的点子,很好地促成了这个作用,不过在Web界面上,我尝试用Jquery试过了很多格局,没能已毕那个功用,花了诸多时间来查找,终于找到那么些正确的插件。

1、Winform上省份、城市、行政区的联动效应

在很早的时候,我在Winform框架的一篇小说《Winform开发框架之字典管理模块的立异,附上最新二〇一三年全国最新县及县之上行政区划代码sql脚本》中牵线了在Winform版本里面的三者联动效果,界面如下所示。

882828九五至尊手机版 1

并附赠送了自身要好根据计算局数据修改整理后的举国省份、城市、行政区的多少脚本。全国地方的省区、城市、区县这几个新政区划的新颖Sql脚本下载地址如下所示: http://files.cnblogs.com/wuhuacong/CityDistrict.rar

里面根本透过对控件本身选取的事件进行拍卖,然后动态获取不一样的数据开展呈现,几乎的逻辑就是先起初化省份数量,然后省份控件选拔时接触获取该省份下的城池音讯,城市控件拔取的时候接触获取该城市的行政区数据,大概的代码如下所示。

        private void txtProvince_SelectedIndexChanged(object sender, EventArgs e)
        {
            CListItem item = this.txtProvince.SelectedItem as CListItem;
            if (item != null)
            {
                string provinceId = item.Value;
                this.txtCity.Properties.BeginUpdate();
                this.txtCity.Properties.Items.Clear();
                List<CityInfo> cityList = BLLFactory<City>.Instance.GetCitysByProvinceID(provinceId);
                foreach (CityInfo info in cityList)
                {
                    this.txtCity.Properties.Items.Add(new CListItem(info.CityName, info.ID.ToString()));
                }
                this.txtCity.Properties.EndUpdate();
            }
        }

        private void txtCity_SelectedIndexChanged(object sender, EventArgs e)
        {
            CListItem item = this.txtCity.SelectedItem as CListItem;
            if (item != null)
            {
                string cityId = item.Value;
                this.txtDistrict.Properties.BeginUpdate();
                this.txtDistrict.Properties.Items.Clear();
                List<DistrictInfo> districtList = BLLFactory<District>.Instance.GetDistrictByCity(cityId);
                foreach (DistrictInfo info in districtList)
                {
                    this.txtDistrict.Properties.Items.Add(new CListItem(info.DistrictName, info.ID.ToString()));
                }
                this.txtDistrict.Properties.EndUpdate();
            }
        }

先来探视我的末段促成的Web界面效果,就是在权力管理系列里头,机构涵盖的用户编辑界面,或者是角色包罗人口的编撰界面里面,提供一个地点来记录用户的挑选,用户确认后,可以把记录的情节保留到数据库里面。

2、基于MVC+EasyUI的Web上贯彻省份、城市、行政区的联动

有了举国上下的省区、城市、行政区数据,加上对三者的数码访问进行了打包,参考Winform版本的贯彻进程,当然在EasyUI的Web上完成起来,也是足以的。

俺们先来探视落成的效应,然后在条分缕析内部的完毕思路和代码,基于MVC+EasyUI的兑现效益如下所示。

882828九五至尊手机版 2

882828九五至尊手机版 3 
 882828九五至尊手机版 4   

882828九五至尊手机版 5

地方的机能是如何得以落成的吗?

882828九五至尊手机版 6

1)定义相关的控制器函数,提供Json数据源

为了促成控件的多寡绑定,大家第一步必要为这多少个控件定义一些控制器的函数,方便获取相关的数量。其中的CListItem有Text
和 Value两个属性,可以用来绑定操作。

        /// <summary>
        /// 获取所有的省份
        /// </summary>
        /// <returns></returns>
        public ActionResult GetAllProvince()
        {
            List<CListItem> treeList = new List<CListItem>();

            List<ProvinceInfo> provinceList = BLLFactory<Province>.Instance.GetAll();
            foreach (ProvinceInfo info in provinceList)
            {
                treeList.Add(new CListItem(info.ProvinceName, info.ProvinceName));
            }
            return ToJsonContent(treeList);
        }

        /// <summary>
        /// 根据省份名称获取对应的城市列表
        /// </summary>
        /// <param name="provinceName">省份名称</param>
        /// <returns></returns>
        public ActionResult GetCitysByProvinceName(string provinceName)
        {
            List<CListItem> treeList = new List<CListItem>();

            List<CityInfo> cityList = BLLFactory<City>.Instance.GetCitysByProvinceName(provinceName);
            foreach (CityInfo info in cityList)
            {
                treeList.Add(new CListItem(info.CityName, info.CityName));
            }

            return ToJsonContent(treeList);
        }

        /// <summary>
        /// 根据城市名称获取对应的行政区划类别
        /// </summary>
        /// <param name="cityName">城市名称</param>
        /// <returns></returns>
        public ActionResult GetDistrictByCityName(string cityName)
        {
            List<CListItem> treeList = new List<CListItem>();

            string condition = string.Format("");
            List<DistrictInfo> districtList = BLLFactory<District>.Instance.GetDistrictByCityName(cityName);
            foreach (DistrictInfo info in districtList)
            {
                treeList.Add(new CListItem(info.DistrictName, info.DistrictName));
            }

            return ToJsonContent(treeList);
        }

上图上面一个区域 “选拔的用户
里面就是自家动用那几个控件来彰显用户挑选的人手音讯。

2)在视图里面添加控件绑定数据的JS代码

为了得以已毕几个ComboBox的控件的联动功能,我们须求利用JS代码落成多少的绑定,并绑定控件的Change事件,一旦用户挑选之中一个,那么可能接触其余别的一个获取数据源。

        //绑定省份、城市、行政区信息
        function BindProvinceCity() {
            var province = $('#Province').combobox({
                valueField: 'Value', //值字段
                textField: 'Text', //显示的字段
                url: '/Province/GetAllProvince',
                editable: true,
                onChange: function (newValue, oldValue) {
                    $.get('/City/GetCitysByProvinceName', { provinceName: newValue }, function (data) {
                        city.combobox("clear").combobox('loadData', data);
                        district.combobox("clear")
                    }, 'json');
                }
            });

            var city = $('#City').combobox({
                valueField: 'Value', //值字段
                textField: 'Text', //显示的字段
                editable: true,
                onChange: function (newValue, oldValue) {
                    $.get('/District/GetDistrictByCityName', { cityName: newValue }, function (data) {
                        district.combobox("clear").combobox('loadData', data);
                    }, 'json');
                }
            });

            var district = $('#District').combobox({
                valueField: 'Value', //值字段
                textField: 'Text', //显示的字段
                editable: true
            });
        }

下一场界面上急需摆放那一个控件。

                        <tr>      
                            <th>
                                <label for="Province">所在省份:</label>
                            </th>
                            <td>
                                <select class="easyui-combobox" id="Province" name="Province"  style="width:120px;"></select> 
                            </td>
                            <th>
                                <label for="City">城市:</label>
                            </th>
                            <td>
                                <select class="easyui-combobox" id="City" name="City"  style="width:120px;"></select> 
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label for="District">所在行政区:</label>
                            </th>
                            <td>
                                <select class="easyui-combobox" id="District" name="District"  style="width:120px;"></select>
                            </td>
                            <th>
                                <label for="Hometown">籍贯:</label>
                            </th>
                            <td>
                                <select class="easyui-combobox" id="Hometown" name="Hometown"  style="width:120px;"></select>
                            </td>
                        </tr>

OK,我们贯彻了数据的起头化绑定,一旦用户接纳了省份数量,那么相应的城市数目列表也会更新了,选用城市,那么行政区也跟着更新了,这一体就像都搞定了?

还从未,还索要考虑对编辑状态下的数目赋值,如果实体类的音信里面,已经有数量了,那么绑定控件后,是否会正常彰显呢?

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

3)控件内容的绑定

貌似处境下,大家透过Ajax操作来拿到控制器的数码,然后绑定到界面控件上,如下所示。

            $.getJSON("/Contact/FindByID?id=" + ID, function (info) {
                //赋值有几种方式:.datebox('setValue', info.Birthday);.combobox('setValue', info.Status);.val(info.Name);.combotree('setValue', info.PID);
                $("#ID").val(info.ID);
                $("#Customer_ID").val(info.Customer_ID);
                $("#HandNo").val(info.HandNo);
                $("#Name").val(info.Name);

                $("#Province").combobox('setValue', info.Province);
                $("#City").combobox('setValue', info.City);
                $("#District").combobox('setValue', info.District);
                $("#Hometown").combobox('setValue', info.Hometown);

                ..................
            });
        }

万一没有联动的功用处理,一般景观下,这种赋值的操作,小问题的,可是自己发觉使用这种方法操作都会和行政区的数额显示不健康,初始百思不得其解,测试了三种方法操作,都尚未使得城市、行政区的界面控件可以正常突显。

原来发现,造成这种题材的原由,可能是运用异步操作,它们的联动效应还从未处理已毕,就举行赋值操作了,导致可能数量不可能正常突显。

所以改用设置为一起的操作,如下红色代码所示,把async设置为false就意味着同步,测试后意识这一个装置后,界面控件可以正常突显了,一切都健康,终于解决心头大患了。

            //使用同步方式,使得联动的控件正常显示
            $.ajaxSettings.async = false;

            //首先用户发送一个异步请求去后台实现方法
            $.getJSON("/Contact/FindByID?id=" + ID, function (info) {

882828九五至尊手机版 7

上述就是自家对于平时利用的全国省份、城市、行政区的Web上的联动操作的界面效果和兑现代码,希望给大家提供一个参阅的案例,共同提升。

 

882828九五至尊手机版 8

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

 

然则那一个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控件里面,伸张几个按钮,用来操作这个标签的,也就是记录,保存和清空几个举足轻重的操作。

882828九五至尊手机版 9

上图的有些代码如下所示。

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

最后,我们就足以万事大吉看到真的的结果了。

882828九五至尊手机版 10

整套界面就是起初的百般了。

882828九五至尊手机版 11

和自家Winform权限系统里面的对应界面比较,是不是意识很接近吗?利用EasyUI创建Web界面,一样可以做的很不利的哦。

882828九五至尊手机版 12

 

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

Your Comments

近期评论

    功能


    网站地图xml地图