背景:
由于下拉框的选项很多,有很多需求是类似默认选中下拉框的第一个值或者以下拉框第一个值作为查询条件,
在论坛看到多是通过sql去给控件绑定值:
缺点: 1 需要多查询数据库
2 不通用,如果对于有很多下拉框的选项那是需要些很多sql的
so 我们需要能够通过js去实现默认的点击效果和选中效果,简化用户的操作。
解决方案:
在我上一篇 所有控件 绑定点击事件显示下拉 时间 树形 多选框等 的基础上进行扩展:
http://bbs.fanruan.com/thread-96375-1-1.html
在参数初始化完成之前,页面是不会进行查询操作的,所以我们需要在这个阶段进行绑定,在这个阶段所有的参数控件默认已经初始化完成,默认值已经存在了
下拉框的初始化是异步加载的,需要我们在点击的时候(只有第一次)才会去加载数据,为了完成初始化数据,需要我们自己在参数加载完成后的事件中添加一个主动触发的事件,
主动触发事件后,所有下拉框的数据已经加载完毕了,这时候我们就可以触发下拉框的默认的第一个选项的点击事件。
注意:如果是通过js默认选中的第一个那么下拉框的值是不会作为查询条件的(自动查询,这里的自动查询是指如下设置的,后期会提供具体的解决这类问题的方案,敬请期待!)
所以请注意使用场景,如果要支持自动查询(指通过脚本去主动触发的查询_g().parameterCommit();)这里的参数是支持的
部分js代码说明如下:
$.each(this.options.form.name_widgets,function(i,item){
if (item.options.type !=='label' && (item.options.type==='combo')) {
//设置点击事件
var self = item;
self.options.name4Empty = "全部选择" ;//下拉框替换默认的 不选
self._createVieList(false); //不显示加载选项,如果不设置为false在进入页面的时候会看到有一个加载的框,自己可以尝试。
setTimeout(function(){
//默认选中第一个,触发
self.$view.find("div").eq(0).click();
},0)
$('input',item.element).click(function(){
if(self.$view.css('display')=='none'){
self.onTriggerClick();
}
});
}
});
//自动查询,替换默认的自动查询
setTimeout(function(){
_g().parameterCommit();
},50);
效果图:
具体参照:附件cpt文件。
另:论坛中有一个需求描述的是一个数据集,需要分两个柱形图显示,在cpt中有具体的解决方案
只要能把数据梳理清楚,凡是业务方面认为能行的,基本上都可以实现。
柱状图分页显示问题
http://bbs.fanruan.com/thread-96410-1-1.html
路漫漫其修远兮,吾将上下而求索!
编辑于 2017-9-19 10:19
|