Mobiscroll控件动态绑定数据

怼烎@ 2021-09-12 07:52 462阅读 0赞

用Mobiscroll 可实现IOS系统自带的选择器控件效果，支持几乎所有的移动平台(IOS, Android, BlackBerry, Windows Phone 8, Amazon Kindle)，当然在PC的浏览器上跑，效果也还不错。

Mobiscroll控件动态绑定数据

这里以一个动态绑定城市选择框为实例。注意本实例使用了ASP.NET MVC。

页面代码：

@{
        Layout = null;
        ViewBag.Title = "Mobiscroll控件动态绑定数据";
    }
    
    
    <link href="~/Content/css/mobiscroll.custom-2.15.1.min.css" rel="stylesheet" />
    
    <span>城市：</span>
    <select id="selCity" onchange="ChangeCity()"></select>
    <p id="spCity"></p>
    
    
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/mobiscroll.custom-2.15.1.min.js"></script>
    
    <script>
        $(document).ready(function () {
            var data = GetCityList();     //获取城市列表
    
            var arrDept = new Array();   //绑定的数据
            for (var i = 0; i < data.length; i++) {
                var Dept = new Object();
                Dept.value = data[i];
                Dept.text = data[i],
                arrDept.push(Dept);
            }
    
            $('#selCity').mobiscroll().select({
                theme: 'mobiscroll',
                lang: 'zh',
                display: 'bottom',
                minWidth: 200,
                data: arrDept
            });
    
        });
    
        //获取城市列表
        function GetCityList()
        {
            var result = null;
            $.ajax({
                type: "post",
                url: '@Url.Action("GetCityList", "Home")',
                cache: false,
                async: false,
                success: function (data) {
                    result = data;
                }
            });
            return result;
        }
    
        function ChangeCity() {
            var city = $('#selCity').mobiscroll('getVal');
            $("#spCity").html("您选择的城市：" + city);
        }
    </script>

控制器代码：

/// <summary>
    /// 获取城市列表
    /// </summary>
    /// <returns></returns>
    public JsonResult GetCityList()
    {
        List<string> cityList = new List<string>();
        cityList.Add("北京");
        cityList.Add("上海");
        cityList.Add("深圳");
        cityList.Add("广州");
        return Json(cityList);
    }

Mobiscroll官方网站：https://www.mobiscroll.com/