HTC是HTML Component的缩写,是IE5及后续版本浏览器所支持的客户端组件。据我个人理解,HTC就是一组以DHTML为基础封装了客户端行为的脚本,每HTC以*.htc的文件存储,一个HTC是一个客户端“类”。
对象
document 在给定的浏览器窗口中表现HTML 文档。
element 返回一份主文档中连接行为的标签的参考。
PUBLIC:ATTACH 绑定一个函数到一个事件上,因此每次事件发生在特殊对象上时函数会被调用。
PUBLIC:COMPONENT 以HTC 指明文件的内容。
PUBLIC:DEFAULTS 设定一份HTC 的默认属性。
PUBLIC:EVENT 定义一个HTC 的事件,使之暴露于包含该HTC 的文档。
PUBLIC:METHOD 定义一个HTC 的方法,使之暴露于包含该HTC 的文档。
PUBLIC:PROPERTY 定义一个HTC 的属性,使之暴露于包含该HTC 的文档。
方法
createEventObject
创建一个事件对象,当需要传递事件附加信息给PUBLIC:EVENT 元素的fire 方法时使用。
事件
oncontentready
连接了行为的元素的内容完全被解析时发生。
oncontentsave
连接了一份元素行为的一个元素的内容被保存或复制前发生。
ondetach
从一个元素解除一份行为的连接前发生。
ondocumentready
当包含行为的文档完全被解析时发生。
示例
对象
document 在给定的浏览器窗口中表现HTML 文档。
element 返回一份主文档中连接行为的标签的参考。
PUBLIC:ATTACH 绑定一个函数到一个事件上,因此每次事件发生在特殊对象上时函数会被调用。
PUBLIC:COMPONENT 以HTC 指明文件的内容。
PUBLIC:DEFAULTS 设定一份HTC 的默认属性。
PUBLIC:EVENT 定义一个HTC 的事件,使之暴露于包含该HTC 的文档。
PUBLIC:METHOD 定义一个HTC 的方法,使之暴露于包含该HTC 的文档。
PUBLIC:PROPERTY 定义一个HTC 的属性,使之暴露于包含该HTC 的文档。
方法
createEventObject
创建一个事件对象,当需要传递事件附加信息给PUBLIC:EVENT 元素的fire 方法时使用。
事件
oncontentready
连接了行为的元素的内容完全被解析时发生。
oncontentsave
连接了一份元素行为的一个元素的内容被保存或复制前发生。
ondetach
从一个元素解除一份行为的连接前发生。
ondocumentready
当包含行为的文档完全被解析时发生。
示例
< PUBLIC:COMPONENT >
< PUBLIC:PROPERTY NAME = " grid " /><!-- 返回当前的Grid,通过该属性,可以访问当前Grid的相关信息 -->
<!-- 和.Net中的DataColumn的定义类似 -->
< PUBLIC:PROPERTY NAME = " columnName " /> <!-- 列名 -->
< PUBLIC:PROPERTY NAME = " dataType " /><!-- 数据类型,如System.String,和SmartGridColumn上的DataType的值保持一致 -->
< PUBLIC:PROPERTY NAME = " allowNull " /><!-- 是否允许为空 -->
< PUBLIC:PROPERTY NAME = " scale " />
< PUBLIC:PROPERTY NAME = " precision " /><!-- 精度,主要用于数字型 -->
< PUBLIC:PROPERTY NAME = " maxLength " /><!-- 最大长度,主要用于文本 -->
< PUBLIC:PROPERTY NAME = " extendedProperties " /><!-- 一般用xml串,因为在存储很多信息时,解析非常方便 -->
< PUBLIC:METHOD NAME = " select " /><!-- 全选。由于参照编辑框由INPUT、IMG组成,所以需要改写(重载)select方法 -->
< PUBLIC:METHOD NAME = " focus " ><!-- 置焦点。由于参照编辑框由INPUT、IMG组成,所以需要改写(重载)focus方法 -->
< PUBLIC:PROPERTY NAME = " input " GET = " getInput " />
< PUBLIC:PROPERTY NAME = " value " GET = " getValue " PUT = " setValue " />
< PUBLIC:METHOD NAME = " cellDataCheck " />
</ PUBLIC:COMPONENT >
< script language = " javascript " >
var id = null ;
// 参照一般有两个值,一个是显示的Text,一个是id。idColumn指明id的Grid列
var idColumn = null ;
var refUrl = null ;
var refIdColumn = null ;
var refNameColumn = null ;
var extendedProp = element.extendedProperties;
if (extendedProp != null && typeof (extendedProp) != " undefined " )
{
var dom = new ActiveXObject("MSXML.DOMDocument");
dom.loadXML(extendedProp);
idColumn = dom.documentElement.getAttribute("idColumn");
var refInfo = dom.documentElement.firstChild;
refIdColumn = refInfo.getAttribute("idColumn");
refNameColumn = refInfo.getAttribute("nameColumn");
refUrl = refInfo.getAttribute("url");
}
var btn = element.getElementsByTagName( " IMG " )[ 0 ];
btn.onclick = btnClick;
function btnClick()
{
var ret = window.showModalDialog(refUrl,self,'scrolling:no;resizable:no;status:no;dialogWidth:550px;dialogHeight:450px;center:1');
if(ret != null)
{
var el = ret.documentElement.firstChild;
if(el != null)
{
input.value = el.getAttribute(refNameColumn);
if(idColumn != null && idColumn!="")
{
id = el.getAttribute(refIdColumn);
grid.setCellValue(grid.row,idColumn,id);
}
}
}
//--------------------------------------------------------------
grid.setCellValue(grid.row,"num",100); //赋值示例
grid.setCellValue(grid.row,"price",10); //赋值示例
//-------------------------------------------------------------
}
var statusText = "" ;
var input = element.getElementsByTagName( " INPUT " )[ 0 ];
input.onblur = inputOnBlur;
function inputOnBlur()
{
grid.status = statusText; //可以通过grid.status来修改Grid状态条的状态。
}
function getInput()
{
return input;
}
// 该方法由SmartGrid在显示编辑器时调用。由于参照编辑器由INPUT、IMG等元素组成,所以需要告知SmartGrid在设置编辑器焦点时,应该让哪个元素获得焦点!
function focus()
{
input.focus();
}
// 该方法由SmartGrid在对编辑器全选时调用。由于参照编辑器由INPUT、IMG等元素组成,所以需要告知SmartGrid在全选编辑器的内容时,应该怎样进行全选!
function select()
{
input.select();
}
function setValue(val)
{
input.value = val;
if(idColumn != null)
{
var r = grid.row;
id = grid.getCellValue(r,idColumn);
}
}
function getValue()
{
return input.value ;
}
function cellDataCheck(args)
{
return ;
}
</ script >
< PUBLIC:PROPERTY NAME = " grid " /><!-- 返回当前的Grid,通过该属性,可以访问当前Grid的相关信息 -->
<!-- 和.Net中的DataColumn的定义类似 -->
< PUBLIC:PROPERTY NAME = " columnName " /> <!-- 列名 -->
< PUBLIC:PROPERTY NAME = " dataType " /><!-- 数据类型,如System.String,和SmartGridColumn上的DataType的值保持一致 -->
< PUBLIC:PROPERTY NAME = " allowNull " /><!-- 是否允许为空 -->
< PUBLIC:PROPERTY NAME = " scale " />
< PUBLIC:PROPERTY NAME = " precision " /><!-- 精度,主要用于数字型 -->
< PUBLIC:PROPERTY NAME = " maxLength " /><!-- 最大长度,主要用于文本 -->
< PUBLIC:PROPERTY NAME = " extendedProperties " /><!-- 一般用xml串,因为在存储很多信息时,解析非常方便 -->
< PUBLIC:METHOD NAME = " select " /><!-- 全选。由于参照编辑框由INPUT、IMG组成,所以需要改写(重载)select方法 -->
< PUBLIC:METHOD NAME = " focus " ><!-- 置焦点。由于参照编辑框由INPUT、IMG组成,所以需要改写(重载)focus方法 -->
< PUBLIC:PROPERTY NAME = " input " GET = " getInput " />
< PUBLIC:PROPERTY NAME = " value " GET = " getValue " PUT = " setValue " />
< PUBLIC:METHOD NAME = " cellDataCheck " />
</ PUBLIC:COMPONENT >
< script language = " javascript " >
var id = null ;
// 参照一般有两个值,一个是显示的Text,一个是id。idColumn指明id的Grid列
var idColumn = null ;
var refUrl = null ;
var refIdColumn = null ;
var refNameColumn = null ;
var extendedProp = element.extendedProperties;
if (extendedProp != null && typeof (extendedProp) != " undefined " )
{
var dom = new ActiveXObject("MSXML.DOMDocument");
dom.loadXML(extendedProp);
idColumn = dom.documentElement.getAttribute("idColumn");
var refInfo = dom.documentElement.firstChild;
refIdColumn = refInfo.getAttribute("idColumn");
refNameColumn = refInfo.getAttribute("nameColumn");
refUrl = refInfo.getAttribute("url");
}
var btn = element.getElementsByTagName( " IMG " )[ 0 ];
btn.onclick = btnClick;
function btnClick()
{
var ret = window.showModalDialog(refUrl,self,'scrolling:no;resizable:no;status:no;dialogWidth:550px;dialogHeight:450px;center:1');
if(ret != null)
{
var el = ret.documentElement.firstChild;
if(el != null)
{
input.value = el.getAttribute(refNameColumn);
if(idColumn != null && idColumn!="")
{
id = el.getAttribute(refIdColumn);
grid.setCellValue(grid.row,idColumn,id);
}
}
}
//--------------------------------------------------------------
grid.setCellValue(grid.row,"num",100); //赋值示例
grid.setCellValue(grid.row,"price",10); //赋值示例
//-------------------------------------------------------------
}
var statusText = "" ;
var input = element.getElementsByTagName( " INPUT " )[ 0 ];
input.onblur = inputOnBlur;
function inputOnBlur()
{
grid.status = statusText; //可以通过grid.status来修改Grid状态条的状态。
}
function getInput()
{
return input;
}
// 该方法由SmartGrid在显示编辑器时调用。由于参照编辑器由INPUT、IMG等元素组成,所以需要告知SmartGrid在设置编辑器焦点时,应该让哪个元素获得焦点!
function focus()
{
input.focus();
}
// 该方法由SmartGrid在对编辑器全选时调用。由于参照编辑器由INPUT、IMG等元素组成,所以需要告知SmartGrid在全选编辑器的内容时,应该怎样进行全选!
function select()
{
input.select();
}
function setValue(val)
{
input.value = val;
if(idColumn != null)
{
var r = grid.row;
id = grid.getCellValue(r,idColumn);
}
}
function getValue()
{
return input.value ;
}
function cellDataCheck(args)
{
return ;
}
</ script >