|
基于Framework7的自定义数据源Selector解决方案
[复制链接]
本帖最后由 juneryo 于 2015-8-18 18:08 编辑
关于自定义数据源的级联功能的select,一直没有比较好的方案,基于F7的方案,目前在我个人看来,可能是让我感觉最好的一个了。
(至于Framework7是啥,这个大家可以自行搜索,当然我这里用的是Framework7Plus)
首先看效果图:
然后上代码:
首先引用css:
- <link rel="stylesheet" type="text/css" href="../../css/f7plus/ios/framework7.ios.min.css" />
- <link rel="stylesheet" type="text/css" href="../../css/f7plus/ios/framework7.ios.colors.min.css" />
复制代码
然后是html代码:
- <li class="aui-list-view-cell2">
- <div class="aui-input-row">
- <label>商户所在地</label>
- <input type="text" placeholder="商户所在地" readonly="readonly" id="mer_provid_city_area"/>
- </div>
- </li>
复制代码
然后引用js:
- <script type="text/javascript" src="../../script/f7plus/framework7.min.js" ></script>
- <script type="text/javascript">
- //定义数据源
- var provs = {
- v: ['P100', 'P200'],
- dv: ['游戏', '电影']
- };
- var citys = {
- P100: {
- v: ['C110', 'C120'],
- dv: ['RPG', 'ACT']
- },
- P200: {
- v: ['C210', 'C220'],
- dv: ['动作片', '灾难片']
- }
- };
- var areas = {
- C110: {
- v: ['A111', 'A112'],
- dv: ['最终幻想', '勇者斗恶龙']
- },
- C120: {
- v: ['A121', 'A122'],
- dv: ['鬼泣', '战神']
- },
- C210: {
- v: ['A211', 'A212'],
- dv: ['功夫', '拳霸']
- },
- C220: {
- v: ['A221', 'A222'],
- dv: ['后天', '泰坦尼克号']
- }
- };
- //初始化
- var APP = new Framework7();
- var pickerDependent = APP.picker({
- input: '#mer_provid_city_area',
- rotateEffect: false,
- formatValue: function (p, values, displayValues) {
- //将values放入自定义hidden中
- return displayValues;
- },
- cols: [{
- textAlign: 'left',
- values: provs.v,
- displayValues: provs.dv,
- onChange: function (p, v, dv) {
- if(p.cols[1].replaceValues){
- p.cols[1].replaceValues(citys[v].v, citys[v].dv);
- if(p.cols[2].replaceValues){
- var vv = citys[v].v;
- p.cols[2].replaceValues(areas[vv[0]].v, areas[vv[0]].dv);
- }
- }
- }
- }, {
- textAlign: 'left',
- values: citys['P100'].v,
- displayValues: citys['P100'].dv,
- onChange: function (p, v, dv) {
- if(p.cols[2].replaceValues){
- p.cols[2].replaceValues(areas[v].v, areas[v].dv);
- }
- }
- }, {
- textAlign: 'left',
- values: areas['C110'].v,
- displayValues: areas['C110'].dv
- }]
- });
- </script>
复制代码
以上。
目前感觉就是定义数据源比较麻烦一点。
如果大家有更好的自定义数据源方案,不防也告知在下。
|
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|