模板
教程
环境
性能
功能
管理
客户端CGI——结合javascript、dhtml实现bbs的backoffice（一）。
发表于：2007-06-30来源：作者：点击数：
标签：
客户端CGI——结合 java script、dhtml实现bbs的backoffice（只与 服务器 交互一次）。 最近见到很多朋友问有关对form元素的操作问题，下面把我写的一个bbs的backoffice部分帖出来给大家。这个程序实现了对bbs中栏目及其下属论坛的增、删、改名、排序、移动、
客户端CGI——结合javascript、dhtml实现bbs的backoffice（只与服务器交互一次）。最近见到很多朋友问有关对form元素的操作问题，下面把我写的一个bbs的backoffice部分帖出来给大家。这个程序实现了对bbs中栏目及其下属论坛的增、删、改名、排序、移动、修改属性等等操作，而只与服务器交互一次，其中用到的表单元素有text , button, submit,select , textarea等，如果你能够全部理解这些代码，那么不敢说你精通javascript和dhtml（我就不敢），最起码可以说你会了。
因为是草稿，所以未进行程序优化及界面处理，实际上你如果结合css可以把它做得象一个windows程序而不象html页面。另外一条因为我是用ie5来测试的，所以其中一些写法不是很规范，如引用form名时前面没加document ， 函数没有返回值等，这些在nescape里都是不允许的，如果你要在nescape里用，请自己把语法规范了。
由于源代码很长（30000多字节），我将分为几个部分来讲，你把几部分中的代码合在一起存为一个html文件就可以直接运行了。首先需要从数据库中取出记录放到前台javascript数组中，因为着重点是放在前台，所以这里的asp我就不列出来了，只把它生成的html列出来，它的目的是生成数组及初始页面。这部分代码中牵涉到一个生成javascript二维数组的技巧，请大家仔细看一下，这是整个程序的关键所在。下面这段程序生成两个数组，一个是aCategory，代表bbs大的栏目，共有四个；另一个是aForum，代表同栏目相关联的论坛。整个程序的操作实际上就是围绕着两个数组来实现的，同这两个数组相关联的是表单frmManager的两个select ：selCategory和selForum。
<script language=javascript>
//版块数组的构造函数
function MakeCategory(CategoryID , CategoryName , OrderNum)
{
this.CategoryID = CategoryID ;
this.CategoryName = CategoryName ;
this.OrderNum = OrderNum ;
return this ;
}
//论坛数组的构造函数
function MakeForum(CategoryID , CategoryName , OrderNum , RootCategoryID , Description , MasterID)
{
this.CategoryID = CategoryID ;
this.CategoryName = CategoryName ;
this.OrderNum = OrderNum ;
this.RootCategoryID = RootCategoryID ;
this.Description = Description ;
this.MasterID = MasterID ;
return this ;
}
//建立版块数组并赋值
var aCategory = new Array() ;
aCategory[0] = new MakeCategory(1 , ‘’技术交流‘’ ,1) ;
aCategory[1] = new MakeCategory(2 , ‘’项目管理‘’ ,2) ;
aCategory[2] = new MakeCategory(3 , ‘’内部公告‘’ ,3) ;
aCategory[3] = new MakeCategory(4 , ‘’海阔天空‘’ ,4) ;
//建立论坛数组并赋值
var aForum = new Array() ;
aForum[0] = new MakeForum(5 , ‘’Asp&Database‘’ ,1 ,1 ,‘’asp, aclearcase/" target="_blank" >ccess,PB, sql.oralce,etc. ‘’,1);
aForum[1] = new MakeForum(6 , ‘’Design World‘’ ,2 ,1 ,‘’photoshop,dreamweaver,flash, 3dmax,etc.‘’,2);
aForum[2] = new MakeForum(7 , ‘’Design World‘’ ,3 ,1 ,‘’photoshop,dreamweaver,flash, 3dmax,etc.‘’,2);
aForum[3] = new MakeForum(8 , ‘’Program Language‘’ ,4 ,1 ,‘’Java, html/dhtml/xml, C/C++, Php/Jsp, vbscript/javascript, etc.‘’,1);
aForum[4] = new MakeForum(9 , ‘’System Administration‘’ ,5 ,1 ,‘’Windows9x/NT/2000, Unix, Linux , etc.‘’,2);
aForum[5] = new MakeForum(10 , ‘’Network Security‘’ ,6 ,1 ,‘’TCP/IP, Socket, hacker, FireWall, Proxy, etc.‘’,1);
aForum[6] = new MakeForum(11 , ‘’New Idea‘’ ,7 ,1 ,‘’Welcome all Creative, innovative and anything different .‘’,1);
aForum[7] = new MakeForum(12 , ‘’4biz电子商务搜索引擎门户项目‘’ ,1 ,2 ,‘’E-Commerce Search Engine Portal.‘’,2);
aForum[8] = new MakeForum(13 , ‘’Poker Town ‘’ ,2 ,2 ,‘’Our first Online Game.‘’,1);
aForum[9] = new MakeForum(14 , ‘’Vertigine‘’ ,3 ,2 ,‘’Powerful Vertical Search Engine.‘’,2);
aForum[10] = new MakeForum(15 , ‘’EasyCase‘’ ,4 ,2 ,‘’EasyCase-New modeling tool.‘’,1);
aForum[11] = new MakeForum(16 , ‘’日常管理‘’ ,1 ,3 ,‘’Daily Grind.‘’,2);
aForum[12] = new MakeForum(17 , ‘’临时通知‘’ ,2 ,3 ,‘’Temporary Notice.‘’,1);
aForum[13] = new MakeForum(18 , ‘’会议安排‘’ ,3 ,3 ,‘’Meeting Schedule.‘’,2);
aForum[14] = new MakeForum(19 , ‘’有感而发‘’ ,4 ,4 ,‘’Just say it.‘’,1);
aForum[15] = new MakeForum(20 , ‘’似水流年‘’ ,5 ,4 ,‘’all that gone with wind.‘’,1);
aForum[16] = new MakeForum(21 , ‘’谈情说爱‘’ ,6 ,4 ,‘’Let"s talk about love.‘’,2);
aForum[17] = new MakeForum(22 , ‘’笑话站‘’ ,7 ,4 ,‘’Just joke , whatever it is.‘’,1);
</script>
<html>
<head>
<title>版块管理</title>
<meta http-equiv=‘’Content-Type‘’ content=‘’text/html; charset=gb2312‘’>
<link rel=‘’stylesheet‘’ href=‘’images/style.css‘’>
</head>
<body bgcolor=‘’#FFFFFF‘’ onload=‘’On_Load();‘’>
<p align=center class=bigtitle>Ematters Board 版块管理</p>
<form name = frmManager method=‘’post‘’ action=‘’ChangeForum.asp‘’>
<table width=720 border=0 align=center cellspacing=1 cellpadding=4 bgcolor=#000000>
<tr bgcolor=#ffffff>
<td width=250 align=left>
版块名称
</td>
<td width=70 align=center>
</td>
<td width=400 align=left>
论坛名称
</tr>
<tr bgcolor=#ffffff>
<td align=left>
<input type=text name=txtCategoryName size=20 value=‘’请选择版块‘’ disabled>
</td>
<td width=120 align=center>
<input type=button name=‘’btnChangeName‘’ value=‘’修改名称‘’ disabled onclick=On_ChangeName();>
</td>
<td align=left>
<input type=text name=txtForumName size=20 value=‘’请选择论坛‘’ disabled>
</tr>
<tr bgcolor=#ffffff>
<td align=left>
<select name=selCategoryName size=10 width=200 onchange=‘’On_CategoryChange();‘’ style=‘’width:120‘’>
</select>
<input type=button name=btnAddCategory value = ‘’增加‘’ onclick=‘’On_AddCategory();‘’>
<input type=button name=btnDeleteCategory value=‘’删除‘’ onclick=‘’On_DeleteCategory();‘’>
</td>
<td align=center>
<br><br>
<br><br>
<input type=button name=btnUp value=‘’↑‘’ onclick=‘’On_OrderUp()‘’>
<br><br>
<input type=button name=btnDown value=‘’↓‘’ onclick=‘’On_OrderDown()‘’>
</td>
<td align=left>
<select name=selForumName size=10 onchange=‘’On_ForumChange();‘’ style=‘’width:200‘’>
</select>
<input type=button name=btnAddForum value = ‘’增加‘’ onclick=‘’On_AddForum();‘’>
<input type=button name=btnDeleteForum value=‘’删除‘’ onclick=‘’On_DeleteForum();‘’>
</tr>
<tr bgcolor=#ffffff><td colspan=2 align=left>
描述:
<textarea name=txtDescription cols=30 style=‘’overflow:hidden‘’></textarea>
<input type=button name=btnModifyDescription value=‘’修改‘’ onclick=‘’On_ChangeDescription()‘’>
</td>
<td align=left>
版主
<select name=selMaster disabled>
<option value=1>bigeagle</option>
<option value=2>lizza</option>
</select>
<input type=button name=btnChangeMaster value=‘’修改‘’ onclick=‘’On_ChangeMaster()‘’>
</td></tr>
<tr bgcolor=#ffffff>
<td colspan=3 align=left>
<input type=button name=btnSubmit value=‘’确认‘’ onclick=On_Submit();>
</td>
</tr>
</table>
</form>
</body></html>
