请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
2
帖子
0
勋章
38
Y币

基于Framework7的自定义数据源Selector解决方案

[复制链接]
发表于 2015-8-18 12:01:27
本帖最后由 juneryo 于 2015-8-18 18:08 编辑

关于自定义数据源的级联功能的select,一直没有比较好的方案,基于F7的方案,目前在我个人看来,可能是让我感觉最好的一个了。
(至于Framework7是啥,这个大家可以自行搜索,当然我这里用的是Framework7Plus)
首先看效果图:


然后上代码:

首先引用css:

  1. <link rel="stylesheet" type="text/css" href="../../css/f7plus/ios/framework7.ios.min.css" />
  2. <link rel="stylesheet" type="text/css" href="../../css/f7plus/ios/framework7.ios.colors.min.css" />
复制代码

然后是html代码:
  1. <li class="aui-list-view-cell2">
  2.   <div class="aui-input-row">
  3.     <label>商户所在地</label>
  4.     <input type="text" placeholder="商户所在地" readonly="readonly" id="mer_provid_city_area"/>
  5.   </div>
  6. </li>
复制代码

然后引用js:
  1. <script type="text/javascript" src="../../script/f7plus/framework7.min.js" ></script>
  2. <script type="text/javascript">
  3. //定义数据源
  4. var provs = {
  5.     v: ['P100', 'P200'],
  6.     dv: ['游戏', '电影']
  7. };
  8. var citys = {
  9.     P100: {
  10.         v: ['C110', 'C120'],
  11.         dv: ['RPG', 'ACT']
  12.     },
  13.     P200: {
  14.         v: ['C210', 'C220'],
  15.         dv: ['动作片', '灾难片']
  16.     }
  17. };
  18. var areas = {
  19.     C110: {
  20.         v: ['A111', 'A112'],
  21.         dv: ['最终幻想', '勇者斗恶龙']
  22.     },
  23.     C120: {
  24.         v: ['A121', 'A122'],
  25.         dv: ['鬼泣', '战神']
  26.     },
  27.     C210: {
  28.         v: ['A211', 'A212'],
  29.         dv: ['功夫', '拳霸']
  30.     },
  31.     C220: {
  32.         v: ['A221', 'A222'],
  33.         dv: ['后天', '泰坦尼克号']
  34.     }
  35. };
  36. //初始化
  37. var APP = new Framework7();
  38. var pickerDependent = APP.picker({
  39.     input: '#mer_provid_city_area',
  40.     rotateEffect: false,
  41.     formatValue: function (p, values, displayValues) {
  42.         //将values放入自定义hidden中
  43.         return displayValues;
  44.     },
  45.     cols: [{
  46.         textAlign: 'left',
  47.         values: provs.v,
  48.         displayValues: provs.dv,
  49.         onChange: function (p, v, dv) {
  50.             if(p.cols[1].replaceValues){
  51.                 p.cols[1].replaceValues(citys[v].v, citys[v].dv);
  52.                 if(p.cols[2].replaceValues){
  53.                     var vv = citys[v].v;
  54.                     p.cols[2].replaceValues(areas[vv[0]].v, areas[vv[0]].dv);
  55.                 }
  56.             }
  57.         }
  58.     }, {
  59.         textAlign: 'left',
  60.         values: citys['P100'].v,
  61.         displayValues: citys['P100'].dv,
  62.         onChange: function (p, v, dv) {
  63.             if(p.cols[2].replaceValues){
  64.                 p.cols[2].replaceValues(areas[v].v, areas[v].dv);
  65.             }
  66.         }
  67.     }, {
  68.         textAlign: 'left',
  69.         values: areas['C110'].v,
  70.         displayValues: areas['C110'].dv
  71.     }]
  72. });
  73. </script>
复制代码

以上。
目前感觉就是定义数据源比较麻烦一点。
如果大家有更好的自定义数据源方案,不防也告知在下。








本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X
1682
帖子
10
勋章
38
Y币
感谢分享
您需要登录后才可以回帖 登录

本版积分规则