起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2605|回复: 11

[处理中] 生成gridselect或组件select

[复制链接]

88

主题

284

帖子

391

积分

中级会员

Rank: 3Rank: 3

积分
391
QQ
发表于 2017-11-14 10:03:06 | 显示全部楼层 |阅读模式
您好!现用action查询语句查询到图中的数组返回到一个.w界面,页面接收数据后,想通过property(用“,”分隔开)动态生成select组件效果为:
表面: select下拉(有全粒面,半粒面,磨面,轻修面,修面,贴膜,反毛 ,毛皮这8个选项)
反面: select下拉(有1,2,3,4,这4个选项)
生成select的个数根据查询到的记录数动态生成,
这个应该怎么实现,关于动态生成select  并动态生成select选项有参考代码么?需要动态生成data组件把property字段的值放到里面再生成select 绑定对应的data么?还有在用户下拉选择select后怎样获取用户选到的值?
1.png

91

主题

13万

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
34363
发表于 2017-11-14 10:24:29 | 显示全部楼层
获取到数据后,可以获取字段的值,然后js中字符串分隔遍历,data调用newData把遍历的数据新增到data中
动态创建的select关联这个data

动态创建参考
引用var select = require("$UI/system/components/justep/select/select");

  1.         Model.prototype.button14Click = function(event) {
  2.                 var parentNode = this.getElementByXid("content2");
  3.                 var options = {
  4.                         parentNode : parentNode,
  5.                         xid : 'select1',
  6.                         class : "form-control x-edit",
  7.                         'bind-ref' : "data2.ref('fName')",
  8.                         'bind-options' : "data1.datas",
  9.                         'bind-optionsLabel' : "fName",
  10.                         'bind-optionsValue' : "fValue"
  11.                 };
  12.                 new select(options);
  13.         };
复制代码
远程的联系方法QQ1392416607,添加好友时,需在备注里注明其论坛名字及ID,公司等信息
发远程时同时也发一下帖子地址,方便了解要解决的问题  WeX5教程  WeX5下载



如按照该方法解决,请及时跟帖,便于版主结贴
回复 支持 反对

使用道具 举报

88

主题

284

帖子

391

积分

中级会员

Rank: 3Rank: 3

积分
391
QQ
 楼主| 发表于 2017-11-14 10:39:57 | 显示全部楼层
本帖最后由 wto.2008 于 2017-11-14 10:41 编辑
jishuang 发表于 2017-11-14 10:24
获取到数据后,可以获取字段的值,然后js中字符串分隔遍历,data调用newData把遍历的数据新增到data中
动态 ...

那如果有8条记录需要分割生成8个select,是不是也要生成8个data,这个data怎么生成,里面的字段有多少个怎么定义?案例中的xiu都是‘select1’会不会有影响?
回复 支持 反对

使用道具 举报

91

主题

13万

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
34363
发表于 2017-11-14 10:44:43 | 显示全部楼层
1.可以用一个data,把数据都新增都一个data中,遍历data去找需要的数据,参考http://docs.wex5.com/comps-select/#008中最后一个案例
2.动态创建的设置不一样的xid,xid不能重复
远程的联系方法QQ1392416607,添加好友时,需在备注里注明其论坛名字及ID,公司等信息
发远程时同时也发一下帖子地址,方便了解要解决的问题  WeX5教程  WeX5下载



如按照该方法解决,请及时跟帖,便于版主结贴
回复 支持 反对

使用道具 举报

88

主题

284

帖子

391

积分

中级会员

Rank: 3Rank: 3

积分
391
QQ
 楼主| 发表于 2017-11-14 15:33:59 | 显示全部楼层
jishuang 发表于 2017-11-14 10:44
1.可以用一个data,把数据都新增都一个data中,遍历data去找需要的数据,参考http://docs.wex5.com/comps-se ...

意思是我把property 里面的分割值放入itemdata中进行分类,然后下拉值放入mainDATA是么?那这两个data在js中怎么创建出来并给他们定义字段和属性呢?
回复 支持 反对

使用道具 举报

91

主题

13万

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
34363
发表于 2017-11-14 15:49:42 | 显示全部楼层
bind-ref和option关联的要是两个data啊

bind-ref关联的是你选择值后填充给谁
option中是从谁中下拉关联数据
model中添加一个data,自己给data定义一个主键字段和一个存你下拉数据的字段,自定获取到值后分隔调用这个data的newData给这个字段赋值
然后在select中通过定义函数的方式从这data中获取下拉需要的数据
远程的联系方法QQ1392416607,添加好友时,需在备注里注明其论坛名字及ID,公司等信息
发远程时同时也发一下帖子地址,方便了解要解决的问题  WeX5教程  WeX5下载



如按照该方法解决,请及时跟帖,便于版主结贴
回复 支持 反对

使用道具 举报

88

主题

284

帖子

391

积分

中级会员

Rank: 3Rank: 3

积分
391
QQ
 楼主| 发表于 2017-11-14 17:07:22 | 显示全部楼层
本帖最后由 wto.2008 于 2017-11-14 17:13 编辑
jishuang 发表于 2017-11-14 15:49
bind-ref和option关联的要是两个data啊

bind-ref关联的是你选择值后填充给谁

还有个问题是select组件可以实现多选么,不行的话用gridselct动态生成能不能实现这个需求呢?一般推荐用哪一种
回复 支持 反对

使用道具 举报

91

主题

13万

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
34363
发表于 2017-11-14 17:16:53 | 显示全部楼层
select没有多选的设置
gridselect动态创建如下:
var GridSelect = require("$UI/system/components/justep/gridSelect/gridSelect");
  1.         Model.prototype.button16Click = function(event) {
  2.        
  3.                 var parentNode = this.getElementByXid("content2");
  4.                 var option = {
  5.                         xid : 'dGridSelect',
  6.                         optionCfg : {
  7.                                 data : 'data1',
  8.                                 value : 'fName',
  9.                                 columns : [ {
  10.                                         name : 'fName'
  11.                                 } ]
  12.                         },
  13.                         'bind-ref' : "data2.ref('fName')",
  14.                         multiselect : true,
  15.                         parentNode : parentNode
  16.                 };
  17.                 new GridSelect(option);
  18.         };
复制代码


不同的gridSelect下拉就需要用不同的data,不能像select那样定一个data,然后在函数中处理下拉的数据
远程的联系方法QQ1392416607,添加好友时,需在备注里注明其论坛名字及ID,公司等信息
发远程时同时也发一下帖子地址,方便了解要解决的问题  WeX5教程  WeX5下载



如按照该方法解决,请及时跟帖,便于版主结贴
回复 支持 反对

使用道具 举报

88

主题

284

帖子

391

积分

中级会员

Rank: 3Rank: 3

积分
391
QQ
 楼主| 发表于 2017-11-14 17:28:47 | 显示全部楼层
jishuang 发表于 2017-11-14 17:16
select没有多选的设置
gridselect动态创建如下:
var GridSelect = require("$UI/system/components/justep ...

那用gridselect的话 有8条数据想生成8个gridselect是要创建8个data的意思么?
回复 支持 反对

使用道具 举报

91

主题

13万

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
34363
发表于 2017-11-14 17:32:19 | 显示全部楼层
是的
远程的联系方法QQ1392416607,添加好友时,需在备注里注明其论坛名字及ID,公司等信息
发远程时同时也发一下帖子地址,方便了解要解决的问题  WeX5教程  WeX5下载



如按照该方法解决,请及时跟帖,便于版主结贴
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2022-1-17 09:59 , Processed in 0.060162 second(s), 26 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表