一.Event
文本框中回车
if(evt.keyCode==13 )
{
if (document.all)
document.getElementById("imgSearch").click();
else
{
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
document.getElementById("imgSearch").dispatchEvent(evt);
}
return false;
}
<input id="txtFind" name="txtFind" type="text" οnfοcus="findClear(this)" οnkeydοwn="javascript:return okd(event);"
value="请输入想查询的关键字" style="border:1px solid;text-align:left;padding-top:1px;color:#888;height:15px;width:300px;" /><img src="/image/head/an_search02.gif" id="imgSearch" width="90" height="24" οnclick="getSearchParm()" alt="" style=" cursor:pointer;"/>
二.
1.调用appendChild方法增加input对象，设置type属性的位置
1
<html>
2 <head>
3 <title>test</title>
4
<script language="javascript">
5
function test(){
6
var tbodyElement=document.getElementById("tbody1");
7 var trElement=document.createElement("tr");
8 var idTDElement=document.createElement("td");
9
10 idTDElement.innerHTML=1;
11 var nameTDElement=document.createElement("td");
12
13 var inputElement=document.createElement("input");
14 nameTDElement.appendChild(inputElement);
15 inputElement.type="button";
16 //在IE中，这句话将会抛出异常，但在firefox能正常运行，如果type为text或者不设置type属性，也都能正常运行
17 inputElement.value="Invoke";
18 /**//*
19 修改成下面的语句就能正常运行：
20 var inputElement=document.createElement("input");
21 inputElement.type="button";
22 nameTDElement.appendChild(inputElement);
23
*/
24
25 tbodyElement.appendChild(trElement);
26 trElement.appendChild(idTDElement);
27 trElement.appendChild(nameTDElement);
28 }
29
</script>
30 </head>
31 <body>
32 <input type="button" value="insert" onclick='test()'>
33 <table cellpadding="0" cellspacing="0" border="1">
34 <tbody id='tbody1'>
35 <tr>
36 <td width="50">ID</td>
37 <td width="200">name</td>
38 </tr>
39 </tbody>
40 </table>
41 </body>
42 </html>
2.appendChild一个radio对象，设置该对象的name属性
1 var nameTDElement=document.createElement("td");
2 var radioElement=document.createElement("input");
3 radioElement.type="radio";
4 nameTDElement.appendChild(inputElement);
5 radioElement.name="testRadioName"; //这句话在firefox是起作用的，但在IE下是不起作用的
6 /**//*解决的办法是
7 var radioElement=document.createElement("<input name='testRadioName'>");
8 radioElement.type="radio";
9 nameTDElement.appendChild(inputElement);
10 */
3.对select控件增加和删除Option
1 <html>
2 <head>
3 <title>test</title>
4 <script language="javascript">
5 function deleteRow(){
6 var selectElement=document.getElementById("select1");
7 selectElement.options.remove(1); //IE:OK Firefox:Failure
8 selectElement.remove(1); //IE:OK Firefox:OK
9 }
10 function insertRow(){
11 var selectElement=document.getElementById("select1");
12 var option=new Option("eeee",5);
13 selectElement.add(option); //IE:OK Firefox:Failure
14 selectElement.options.add(option);//IE:OK Firefox:OK
15 }
16 </script>
17 </head>
18 <body>
19 <input type="button" value="Delete" onclick='deleteRow()'>
20 <input type="button" value="Insert" onclick='insertRow()'>
21 <select id="select1">
22 <option value="1">aaa</option>
23 <option value="2">bbb</option>
24 <option value="3">ccc</option>
25 <option value="4">ddd</option>
26 </select>
27 </body>
28 </html>
三.treeview
---------------ajaxTreeView.js------------------------------
if(typeof ajaxTreeNode =="undefined"){
//ID,值，优先级,父ID
function ajaxTreeNode(keyId,keyValue,pIdx,keyPri,isTop){
this.keyId=keyId ;
this.keyValue=keyValue ;
this.keyPri=keyPri ;
this.pIdx=pIdx;
this.IsTop=isTop ;
this.pLevel=0;
this.pNode=null ;
this.pState=1;//当前状态 0：展开，1：收起---------------------默认值为1
this.subs=new Array ();
}
}
if(typeof ajaxTreeView=="undefined"){
function ajaxTreeView(ownerId,dirId,sortOrder,dirType,selectedNodeId){
this.Owner=ownerId ;
this.RootDirId=dirId ;
this.SortDirection=sortOrder ;
this.DirType=dirType ;
this.SelectedId=selectedNodeId;
this.RootTreeNode=new Array ();
this.DirData="";
this.Container=false ;
this.FetchDataOver=false ;
this.RenderOk=false ;
this.tmp=new Array ();
var cTh=this;
this.createHttp=function () {
var http=false ;
if(typeof ActiveXObject !="undefined"){
try
{
http=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
http=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E)
{
http=false ;
}
}
} else if(XMLHttpRequest ){
try
{
http=new XMLHttpRequest();
}
catch(e)
{
http=false ;
}
}
return http ;
}
this.init=function(){
var xmlHttp=cTh.createHttp();
if(!xmlHttp )
return ;
var querys="DirType="+cTh.dirType +"&DirId="+cTh.rootId +"&SelID="+cTh.selectedNodeId ;
var url="DirGet.aspx?"+querys ;
xmlHttp.open("GET",url ,true );
xmlHttp.onreadystatechange=function (){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
cTh.DirData =xmlHttp.responseText;
cTh.FetchDataOver =true ;
cTh.render();
}
}
}
xmlHttp.send(null );
}
//排序
this.ascSortCallback=function(x,y){
if(x.keyPri>y.keyPri)
return 1;
else if(x.keyPri= y.keyPri)
return 0;
else
return -1;
}
this.descSortCallback=function(x,y){
if(x.keyPri>y.keyPri)
return -1;
else if(x.keyPri= y.keyPri)
return 0;
else
return 1;
}
this.addTreeNode=function(treeNode){
var find=false ;
for(var i=0;i<cTh.tmp.length ;i++){
if(cTh.tmp[i].keyId==treeNode.keyId){
find =true ;
break;
}
}
if(treeNode.pIdx==cTh.RootDirId){
var b=false ;
for(var i=0;i<cTh.RootTreeNode.length ;i++){
if(cTh.RootTreeNode[i].keyId==treeNode.keyId){
b=true;
break;
}
}
if(!b){
cTh.RootTreeNode.push(treeNode );
}
}
if(!find){
cTh.tmp.push(treeNode);
}
}
this.getTreeNode=function(treeNode,idx){
//根据ID查找当前ID。
var cn;
if(treeNode.keyId==idx)
cn= treeNode ;
else
for(var i=0;i<treeNode.subs.length;i++){
cn= cTh.getTreeNode(treeNode.subs[i],idx);
if(cn)
break;
}
return cn ;
}
this.close=function(treeNode){
treeNode.pState=1;
for(var i=0;i<treeNode.subs.length;i++){
cTh.close(treeNode.subs[i]);
}
}
this.expand=function(treeNode){
treeNode.pState=0;
var cxp=treeNode.pNode;
while(cxp !=null){
cxp.pState=0;
cxp =cxp.pNode;
}
}
this.render=function(){
if(cTh.Container ==false || cTh.FetchDataOver ==false ){
return ;
}
if(cTh.RenderOk ) return ;
cTh.RenderOk =true ;
var rows=cTh.DirData.split(";");
var i=rows.length;
for(var j=0;j<i;j++){
var dir=rows[j].split(",");
var cd=new ajaxTreeNode(dir[0], dir[1],dir[2],dir[3],dir[4]);
cTh.addTreeNode(cd);
}
if(cTh.SortDirection =="asc"){
cTh.RootTreeNode.sort(cTh.ascSortCallback );
} else {
cTh.RootTreeNode.sort(cTh.descSortCallback );
}
var selectedNode;
for(var i=0;i<cTh.RootTreeNode.length;i++){
cTh.createTree(cTh.RootTreeNode[i]);
if(!selectedNode ){
selectedNode =cTh.getTreeNode(cTh.RootTreeNode[i],cTh.SelectedId);
}
}
if(selectedNode ){
cTh.expand(selectedNode );
alert("FIND");
}
for(var i=0;i<cTh.RootTreeNode.length;i++){
cTh.clientShow(cTh.RootTreeNode[i]);
}
}
this.getSubs=function(treeNode){
var subs=new Array ();
for(var i=0;i<cTh.tmp.length;i ++){
if(cTh.tmp[i].pIdx==treeNode.keyId){
subs.push(cTh.tmp[i]);
}
}
if(subs.length >=2){
if(cTh.SortDirection =="asc"){
subs.sort(cTh.ascSortCallback);
} else {
subs.sort(cTh.descSortCallback );
}
}
return subs ;
}
this.createTree=function(treeNode){
var subs=cTh.getSubs(treeNode);
for(var i=0;i<subs.length;i++){
subs[i].pNode=treeNode ;
subs[i].pLevel=treeNode.pLevel+1;
treeNode.subs.push(subs[i]);
cTh.createTree(subs[i]);
}
}
this.clientShow=function (treeNode){
var dv=document.createElement("div");
dv.setAttribute("class","v"+treeNode.pLevel);
dv.setAttribute("className","v"+treeNode.pLevel);
if(treeNode.subs.length>0)
{
if(window.attachEvent){
//IE
var btn=document.createElement("img");
btn.setAttribute("idx",treeNode.keyId);
if(treeNode.pState==0){
btn.setAttribute("src","collaps.gif");
} else {
btn.setAttribute("src","expand.gif");
}
btn.attachEvent("onclick",cTh.onClick );
dv.appendChild(btn);
} else {
var btn=document.createElement("input");
btn.setAttribute("idx",treeNode.keyId);
btn.setAttribute("type","button");
if(treeNode.pState==0){
btn.setAttribute("value","-");
} else {
btn.setAttribute("value","+");
}
btn.addEventListener("click",cTh.onClick,false);
dv.appendChild(btn);
}
}
{
var ahref=document.createElement("a");
if(treeNode.IsTop==0){
ahref.setAttribute("href","/kb/top1_i"+treeNode.keyId+".htm");
} else {
ahref.setAttribute("href","/kb/i"+treeNode.keyId+".htm");
}
ahref.setAttribute("title",treeNode.keyValue);
ahref.appendChild(document.createTextNode(treeNode.keyValue));
dv.appendChild(ahref );
}
dv.appendChild(document.createTextNode(treeNode.keyPri));
document.getElementById(cTh.Owner).appendChild(dv);
if(treeNode.pState==0){
//----------------展开
for(var i=0;i<treeNode.subs.length;i++){
cTh.clientShow(treeNode.subs[i]);
}
}
}
this.onClick=function(evt){
var dirId;
if(window.event){
dirId=window.event.srcElement["idx"];
} else {
dirId=evt.target.attributes[1].nodeValue;
}
if(!dirId )
return ;
for(var i=0;i<cTh.RootTreeNode.length ;i++){
var ct=cTh.getTreeNode(cTh.RootTreeNode[i],dirId );
if(ct){
break;
}
}
if(ct.pState==1){
cTh.expand(ct);
} else {
cTh.close(ct );
}
var lc=document.getElementById(cTh.Owner).childNodes.length ;
for(var i=lc -1;i>=0;i--){
document.getElementById(cTh.Owner).removeChild(document.getElementById(cTh.Owner).childNodes[i]);
}
for(var i=0;i<cTh.RootTreeNode.length;i++){
cTh.clientShow(cTh.RootTreeNode[i]);
}
}
this.onContainerLoad=function(){
cTh.Container=true ;
cTh.render();
}
}
}
---------------------------------------演示代码 ajaxTree3.htm-----------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<style type="text/css">
.v0{
padding:0;
}
.v1{
padding-left:20px;
}
.v2{
padding-left:40px;
}
.v3{
padding-left:60px;
}
.v4{
padding-left:80px;
}
</style>
</head>
<body>
<div>
<script language="javascript" type="text/javascript" >
var dv=new ajaxTreeView("txt",0,"desc","KB",22);
dv.init();
</script>
<div id="txt"></div>
<script language="javascript" type="text/javascript">
dv.onContainerLoad();
dv.render();
</script>
</div>
</body>
</html>
---------------------------------------服务器端配置--------------
public class DirectoryHttpHandle:IHttpHandler
{
public DirectoryHttpHandle()
{
//
//TODO: 在此处添加构造函数逻辑
//
}
#region IHttpHandler 成员
public bool IsReusable
{
get { return true; }
}
public void ProcessRequest(HttpContext context)
{
string dirId = context.Request.QueryString["DirID"];
string dirType = context.Request.QueryString["DirType"];
context.Response.Clear();
/* var d1=new directoryInfo(1,"司法考试",0,1,1);
var d10=new directoryInfo(2,"刑法",1,1,2);
var d201=new directoryInfo(21,"x1",2,1,3);
var d202=new directoryInfo(22,"x2",2,2,3);
var c01=new directoryInfo(220,"xc1",22,1,4);
var c02=new directoryInfo(221,"xc2",22,2,4);
var c03=new directoryInfo(222,"xc3",22,3,4);
var d203=new directoryInfo(23,"x3",2,3,3);
var d11=new directoryInfo(3,"民法",1,2,2);
var d301=new directoryInfo(31,"m1",3,1,3);
var d302=new directoryInfo(32,"m2",3,2,3);
var d303=new directoryInfo(33,"m3",3,3,3);
var d12=new directoryInfo(4,"商法",1,3,2);
var d401=new directoryInfo(41,"s1",4,1,3);
var d402=new directoryInfo(42,"s2",4,2,3);
var d403=new directoryInfo(43,"s3",4,3,3);*/
DirectoryInfo[] dris = new DirectoryInfo[]{
new DirectoryInfo(1, "司法考试",0,1,1),
new DirectoryInfo(2,"刑法",1,2),
new DirectoryInfo(21,"刑法 & 第一章",2,1),
new DirectoryInfo(22,"刑法第二章",2,2),
new DirectoryInfo(221,"第二章第1节",22,1),
new DirectoryInfo(222,"第二章第2节",22,2),
new DirectoryInfo(223,"第二章第3节",22,3),
new DirectoryInfo(23,"刑法第三章",2,3),
new DirectoryInfo(3,"明法",1,3),
new DirectoryInfo(31,"明法第一章",3,1),
new DirectoryInfo(32,"明法第二章",3,2),
new DirectoryInfo(33,"明法第三章",3,3),
new DirectoryInfo(4,"商法",1,4),
new DirectoryInfo(41,"商法第一章",4,1),
new DirectoryInfo(42,"商法第二章",4,2),
new DirectoryInfo(43,"商法第三章",4,3),
new DirectoryInfo(100, "律师考试",0,2,1),
new DirectoryInfo(10002,"大律师法",100,1),
new DirectoryInfo(100001,"律师法第一章",10002,1),
new DirectoryInfo(100002,"律师法第二章",10002,2),
new DirectoryInfo(10003,"中级律师",100,1)
};
foreach (DirectoryInfo dir in dris)
{
context.Response.Write(dir.DirId);
context.Response.Write(",");
context.Response.Write(dir.DirName.Trim(new char[] { ',', ';' }));
context.Response.Write(",");
context.Response.Write(dir.ParentId);
context.Response.Write(",");
context.Response.Write(dir.OrderId);
context.Response.Write(",");
context.Response.Write(dir.IsTop);
context.Response.Write(";");
}
context.Response.Flush();
context.Response.End();
}
#endregion
}
public class DirectoryInfo
{
public int DirId;
public string DirName;
public int Level;
public int ParentId;
public int OrderId;
public int IsTop;
public DirectoryInfo(int dirId, string dirName, int pId, int order,int isTop)
{
DirId = dirId;
DirName = dirName;
Level = 0;
ParentId = pId;
OrderId = order;
IsTop = isTop;
}
public DirectoryInfo(int dirId, string dirName, int pId, int order)
: this(dirId, dirName, pId, order, 0)
{
}
}
--------------------------------Web.config
<add verb="*" path="DirGet.aspx" type="DirectoryHttpHandle"/>
----------------------------------------------
收集一些网上搜到的
扫一扫
1133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
