一.来看下数据数据解析
首先后台先生成一种数据格式,这种格式跟JSON差不多(不知道为什么不用JSON),查看HTML源代码
ComboBox2.Data
=
[[['Text','a'],['Value','b']],[['Text','b'],['Value','c']],[['Text','c'],['Enabled',
0
],['Value','b']],[['CssClass','comboItemHover'],['Text','d'],['Value','c'],['Id','ComboBoxItem1']],[['Text','a'],['Value','b']],[['Text','b'],['Value','c']],[['Text','c'],['Enabled',
0
],['Value','b']],[['CssClass','comboItemHover'],['Text','d'],['Value','c'],['Id','ComboBoxItem2']],[['Text','a'],['Value','b']],[['Text','b'],['Value','c']],[['Text','c'],['Enabled',
0
],['Value','b']],[['CssClass','comboItemHover'],['Text','d'],['Value','c'],['Id','ComboBoxItem3']],[['Text','a'],['Value','b']],[['Text','b'],['Value','c']],[['Text','c'],['Enabled',
0
],['Value','b']],[['CssClass','comboItemHover'],['Text','d'],['Value','c'],['Id','hello']]];
2.需要定义一个ComboBoxItem对象(自然要定义数据集合类型了),其中js也要定义,数据结构采用HashTable,查找速度快.其中定义了一个JavaScriptArray用来转换数据
private string BuildStorage()
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
JavaScriptArray arNodeList = new JavaScriptArray();
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
foreach (ComboBoxItem oItem in this.Items)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
ProcessItem(oItem, arNodeList);
}
string strList=arNodeList.ToString();
return strList;
}
private void ProcessItem(ComboBoxItem oItem, ArrayList arNodeList)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
ArrayList itemProperties = new ArrayList();
foreach (string propertyName in oItem.Properties.Keys)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
switch (propertyName.ToLower())
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
// bools
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
case "enabled": itemProperties.Add(new object[]
{ "Enabled", oItem.Enabled }); break;
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
// normal string handling
default:
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
itemProperties.Add(new object[]
{ propertyName, oItem.Properties[propertyName] });
break;
}
}
arNodeList.Add(itemProperties);
}
3.前台处理数据
数据得到以后就要处理
前段的ComboBox(Initialize)初始化时会调用
Render方法,Render方法会调用RenderDropDown方法,RenderDropDown方法调用RenderItem方法,把每项都呈现出来
二.展开下拉框
看这部分花了我一些时间.
本来的话展开下拉框和关闭下拉框只需要设置一个css样式就可以了的.事情上确实可以这么做.
ComboBox同时还提供了2个属性
CollapseSlide用于设置滑动效果,
CollapseDuration用于设置滑动效果的持续时间.
客户端api提供了Collapse和Expand方法,用于关闭和展开下拉框.按照我的思维就是直接设置下
xx.style.display="none"了事.这样就可以用了.为了给控件加上滑动时的效果.这个两个方法基本没做什么.而是调用了相关的方法如ComponentArt_ComboBox_CollapseStep方法.
这里涉及到递归的使用.在Collapse方法中设置了一个当前时间this.CollapseStartTime=(new Date()).getTime();
然后ComponentArt_ComboBox_CollapseStep方法再获取现在时间与CollapseStartTime相比较,时间差与
CollapseDuration属性相比较.当时间差达到CollapseDuration属性值时,即递归结束.
看代码
1.
ComponentArt_ComboBox.prototype.Collapse
=
function
()
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if(this.Resizing)
{
return ;
}
var _20=document.getElementById(this.Id+"_DropDown");
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if(_20&&_20.style.display!="none")
{
_20.style.overflow="hidden";
this.CollapseElement=_20;
//设置当前时间
this.CollapseStartTime=(new Date()).getTime();
var _21=_qFF(_20);
//递归调用
ComponentArt_ComboBox_CollapseStep(this,_21);
//_20.style.display="none";
}
this.Expanded=false;
}
;
2.
window.ComponentArt_ComboBox_CollapseStep
=
function
(_d, _e)
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (!_d.CollapseElement)
{
return;
}
var _f = (new Date()).getTime()-_d.CollapseStartTime;
var _10 = ComponentArt_SlidePortionCompleted(_f, _d.CollapseDuration, _d.CollapseSlide);
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (_10 == 1)
{
//alert(_d.CollapseElement.style.height);
//_d.CollapseElement.style.height = 280+"px";
//隐藏
_d.CollapseElement.style.display = "none";
_d.CollapseElement = null;
_d.HideOverlay();
var _11 = _d.get_events().getHandler("collapse");
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (_11)
{
_11(_d, Sys.EventArgs.Empty);
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
} else
{
var _12 = Math.ceil((1-_10)*_e);
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (_d.ExpandDirection == 1)
{
_d.CollapseElement.style.top = (_d.ExpandBaseLine-_12)+"px";
}
//高度的滚动在此更改
_d.CollapseElement.style.height = _12+"px";
//alert(_d.CollapseElement.style.height);
//递归调用
setTimeout("ComponentArt_ComboBox_CollapseStep("+_d.Id+","+_e+");", ComponentArt_ComboBox_SlideDelay);
}
//document.getElementById("aa").innerHTML+="_f---------"+_f+"_10-------"+_10+"-----------"+_d.CollapseElement.style.height+"<br>"
//alert("_10"+_10+"<br>"+_d.CollapseElement.style.height);
}
;
3.
window.cart_slidetype_none
=
0
;
window.cart_slidetype_exponentialaccelerate
=
1
;
window.cart_slidetype_exponentialdecelerate
=
2
;
window._q87
=
3
;
window.cart_slidetype_quadraticaccelerate
=
4
;
window.cart_slidetype_quadraticdecelerate
=
5
;
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
/**/
/**
*
* @param {Object} 时间差
* @param {Object} 持续时间
* @param {Object} 效果
*/
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
window.ComponentArt_SlidePortionCompleted
=
function
(_4a,_4b,_4c)
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if(_4c==cart_slidetype_none||_4a>=_4b)
{
return 1;
}
var _4d=(_4c==cart_slidetype_exponentialaccelerate)||(_4c==cart_slidetype_quadraticaccelerate);
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if(_4d)
{
_4a=_4b-_4a;
}
//4a(时间差计算)与_4b相比较
var _4e=_4a/_4b;
var _4f;
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
switch(_4c)
{
case _q87:
_4f=_4e;
break;
case cart_slidetype_exponentialdecelerate:
case cart_slidetype_exponentialaccelerate:
_4f=1-Math.pow(1/300,_4e);
break;
case cart_slidetype_quadraticdecelerate:
case cart_slidetype_quadraticaccelerate:
_4f=Math.pow(_4e,2);
break;
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if(_4d)
{
_4f=1-_4f;
}
//document.getElementById("aa").innerHTML+=Math.min(Math.max(0,_4f),1)+"<br>";
return Math.min(Math.max(0,_4f),1);
}
;
看个截图
好了,结束