即时修改表格里的字段在ASP中的应用

[youyiyang]

大家好！

由于我们公司的一个客户关系管理系统用的是ASP加ACCESS的开发，所以，本人在用即时修改表格里的字段这个应用的时候，后台的更新操作还是ASP程序。
当时为了能做到这个即时修改表格里的字段，我在baidu和google搜索了很多的资料，最后确定用国外的一个JQuery插件：Jeditable。网址是 http://www.appelsiini.net/projects/jeditable,作者是Mika Tuupola。
这个插件做的非常好，比其他的很多都要高出不少。
我在ASP里加上了如下的script说明

<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript" src="js/jquery.jeditable.js"></script>

Jeditable由于功能很强大，在我的这个应用中，我只需根据它的规则，进行定制就可以了。
我主要用到了<input type=text> <input type=textarea> 和 <input type=select>,下面的script就对它们进行了定制：

<script type="text/javascript">
    $(function(){ 
	    $('.edit').editable('save.asp',{ 
		 width     :  210,
		 height    :  18,
		 event : 'dblclick',
		 
		 //onblur    : "ignore",
         cancel    : '取消',
         submit    : '保存',
		 //placeholder : '',
         indicator : '<img src="css/loader.gif">',
         tooltip   : '双击可编辑',
		 callback  : function(value, settings) {
			 $("#modifiedtime").html("刚刚");
         }

     });
		$('.edit1').editable('save.asp',{ 
		 width     :  400,
		 height    :  18,
		 event : 'dblclick',
		 
		 //onblur    : "ignore",
         cancel    : '取消',
         submit    : '保存',
		 //placeholder : '',
         indicator : '<img src="css/loader.gif">',
         tooltip   : '双击可编辑',
		 callback  : function(value, settings) {
			 $("#modifiedtime").html("刚刚");
         }

     });
     $('.edit_select').editable('save.asp', {  
     data : " {'无':'无','电话来访':'电话来访','客户介绍':'客户介绍', '独立开发':'独立开发', '媒体宣传':'媒体宣传', '促销活动':'促销活动', '代理商':'代理商', '合作伙伴':'合作伙伴', '公开招标':'公开招标', '直邮':'直邮', 'Email群发':'Email群发', '网站':'网站','会议':'会议','展会':'展会', '口碑':'口碑','其他':'其他'}", 
         type : "select", 
		 event : 'dblclick',
	     cancel    : '取消',
         submit    : '保存',
         indicator : '<img src="css/loader.gif">',
         tooltip   : '双击可编辑'
		  
     });
	 $('.edit_select1').editable('save.asp', {  
     data : " {'无':'无','1星':'1星','2星':'2星', '3星':'3星', '4星':'4星', '5星':'5星'}", 
         type : "select", 
	     event : 'dblclick',
		 cancel    : '取消',
         submit    : '保存',
         indicator : '<img src="css/loader.gif">',
         tooltip   : '双击可编辑'
		
     });
	 $('.edit_select2').editable('save.asp', {  
     data : " {'无':'无','5-10人':'5-10人','11-50人':'11-50人', '51-100人':'51-100人', '101-200人':'101-200人', '201-300人':'201-300人', '301-500人':'301-500人', '501-1000人':'501-1000人','1000人以上':'1000人以上'}", 
         type : "select", 
	     event : 'dblclick',
		 cancel    : '取消',
         submit    : '保存',
         indicator : '<img src="css/loader.gif">',
         tooltip   : '双击可编辑'
		
     });
	 $('.edit_select3').editable('save.asp', {  
     data : " {'无':'无','人民币10万元/年以下':'人民币10万元/年以下','人民币10万元/年-30万元/年':'人民币10万元/年-30万元/年', '人民币30万元/年-50万元/年':'人民币30万元/年-50万元/年', '人民币50万元/年-100万元/年':'人民币50万元/年-100万元/年', '人民币100万元/年以下':'人民币100万元/年以下', '人民币100万元/年-200万元/年':'人民币100万元/年-200万元/年', '人民币200万元/年-300万元/年':'人民币200万元/年-300万元/年','人民币300万元/年-500万元/年':'人民币300万元/年-500万元/年', '人民币500万元/年-700万元/年':'人民币500万元/年-700万元/年', '人民币700万元/年-1000万元/年':'人民币700万元/年-1000万元/年', '人民币1000万元/年-2000万元/年':'人民币1000万元/年-2000万元/年', '人民币2000万元/年-3000万元/年':'人民币2000万元/年-3000万元/年', '人民币3000万元/年-5000万元/年':'人民币3000万元/年-5000万元/年', '人民币5000万元/年-1亿元/年':'人民币5000万元/年-1亿元/年', '人民币1亿元/年以上':'人民币1亿元/年以上'}", 
         type : "select", 
	     event : 'dblclick',
		 cancel    : '取消',
         submit    : '保存',
         indicator : '<img src="css/loader.gif">',
         tooltip   : '双击可编辑'
		
     });
	  $('.edit_select4').editable('save.asp', {  
     data : " {'TI':'TI','TOD':'TOD','Mic':'Mic', '友信':'友信', '田村':'田村', '松下':'松下', 'NEC':'NEC', '其他':'其他'}", 
         type : "select", 
	     event : 'dblclick',
		 cancel    : '取消',
         submit    : '保存',
         indicator : '<img src="css/loader.gif">',
         tooltip   : '双击可编辑'
		
     });
	 $('.edit_select5').editable('save.asp', {  
     data : " {'金属壳热保护器':'金属壳热保护器','塑壳热保护器':'塑壳热保护器','大电流热保护器':'大电流热保护器', '外置式热保护器':'外置式热保护器', '突跳式温控器':'突跳式温控器', '敞开式热保护器':'敞开式热保护器', '电流过载保护器':'电流过载保护器', '恒温器':'恒温器', '温度熔断丝':'温度熔断丝', '压力传感器':'压力传感器', '压力开关':'压力开关', '连接器':'连接器', '线材':'线材', '其他':'其他'}", 
         type : "select", 
	     event : 'dblclick',
		 cancel    : '取消',
         submit    : '保存',
         indicator : '<img src="css/loader.gif">',
         tooltip   : '双击可编辑'
		
     });
	 $('.edit_select6').editable('save.asp', {  
     data : " {'新新':'新新客户','新':'新客户','待认':'待确认', '有意':'有意向', '现用':'现用客户', '暂停':'暂停客户', 'selected':'<%
	 select case (rs("联系状态"))
	 case "新新"
	   Response.write("新新")
	 case "新"
	   Response.write("新")
	 case "待认"
	   Response.write("待认")
	 case "有意"
	   Response.write("有意")
	 case "现用"
	   Response.write("现用")
	  case "暂停"
	   Response.write("暂停")  
	 end select 
	 %>'}", 
         type : "select", 
	     event : 'dblclick',
		 cancel    : '取消',
         submit    : '保存',
         indicator : '<img src="css/loader.gif">',
         tooltip   : '双击可编辑'
	
     });
	 $('.edit_select7').editable('save.asp', {  
     data : " {'?':'?','不报':'不报','进行':'进行', '备':'备'}", 
         type : "select", 
	     event : 'dblclick',
		 cancel    : '取消',
         submit    : '保存',
         indicator : '<img src="css/loader.gif">',
         tooltip   : '双击可编辑'
		
     });
	  $('.edit_select8').editable('save.asp', {  
     data : " {'?':'?','不要':'不要','申样':'申样', '到正源':'到正源', '到客户':'到客户'}", 
         type : "select", 
	     event : 'dblclick',
		 cancel    : '取消',
         submit    : '保存',
         indicator : '<img src="css/loader.gif">',
         tooltip   : '双击可编辑'
		
     });
	 $('.textarea').editable('save.asp', { 
         type      : 'textarea',
		 rows     :20,
		 cols     :80,
		 event : 'dblclick',
         cancel    : '取消',
         submit    : '保存',
         indicator : '<img src="css/indicator.gif">',
         tooltip   : '双击可编辑'
		 

     });
	 $(".datepicker").editable('save.asp', { 
		 width     : 120,
		 type      : 'datepicker',
		 //onblur    : "ignore",
		 cancel    : '取消',
         submit    : '保存',
         indicator : '<img src="css/loader.gif">',
         tooltip   : '双击可编辑',
		 style     : 'display: inline'
	 });
    
   });  
   //调用jquery ui的datepicker日历插件
   $.editable.addInputType('datepicker', {
    element : function(settings, original) {
        var input = $('<input class="input" />');
		input.attr("readonly","readonly");
        $(this).append(input);
        return(input);
    },
    plugin : function(settings, original) {
		var form = this;
		$("input",this).datepicker();
      }
    })
</script>

然后在Html里对每个表格里的单元也进行相应的定制

<td width="37.5%" style="font-family: '华文新魏'; color: blue; font-size: 19px;" class="edit" id="单位"><%=rs("单位")%></td>

这样，每个表格和Js对应起来，就可以对每个单元格进行编辑了。
后台的Ajax的save.asp的代码如下：

<%
Response.ContentType="text/html"
Response.Charset="gb2312"
%>
<!--#include file="conn.asp"-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>上海正源--客户关系管理--客户信息--更新</title>
</head>
<body>
<%
dim id,col,val, str1
id = unescape(Request("id"))
val = unescape(Request("value"))
idnum=session("viewid")
modifer=split(session("loginuser"), ":")
str1 = "表1"

    dim rs
    set rs = server.createobject("adodb.recordset")
    sql="update " & str1 & " set " & id & "='" & val & "', 修改人='" & modifer(0) & "', 修改时间=#" & Date() & " " & Time() & "# where id="  & idnum
	'response.Write(sql)
	'response.write (val)
	'response.write (modifer)
	'response.write (id)
    conn.execute sql
	If err<>0 Then
	   Response.write(err)
	Else
	   response.write(val)
	End if
    rs.close
    set rs=nothing 
	set conn=nothing 
    'Call reload()
    'response.redirect("view.asp?item=2718")
%>

</body>
</html>

由于我在表格的ASP的代码是GB2312，后台的save.asp也是GB2312，而Jeditable是用post方法把前台的数据提交到后台的save.asp的，所以会发生乱码的出现。
要解决这个问题，需要在Jeditable里加上escape函数,在save.asp里加上unescape函数
在Jeditable的325和326行上加上

submitdata[settings.name] = escape(input.val());
submitdata[settings.id] = escape(self.id);

在save.asp里加上

id = unescape(Request("id"))
val = unescape(Request("value"))

这样，这个问题就解决了。
具体的前台ASP源码在以下这个链接里：
http://www.pastie.org/2460243

具体应用就是这样，欢迎大家和我讨论即时编辑表格单元在ASP里的应用。
然而，我还是有一个问题没有完全解决
一个是Jeditable 似乎只能传递两个参数到后台，id和val，但我的表格是动态生成的，就是说都有一个记录id，我是通过将记录id用session传递到后台的。
由于我对Jquery和Jeditable还是初学者，猜想应该可以传递多个参数到后台，所以请教哪位大虾熟悉指点一下怎么做，当然如果能够自己写一个出来来代替Jeditable那更好。本人也在努力破解Jeditable。