treelist4.htm
5.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="../temp1.css" type="text/css">
<script type="text/javascript" src="functable.js"></script>
<script>
function gentable()
{
var xmlDoc = getXMLDoc("events.xml?81");
geneventtable('TagEvent', xmlDoc, 'Treelist');
}
</script>
</head>
<body onLoad="gentable()" bgcolor=#ffffff vlink=#0000ff>
<div id="Tag508"/><br><br><br>
<font style='font-size:15pt'>13.自定义菜单</font><hr color=#2266ee size=1>
“自定义菜单”是指向鼠标右键弹出菜单增加菜单项，通过"MenuBeforePopup"事件、调用AddMenu( )函数、以及"MenuClicked"事件，实现了菜单的自定义，整个过程是动态的。<br>
详细的过程是：当鼠标右键菜单即将要弹出时，Treelist会触发页面的OnEvent(id, "MenuBeforePopup", ...)事件，在这个事件的js中，你可以通过调用AddMenu( )函数向Treelist动态增加菜单项；如果用户选中了你定义的菜单项，Treelist会触发OnEvent(id, "MenuClicked", ...)事件，从而达到了自定义菜单功能的目的.<br>
在demo中有详细的演示页，相信您一看就明白。<br>
AddMenu( 参数 )函数中的参数可以是XML串、非XML的文字串，或URL，其规则举例如下：<br>
<pre class='xml'>
<items>
<item id="3103" text="热销" icon="buttons.zip#303.ico">
<item id="3104" text="滞销产品" icon="buttons.zip#304.ico">
<item id="31041" text="库存1" icon="buttons.zip#304.ico" detail="浮动的详细说明，可选"/>
<item id="31042" text="库存2" enable="false" detail="浮动的详细说明，可选"/>
</item>
</items></pre>
如果采用非XML的普通串，其举例如下：<br>
<pre class='cpp'>
//多个菜单项之间以回车符分隔
var s = "id=4001; text=男帽; icon=buttons.zip#301.ico; detail=夏季时装\r\n";
s += "id=4002; text=时髦头巾; icon=buttons.zip#302.ico; detail=优惠直销"</pre>
规则1：如果是XML串，元素名须为<font color=red>item</font>;<br>
规则2：如果是XML串，item允许有下级item，表示菜单项的子菜单：<br>
规则3：属性有<font color=red>id</font>、<font color=red>text</font>、<font color=red>icon</font>、<font color=red>enable</font>、<font color=red>checked</font>、<font color=red>detail</font>，其中 id 必须 <b><font color=red> >=3000 </font></b>.<br>
<div id="Tag509"/><br><br><br>
<font style='font-size:15pt'>14.事件</font><hr color=#2266ee size=1>
Supcan Treelist的OnEvent( id, Event, p1, p2, p3, p4 )事件含义及参数分别如下：<br>
<div id="TagEvent"></div>
事件的js用法可参见Demo。<br>
<b>备注1</b>：如果当前列为 Button型 或 editWithButton型, 鼠标点在 button上则为"button"；如果列中有多个button，那么分别为"button1"、"button2"...类推.<br>
<b>备注2</b>：EditKeydown和EditChar均为在输入框中的键盘事件，EditKeydown能捕获几乎所有键盘动作，包括非字符的回车、Tab等；而EditChar则以输入的字符为主，包括中文.<br>您可以执行全局函数 CancelEvent( ) 去阻止继续执行，就如事件没有发生过那样，但不同的ASCII码，您需要在这二个事件中挑选一个执行CancelEvent( )，具体请在演示页“12.事件”中去测试;<br>
<b>备注3</b>：1-Ctrl键也按下了； 2-Shift键也按下了； 3-二者一起按下了.<br>
<b>备注4</b>：格式为handle=[?];asChild=true，例如串"handle=82922093;asChild=true"，其中handle的含义为源Treelist的句柄(可通过GetHandle函数获得)，如果是自我拖拽，则不出现该项；asChild=true表示作为子孙拖入，如果非子孙、或者当前非树，则不出现该项.<br>
<div id="Tag50a"/><br><br><br>
<font style='font-size:15pt'>15.XML提交格式规范</font><hr color=#2266ee size=1>
通过调用函数GetChangedXML( )，能取得输入内容的XML包，使得应用服务器能作相应处理，函数中参数level为提交级别，分如下4种：<br>
级别0：生成当前全部、最新内容(不包括修改前的原始内容);<br>
级别1：仅生成被修改过的单元格的内容(包括原始内容);<br>
级别2：在级别1的基础上，增加被修改过单元的整行内容;<br>
级别3，内容包含所有行、所有列、修改前后的内容.<br>
<br>
级别0最常用，并且XML规范最简单，如下所示：<br>
<pre class='xml'>
<?xml version="1.0" encoding="UTF-8"?">
<!-- id在XML描述文件中定义 -->
<table id="?" level="0" 自定义属性="?" >
<row>
<!-- 列名处为真实的列名 -->
<列名>Text</列名>
...
</row>
<row ...>
...
</row>
...
</table></pre>
<br>
级别1、2、3的内容规定如下：<br>
<pre class='xml'>
<?xml version="1.0" encoding="UTF-8"?">
<!-- id、key在XML描述文件中定义 -->
<table id="?" key="?" level="?" 自定义属性="?" >
<!-- 区域1: 被修改的行 -->
<modifiedRow>
<!-- key为该行key列的原始值(被修改前), rowNumber为行号 -->
<row key="?" rowNumber="?">
<!-- 列名处为真实的列名, origin为原始值(被修改前)，isModified仅用于级别2和级别3, Text处为修改后的值 -->
<列名 origin="?" isModified="false">Text</列名>
...
</row>
...
</modifiedRow>
<!-- 区域2: 新增行 -->
<newRow>
<!-- key为该行key列处输入的值, rowNumber为行号 -->
<row key="?" rowNumber="?">
<!-- 列名处为真实的列名, Text处为输入的内容 -->
<列名>Text</列名>
...
</row>
...
</newRow>
<!-- 区域3: 被删除的行 -->
<deletedRow>
<!-- key为该行key列的原始值(被修改前) -->
<row key="?"></row>
...
</deletedRow>
<!-- 区域4: 未修改过的行(仅用于级别3 时) -->
<notModifiedRow>
<!-- 略，和区域1相比只是少了"Origin"属性 -->
</notModifiedRow>
</table></pre>
<img src='glass.jpg'><font color="552222">警告：应用服务器端开发的程序不应过于依赖级别1/2/3中的origin的内容(被修改前)，因为需要考虑并发.</font><br>
<br><br><br><br>
<script type='text/javascript' src='nstd.js'></script>
</body></html>