2008年8月6日

<script src="js/dojo/dojo.js" type="text/javascript"
   djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
var span;
var tr;
var td;

dojo.addOnLoad(initTable);
function initTable(){
 dojo.forEach(
  dojo.query(".ajaxspan"),
  function(spantag){
   dojo.connect(spantag, 'onmouseover',this,'bggreen');
   dojo.connect(spantag, 'onmouseout',this,'bgnormal');
   dojo.connect(spantag, 'onclick', this, 'textChange');
  }
 );
}

function textChange(event){
 span = event.target;
 td = span.parentNode;
 tr = td.parentNode;
 var node = dojo.doc.createElement("input");
 dojo.attr(node,"type","text");
 dojo.attr(node,"id",tr.id);
 dojo.attr(node,"name",span.id);
 dojo.attr(node,"value",span.innerHTML);
 dojo.connect(node,"onblur",this,"saveTextChange")
 td.innerHTML = "";
 td.appendChild(node);
 node.focus();    
}

function saveTextChange(event){
 var node = event.target;
 if(dojo.trim(node.value)!=dojo.trim(span.innerHTML)&&node.value!=""){
  dojo.byId("ajaxmsg").innerHTML = "正在更新..."
  dojo.xhrPost({
   url:"show/console/newsTypeAjax",
   load:function(data,ioArgs){
    if("200"==ioArgs.xhr.status){
     span.innerHTML = node.value;
     td.innerHTML = "";
     span.style.backgroundColor="";
     td.appendChild(span);
     clearNode() 
     dojo.byId("ajaxmsg").innerHTML = "";
    }
   },
   error:function(data,ioArgs){
    dojo.byId("ajaxmsg").innerHTML = "更新失败:"+data;
    td.innerHTML = "";
    span.style.backgroundColor="";
    td.appendChild(child);
    clearNode()
   },
   content: getTextParams(node)
  });
 }else{
  td.innerHTML = "";
  span.style.backgroundColor="";
  td.appendChild(span); 
  clearNode()   
 }   
}

function getTextParams(node){
 if("desc"==node.name){
  return {
   "id":node.id,"name":node.value,"tag":"desc"
  }
 }
 if("cont"==node.name){
  return {
   "id":node.id,"name":node.value,"tag":"cont"
  }
 }
}

function clearNode(){
 span = null;
 tr = null;
 td = null;
}

function bggreen(event){
   event.target.style.backgroundColor="#CCCCCC";
}
function bgnormal(event){
 event.target.style.backgroundColor="";
}

</script>


<table width="100%" height="58"  style="border: solid 1px #EEF8F9"cellpadding="0" cellspacing="0" id="listTable">
    
<c:forEach items="${msg}" var="newstype">    
  <tr id="${newstype.news_type_id}">
  
    <td width="30%" height="28" class="font_name">
 <span id="cont" class="ajaxspan">
 ${newstype.news_type_name} 
 </span> 
 </td>
    <td width="46%" class="font_name">
 <span id="desc" class="ajaxspan">
  ${newstype.news_type_description}
 </span> 
 </td>
  </tr>
 </c:forEach> 
 
  <tr>
    <td height="28" colspan="2" class="font_name">&nbsp;</td>
    <td class="font_name">&nbsp;</td>
  </tr>
</table>

posted @ 2008-08-19 16:01 路依 阅读(640) | 评论 (0)编辑 收藏
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Inline Edit Box Test</title>
        <script type="text/javascript" src="js/dojo/dojo.js"
            djConfig=" parseOnLoad: true"></script>

        <script type="text/javascript">
            dojo.require("dijit.InlineEditBox");
        </script>
    </head>
<body>
    Dear <span dojoType="dijit.InlineEditBox" width="200px" autoSave="true" title="recipient name">John</span>
</body>
</html>



几行代码即可实现!
posted @ 2008-08-06 17:40 路依 阅读(649) | 评论 (0)编辑 收藏