Mobiscroll控件动态绑定数据

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

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

Mobiscroll控件动态绑定数据

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

页面代码:

  1. @{
  2. Layout = null;
  3. ViewBag.Title = "Mobiscroll控件动态绑定数据";
  4. }
  5. <!--添加mobiscroll样式引用-->
  6. <link href="~/Content/css/mobiscroll.custom-2.15.1.min.css" rel="stylesheet" />
  7. <span>城市:</span>
  8. <select id="selCity" onchange="ChangeCity()"></select>
  9. <p id="spCity"></p>
  10. <!--添加mobiscroll相关脚本引用-->
  11. <script src="~/Scripts/jquery-1.10.2.min.js"></script>
  12. <script src="~/Scripts/mobiscroll.custom-2.15.1.min.js"></script>
  13. <script>
  14. $(document).ready(function () {
  15. var data = GetCityList(); //获取城市列表
  16. var arrDept = new Array(); //绑定的数据
  17. for (var i = 0; i < data.length; i++) {
  18. var Dept = new Object();
  19. Dept.value = data[i];
  20. Dept.text = data[i],
  21. arrDept.push(Dept);
  22. }
  23. $('#selCity').mobiscroll().select({
  24. theme: 'mobiscroll',
  25. lang: 'zh',
  26. display: 'bottom',
  27. minWidth: 200,
  28. data: arrDept
  29. });
  30. });
  31. //获取城市列表
  32. function GetCityList()
  33. {
  34. var result = null;
  35. $.ajax({
  36. type: "post",
  37. url: '@Url.Action("GetCityList", "Home")',
  38. cache: false,
  39. async: false,
  40. success: function (data) {
  41. result = data;
  42. }
  43. });
  44. return result;
  45. }
  46. function ChangeCity() {
  47. var city = $('#selCity').mobiscroll('getVal');
  48. $("#spCity").html("您选择的城市:" + city);
  49. }
  50. </script>

控制器代码:

  1. /// <summary>
  2. /// 获取城市列表
  3. /// </summary>
  4. /// <returns></returns>
  5. public JsonResult GetCityList()
  6. {
  7. List<string> cityList = new List<string>();
  8. cityList.Add("北京");
  9. cityList.Add("上海");
  10. cityList.Add("深圳");
  11. cityList.Add("广州");
  12. return Json(cityList);
  13. }

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

发表评论

表情:
评论列表 (有 0 条评论,598人围观)

还没有评论,来说两句吧...

相关阅读

    相关 数据之Repeater

    要不是工作所迫,谁愿意用已没落的技术。 引言 前几篇的文章在说`AJAX`的内容,利用`AJAX`技术能够开发出高效运行的网站应用程序,不过在进行`B/S`项目开发