本文属spanzhang原创,其blog地址为:http://blog.csdn.net/spanzhang。引用或转贴请注明出处,谢谢!!
在开发b/s应用时,经常需要以列表的形式显示数据,但html的table却显得很不够用。这里给出的是我自己的listview模拟控件,它主要有如下几个特点:
1、header和columns都可以灵活配置;
2、columns可以拖动;
3、支持单选和多选模式;
4、支持鼠标双击(引发事件)。
效果图如下:
htc组件源代码如下(htc_listview.htc):
<!--
作者:张友邦
时间:2004-12-01
描述:表格控件
-->
<!--
接口定义
-->
<public:component>
<public:property name="description" value="span listview behavior" />
<public:property name="version" value="1.0.0.0" />
<public:attach event="oncontentready" onevent="init()" />
<public:attach event="onselectstart" onevent="cancelselect()" />
<public:attach event="onresize" onevent="resize()" />
<public:attach event="onmousemove" onevent="mousemove()" />
<public:attach event="onmouseup" onevent="mouseup()" />
<public:property name="headimage" value="/spanclient/htc_listview.htc.res/headerbg.gif" />
<public:property name="splitterimage" value="/spanclient/htc_listview.htc.res/headersplit.gif" />
<public:property name="defstyle1" value="background-color: #dadff1" />
<public:property name="defstyle2" value="background-color: #b9c1dd" />
<public:property name="defstyle11" value="background-color: #000000; color: #ffffff" />
<public:property name="defstyle22" value="background-color: #000064; color: #ffffff" />
<public:property name="singleselect" value="true" />
<public:property name="freezecols" value="false" />
<public:property name="header" />
<public:property name="columns" />
<public:property name="datatable" />
<public:property name="rows" />
<public:property name="selectedrows" />
<public:method name="addcolumn" />
<public:method name="addrow" />
<public:method name="delrow" />
<public:method name="selectrow" />
<public:method name="clearselect" />
<public:event name="onselchange" id="selchange" />
<public:event name="onwantedit" id="wantedit" />
<public:event name="onheadclick" id="headclick" />
</public:component>
<!--
组件实现
-->
<script language="javascript">