语源科技BlogJava-Sonny Lihttp://www.blogjava.net/sonnylys/ 熟能生巧，巧夺天工！ zh-cnTue, 28 Apr 2026 19:02:50 GMTTue, 28 Apr 2026 19:02:50 GMT60请高手解救小弟，万分感激！使用dom4j如何实现按Element的某个属性排序？？？http://www.blogjava.net/sonnylys/archive/2009/05/15/270844.htmlSonny LiSonny LiFri, 15 May 2009 06:47:00 GMThttp://www.blogjava.net/sonnylys/archive/2009/05/15/270844.htmlhttp://www.blogjava.net/sonnylys/comments/270844.htmlhttp://www.blogjava.net/sonnylys/archive/2009/05/15/270844.html#Feedback5http://www.blogjava.net/sonnylys/comments/commentRss/270844.htmlhttp://www.blogjava.net/sonnylys/services/trackbacks/270844.html请高手解救小弟，万分感激！使用dom4j如何实现按Element的某个属性排序？？？如下面xml文件

<?xml version="1.0" encoding="GBK"?>
<books>
  <book name="请高手解救下小弟" price="30.00">
  <book name="万分感激" price="40.00">
  <book name="谢谢大家的回应" price="50.00">
 </books>

我想获取books节点下的所有book子节点，并按price属性排序，如何实现？

本人阅读dom4j的文档，找到org.dom4j.xpath.DefaultXPath.selectNodes(Object context, XPath sortXPath)方法第二个参数"sortXPath"好像是用来排序的，但不知如何写sortXPath参数。

先谢过，在线等。


说明：本人不需要xsl排序方案。

Sonny Li 2009-05-15 14:47 发表评论
]]>自编 jtle(javascript template language engine) javascript模板语言引擎, 轻松处理json数据!http://www.blogjava.net/sonnylys/archive/2008/05/25/202677.htmlSonny LiSonny LiSun, 25 May 2008 02:24:00 GMThttp://www.blogjava.net/sonnylys/archive/2008/05/25/202677.htmlhttp://www.blogjava.net/sonnylys/comments/202677.htmlhttp://www.blogjava.net/sonnylys/archive/2008/05/25/202677.html#Feedback4http://www.blogjava.net/sonnylys/comments/commentRss/202677.htmlhttp://www.blogjava.net/sonnylys/services/trackbacks/202677.html  阅读全文

Sonny Li 2008-05-25 10:24 发表评论
]]>Prototype学习志 之 bind方法的“谜”迷人色彩！http://www.blogjava.net/sonnylys/archive/2008/05/08/199080.htmlSonny LiSonny LiThu, 08 May 2008 14:37:00 GMThttp://www.blogjava.net/sonnylys/archive/2008/05/08/199080.htmlhttp://www.blogjava.net/sonnylys/comments/199080.htmlhttp://www.blogjava.net/sonnylys/archive/2008/05/08/199080.html#Feedback6http://www.blogjava.net/sonnylys/comments/commentRss/199080.htmlhttp://www.blogjava.net/sonnylys/services/trackbacks/199080.html     Prototype的bind方法常常把许多学习它的人弄得糊糊涂涂，google和baidu一番后还是一塌胡涂！本人也如此；本人觉得它是个从“谜人”到“迷人”的方法。此文将发表个人对此方法的理解，希望能帮助大家成功渡“谜”，到达“迷人”的彼岸！
<html>
<head>
 <script src="prototype.js"></script> //@7
 <script type="text/javascript">
   /**********************************
    *
    *  实现渲染一个带有"上一页"和"下一页"的组件,点击"上一页",当前页减1,点击"下一页"当前页加1
    *
    */
   function PagesSystem(container){
     this.currentPage = 10; //当前页
     this.pageSysDiv = document.getElementById(container); //容器
    
     this.init = function() { //将组件画出来
       this.createPrePage();
       this.createNextPage();
     };
    
     this.changePage = function(evtObj) { //根据点击后传过来的参数决定是加1或是减1
        if(evtObj == "next") {
          this.currentPage += 1;
          alert("你已执行将当前页加1，现在当前页是：" + this.currentPage);
        }else if(evtObj == "pre"){
          //此处不作if(this.currentPage ==1) return;限制为了体现当传入的参数为"pre"时，下面的alert()一定会执行
          this.currentPage -= 1;
          alert("你已执行将当前页减1，现在当前页是：" + this.currentPage);
        }
      
     };
    
     this.createPrePage = function() {//创建上一页组件
       var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:16px";
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.changePage; //@1 当点击此（"上一页"）铵钮时执行
       _a.innerText = "上一页";
       _span.appendChild(_a);
       this.pageSysDiv.appendChild(_span);
     };
    
     this.createNextPage = function() {//创建下一页组件
       var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:16px";
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.changePage; //@2 当点击此（"下一页"）铵钮时执行
       _a.innerText = "下一页";
       _span.appendChild(_a);
       this.pageSysDiv.appendChild(_span);
     };
   
     this.init(); //执行初始化
   }
   function testUse(msg){//@3在提出问题环节用到
     alert(msg);
   }
   window.onload = function() {
     var ps = new PagesSystem("pageDiv");
   }
 </script>
</head>
<body>
  <div id="pageDiv"></div>
</body>
</html>

二、分析代码，提出问题，解决问题
1、无法传递参数问题。
   你细看@1和@2处,当前的代码实现是无法把"pre"和"next"参数传递过去，于是，当你运行例子，点击上一页或下一页，都是没信息alert出来的！
   这种情况，是很常见的。那么，如何实现将参数传过去。
   将@1处代码修改如下：
                    _a.onclick = function(){ //@1 当点击此（"上一页"）铵钮时执行
                         testUse("pre"); //参看@3
                         this.changePage("pre");
                    }
   这样创建一个匿名函数赋予_a.onclick,也就是当_a对象的onclick事件触发后将执行此匿名函数，而匿名函数将帮忙调用testUse("pre")和this.changePage("pre")两个方法，
   从而达成传递参数。
   修改代码，运行例子后点击上一页后会显示如下两个信息，一个是testUse中输出的信息，证明了实现参数传递，另一个却是运行错误提示。
   

   这是执行this.changePage("pre")方法抛出来的。它并没像我们预期想的运行。
   从提示获到的信息是，对象不支持此属性或方法（如果浏览器报的是中文提示就可以看到“对象不支持此方法或属性”的提示）
   回头看this.changePage("pre")方法，很明显this是错误提示中所指的对象，在本应用中指PagesSystem对象指针的引用，在应用中确实是声明了this.changePage("pre")方法，但为什么说没此方法呢？？？？
2、在问题1中，我们已成功解决传递参数，但PagesSystem对象的changePage方法被谁偷了？？？
   再将刚才的代码修改如:
                     _a.onclick = function(){ //@1 当点击此（"上一页"）铵钮时执行
                       testUse("pre"); //参看@3
                       alert(this.tagName);
                       this.changePage("pre");
                    }
   再运行例子，你会发现输出this.tagName的值为 A, 它就是_a对象。噢，我的天啊。怎么会这样？？？
   哈哈..._a对象就是<a href=""/></a>这个html 元素对象，这里是“上一页”铵钮对象，原型中哪来changePage方法啊，所以报错！！！
   你可以这样理解，看如下代码:
     function PagesSystem(container){//此应用中的PagesSystem对象，changePage方法的上下文对象,也可以称为归属者。
       //...省略其它代码
       this.changePage = function(evtObj) { //根据点击后传过来的参数决定是加1或是减1
         if(evtObj == "next") {
           this.currentPage += 1;
           alert("你已执行将当前页加1，现在当前页是：" + this.currentPage);
         }else if(evtObj == "pre"){
           //此处不作if(this.currentPage ==1) return;限制为了体现当传入的参数为"pre"时，下面的alert()一定会执行
           this.currentPage -= 1;
           alert("你已执行将当前页减1，现在当前页是：" + this.currentPage);
         }
       };
       //...省略其它代码
     }
    
     这样的代码，你很容易看出this是指PagesSystem, 那么我们继续往下看
     假设 A对象的原型如下:
     function A() {//@4
       //...
        this.onclick;
       
        this.doClick = function() { //点击
          this.onclick();//执行
        }
      
       //...
     }
    
     当你在PagesSystem方法中
                   _a.onclick = function(){ //@1 当点击此（"上一页"）铵钮时执行
                       testUse("pre"); //参看@3
                       alert(this.tagName);
                       this.changePage("pre");
                    }
    写上这样的代码后,你可以离谱认为@4的代码的模样是如下：
    function A() {//@4
       //...
        this.onclick = function(){ //@1 当点击此（"上一页"）铵钮时执行
             testUse("pre"); //参看@3
             alert(this.tagName); //@5
             this.changePage("pre"); //@6
          };
       
        this.doClick = function() { //点击
          this.onclick();//执行
        }
       //...
     }
     呵呵。。如果这样看的话，@5,@6中的this当然是指a对象，没异义。那当然是没changePage方法。
    
3、那么如何解决这问题呢？？
   很幸运，prototype.js中的bind方法就可以解决这样的问题，它还解决我们上面提的传参数问题。
   看bind大侠帅样:
  
   bind: function() {
    if (arguments.length < 2 && Object.isUndefined(arguments[0])) return this;
    var __method = this, args = $A(arguments), object = args.shift();
    return function() {
      return __method.apply(object, args.concat($A(arguments)));
    }
  }
  bind方法中的this就是bind方法的所属者（上下文）如: f.bind(),f是一个声明了的方法,那么bind 方法里的this就是f
  再细看，bind方法其实做的工作是返回一个匿名函数,此匿名函数帮忙执行this所指的方法（bind方法的所属者），如果你有如下代码
  function f(msg) {
    this.functionName = "f method";
    alert(msg);
    alert(this.functionName);
  }
 
  button.onclick = f.bind(this, msg); //这里的this指f, 在bind方法中用object = args.shift()获得，这样的话，当点击button后执行f方法, f方法中的this就不会无故被 button代替。^_^不然，会报错的啊，button哪来functionName，呵呵...
  它既解决将msg参数传过去，同时将f绑定到button环境下，bind方法得名可能就是这意义吧。至于如何实现将f绑定，靠的就是apply方法。
  apply谜人色彩就由你们自行去揭开啦！
  介绍了bind大侠给大家，我的例子就麻烦你们自己调通它啦。谢了。。
  
  欢迎交流指正。

 备注： 如需转载本文，请注明出处
    



Sonny Li 2008-05-08 22:37 发表评论
]]>用javascript实现较为通用的客户端分页组件http://www.blogjava.net/sonnylys/archive/2008/05/04/198279.htmlSonny LiSonny LiSun, 04 May 2008 14:54:00 GMThttp://www.blogjava.net/sonnylys/archive/2008/05/04/198279.htmlhttp://www.blogjava.net/sonnylys/comments/198279.htmlhttp://www.blogjava.net/sonnylys/archive/2008/05/04/198279.html#Feedback23http://www.blogjava.net/sonnylys/comments/commentRss/198279.htmlhttp://www.blogjava.net/sonnylys/services/trackbacks/198279.html <html>
<head>
 <script src="pageSystem.js"></script>
 <script>
   var psys;
   window.onload = function() {
    psys = new PageSystem(1120, "pageDiv", 10, showMsg); //总记录数, 分页系统容器，每组10页,回调
    psys.init();
  }
 
  function showMsg(currentPage, pageSize) {
    //回调方法自定义，两个参数，第一个为当前页，第二个为每页记录数
    /****************将currentPage和pageSize请求数据更新列表,最好使用ajax技术******************/
    alert("请求数据要的相应参数>> currentPage: "+ currentPage + " pageSize: " + pageSize);
  }
  
   /*****如果要更新分页系统请如下操作******/
    //psys.update(count); //@count 为记录总数
    function updatePageSys() {
    
     psys.update(150); //@count 为记录总数
   }
  </script>
  <style>
    #pageDiv{
      font-size:13px;
    }
  </style>
</head>
<body>
  <div id="pageDiv">
  </div>
  <br/><br/>
  <a href="#" onclick="updatePageSys();"/>更新分页系统</a>
</body>
</html>

2、pageSystem.js
function PageSystem(count, divID, grountCount, callBack) {
     this.totolCount = count; //总记录数
     this.initMaxPage = grountCount? grountCount: 5;  //显示页数，如 1 2 3 4 5
     this.pageSize = 10;  //每页记录数
     this.currentMax = 0; //当前显示的最大页码, 如 1 2 3 4 5; 5为最大页码
     this.currentMin = 0; //当前显示的最小页码, 如 11 12 13 14 15; 11为最小页码
     this.homePage = 0; //首页
     this.endPage = 0; //未页
     this.currentPage = 0; //当前页
     this.currentActiveSpan; //当前活动a容器
     this.pageDivObj = document.getElementById(divID); //分页系统容器
     this.pages = 0; //总页数，计算得到
     //this._url = _url; //提交URL
     this.callBack = callBack; //回调
     var that = this; //指针的引用
    
   
     this.init = function() {
        this.pages = parseInt(this.totolCount / this.pageSize); //获得总共有几页
        this.pages = this.totolCount % this.pageSize == 0? this.pages: this.pages+1;
        this.createHomePage();
        this.createPrePage();
        var n = 1;
        while(n <= this.pages) {
          if(n > this.initMaxPage){
             break; //到达最大显示数
          }
          var _span = document.createElement("SPAN");
          _span.style.cssText = "margin-left:10px";
          if(n == 1) { //初始化时第一页为活动页
            _span.innerText = n;
            this.currentActiveSpan = _span;
          }else{
             var _a = document.createElement("A");
             _a.href = "#";
            _a.onclick = this.reView;
            _a.innerText = n;
            _span.appendChild(_a);
          }
          this.pageDivObj.appendChild(_span);
          n++;
        }
        if(this.pages != 0) {
          this.currentMax = n - 1; //当前组最大页码 1 2 3 4 5值为5
          this.currentMin = 1; //当前最小页码 1 2 3 4 5 值为1
          this.homePage = 1; //首页
          this.endPage = this.pages; //未页
          this.currentPage = 1; //当前页
        }
        //alert(this.currentMax);
        //alert(this.currentMin);
        this.createNextPage();
        this.createEndPage();
      
      
      
    };
    this.query = function() {
      var curPage = that.currentPage; //当前页
      var pageSize = that.pageSize;
      if(that.callBack) that.callBack(curPage, pageSize);
         
    };
    this.reView = function() {
     //重新渲染UI
       that.reViewActivePage();
       that.query();
    };
    this.reViewActivePage = function() {
      //重新渲染当前页视图
      var actA = event.srcElement; //当前被点击的 a对象
      var ap = actA.parentNode; //获得当前a容器span对象
      //还原当前页视图
       var _a = document.createElement("A");
        _a.href = "#";
        _a.onclick = this.reView;
        _a.innerText = that.currentActiveSpan.innerText;
        that.currentActiveSpan.innerText = "";
        that.currentActiveSpan.appendChild(_a);
       //渲染新的当前页视图
       that.currentActiveSpan = ap; //切换当前活动页容器
       var curPage = parseInt(actA.innerText);
       that.currentActiveSpan.removeChild(actA);
       that.currentActiveSpan.innerText = curPage;
       this.currentPage = curPage; //更改当前页码
       if(!that.toNextGroup()) that.toPreGroup();
    };
    this.toNextGroup = function() {
       //重新渲染显示页下一组 1 2 3 4 5 --> 5 6 7 8 9
       if(that.currentPage == that.currentMax) {//点击的页码为当前组最大页码，当go 下一组
         if(that.currentPage != that.endPage) { //如果点了未页当然不会再有下一组啦！
            that.pageDivObj.innerHTML = ""; //@1
            var pageCode = parseInt(that.currentPage) + 1; //显示页码
            var n = 2; //当前活动页不重创
            this.createHomePage();
            this.createPrePage();
            that.currentActiveSpan.innerText = that.currentPage;
            that.pageDivObj.appendChild(that.currentActiveSpan); //将当前活动页回放,请看@1
            while(pageCode <= that.pages) {
            if(n > that.initMaxPage){
               break; //到达最大显示数
            }
            var _span = document.createElement("SPAN");
            _span.style.cssText = "margin-left:10px";
            var _a = document.createElement("A");
             _a.href = "#";
            _a.onclick = that.reView;
            _a.innerText = pageCode;
            _span.appendChild(_a);
            that.pageDivObj.appendChild(_span);
            pageCode++;
            n++;
          }
          that.currentMax = pageCode - 1;
          that.currentMin = that.currentPage;
         // alert("currentMax: " + that.currentMax);
         // alert("currentMin: " + that.currentMin);
          this.createNextPage();
          that.createEndPage();
          return true;
         }//end if
       }//end if
       return false;
    };
    this.toPreGroup = function() { //
      //重新渲染显示页上一组 5 6 7 8 9 -->1 2 3 4 5
      if(that.currentPage == that.currentMin) { //点了组中最小页码
        if(that.currentPage != 1) {
           that.pageDivObj.innerHTML = ""; //@2
            var pageCode = parseInt(that.currentPage) - (that.initMaxPage -1); //显示页码
            var n = 2; //当前活动页不重创
            this.createHomePage();
            this.createPrePage();
            while(true) {
            if(n > that.initMaxPage){
               break; //到达最大显示数
            }
            var _span = document.createElement("SPAN");
            _span.style.cssText = "margin-left:10px";
            var _a = document.createElement("A");
             _a.href = "#";
            _a.onclick = that.reView;
            _a.innerText = pageCode++;
            _span.appendChild(_a);
            that.pageDivObj.appendChild(_span);
            n++;
          }
          that.currentMax = that.currentPage;
          that.currentMin = pageCode - (that.initMaxPage -1);
          //alert("currentMax: " + that.currentMax);
         // alert("currentMin" + that.currentMin);
          that.currentActiveSpan.innerText = that.currentPage;
            that.pageDivObj.appendChild(that.currentActiveSpan); //将当前活动页回放,请看@2
            that.createNextPage();
            that.createEndPage();
        }//end if
      }//end if
    };
     this.toHomePage = function(){
       //去到首页
       if(that.pages == 0) return;
       if(that.currentPage != 1) {//切组
         that.pageDivObj.innerHTML = "";
         that.init();
       }//end if
       that.currentPage = 1;
       that.currentMin = 1;
       that.currentMax = that.initMaxPage;
       that.query();
     };
     this.toEndPage = function() {
       //去到未页
        if(that.pages == 0 ||that.currentPage == that.pages) return;
        if(true) {//切组条件修改，此条件作废,临时设为true
        that.pageDivObj.innerHTML = "";
        that.createHomePage();
        that.createPrePage();
        var pageCode = 1;
     var n = 1;
      while(pageCode <= that.pages) {
        if(n > that.initMaxPage-1){
          n = 1;
        }
        n++;
        pageCode++;
      }
     
      pageCode = that.pages - (n-2);
      for(var j = 1; j < n; j++) {
         var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:10px";
       if(pageCode == that.pages) { //初始化时第一页为活动页
        _span.innerText = pageCode;
        that.currentActiveSpan = _span;
       }else{
         var _a = document.createElement("A");
         _a.href = "#";
         _a.onclick = that.reView;
         _a.innerText = pageCode;
         _span.appendChild(_a);
         pageCode++;
       }
       that.pageDivObj.appendChild(_span);
      }
      
         that.createNextPage();
          that.createEndPage();
       }//end if
       that.currentPage = that.pages;
       that.currentMin = that.pages - (n-2);
       that.currentMax = that.pages;
      // alert("currentMin: " + that.currentMin);
       //alert("currentMax: " + that.currentMax);
      // alert("pages: " + that.pages);
       that.query();
     };
    
     this.next = function() {
       //下一页
     };
     this.pre = function() {
       //上一页
     };
     this.update = function(count) {
       //更新分页系统
       this.totolCount = count;
       that.pageDivObj.innerHTML = "";
       this.init();
     };
     this.createPrePage = function() {
       return;
       var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:16px";
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.pre;
       _a.innerText = "上一页";
       _span.appendChild(_a);
       this.pageDivObj.appendChild(_span);
     };
     this.createNextPage = function() {
       return;
       var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:16px";
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.next;
       _a.innerText = "下一页";
       _span.appendChild(_a);
       this.pageDivObj.appendChild(_span);
     };
     this.createHomePage = function() {
       var homeSpan = document.createElement("SPAN");
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.toHomePage;
       _a.innerText = "首页";
       homeSpan.appendChild(_a);
       this.pageDivObj.appendChild(homeSpan);
     };
     this.createEndPage = function() {
       var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:16px";
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.toEndPage;
       _a.innerText = "未页(" + this.pages +")";
       _span.appendChild(_a);
       this.pageDivObj.appendChild(_span);
     }
   }

3、效果图
 
如需转载，请注明原文出处！谢谢合作。

Sonny Li 2008-05-04 22:54 发表评论
]]>用"window.showModalDialog()"实现DIV模式弹出窗口http://www.blogjava.net/sonnylys/archive/2008/05/01/197683.htmlSonny LiSonny LiThu, 01 May 2008 13:33:00 GMThttp://www.blogjava.net/sonnylys/archive/2008/05/01/197683.htmlhttp://www.blogjava.net/sonnylys/comments/197683.htmlhttp://www.blogjava.net/sonnylys/archive/2008/05/01/197683.html#Feedback15http://www.blogjava.net/sonnylys/comments/commentRss/197683.htmlhttp://www.blogjava.net/sonnylys/services/trackbacks/197683.html 1、test.html  测试页
 <html>
 <head>
   <title>测试页面</title>
   <style>
     .list {
       border-top:1 solid #8A2BE2;
       border-left:1 solid #8A2BE2;
       border-right:1 solid #8A2BE2;
     }
     .list td {
       border-bottom: 1 solid #8A2BE2;
     }
   </style>
   <script>
      function $(el) {
        return document.getElementById(el);
      }
      function showWin(param) {
        window.showModalDialog("dailog.htm", param, "dialogWidth:" +param.width +"px;dialogHeight:"+param.height+"px;center:yes;help:no;scroll:no;status:no;resizable:no");
      }
     
      function TB(tbid) {
        this.tb = typeof(tbid) == "string"? $(tbid): tbid;
        this.getValue = function(rowIndex, cellIndex){
          var trs = this.tb.rows[rowIndex];
          var _td = trs.cells[cellIndex];
          return _td.innerText;
        }
        this.setValue = function(rowIndex, cellIndex, value) {
          var _tr = this.tb.rows[rowIndex];
          var _td = _tr.cells[cellIndex];
          _td.innerText = value;
        }
       
        /********获取行索引********/
        this.findRowIndex = function(eventSrc) {
          var _tr = eventSrc; //eventSrc事件源,必须在TD里获事件源是TD或TR本身
          while(_tr.tagName != "TR") {
            _tr =  _tr.parentNode;
          }
          var trs = this.tb.rows;
          for(var i = 0; i < trs.length; i++){
            if(_tr == trs[i]) return i;
          }
        }
      }
          
      function edit() {
        var tb = new TB("data");
        rIndex = tb.findRowIndex(event.srcElement);
        $("updateRowIndex").value = rIndex;
        $("userName").value = tb.getValue(rIndex, 1); //获得姓名
        $("sex").value = tb.getValue(rIndex, 2); //获得性别
        $("age").value = tb.getValue(rIndex, 3); //获得年龄
         showWin({title:"修改用户信息", width:390, height:230, _div:"openWin",parent:window});
      }
     
      function saveAndUpdateView(){
        var updateRowIndex = $("updateRowIndex").value;
        var tb = new TB($f("data")); //$f()在dailog.html定义,获到的table是父窗口中的table
        tb.setValue(updateRowIndex, 1, $("userName").value);
        tb.setValue(updateRowIndex, 2, $("sex").value);
        tb.setValue(updateRowIndex, 3, $("age").value);
        close();
      }
   </script>
  
 </head>
 <body>
  <p style="margin-top:60px">
   <center>
     <table id="data" class="list" width="460px">
       <tr>
         <td>编号</td>
         <td>用户名</td>
         <td>性别</td>
         <td>年龄</td>
         <td>操作</td>
       </tr>
       <tr>
         <td>1</td>
         <td>李永胜</td>
         <td>男</td>
         <td>27</td>
         <td><span style="background:#FAEBD7;cursor:hand" onclick="edit();">&nbsp;修改&nbsp;</span></td>
       </tr>
        <tr>
         <td>2</td>
         <td>林兄</td>
         <td>男</td>
         <td>27</td>
         <td><span style="background:#FAEBD7;cursor:hand" onclick="edit();">&nbsp;修改&nbsp;</span></td>
       </tr>
        <tr>
         <td>3</td>
         <td>叶兄</td>
         <td>男</td>
         <td>23</td>
         <td><span style="background:#FAEBD7;cursor:hand" onclick="edit();">&nbsp;修改&nbsp;</span></td>
       </tr>
     </table>
   </center>
  </p>
 
  <!---弹出窗口显示的内容---->
  <div id="openWin" style="display:none;">
    <form>
      <fieldSet>
        <legend>修改用户</legend>
        <table>
          <tr>
            <td>用户名</td><td><input type="text" id="userName"/></td>
          </tr>
          <tr>
            <td>性别</td><td><input type="text" id="sex"/></td>
          </tr>
          <tr>
            <td>年龄</td><td><input type="text" id="age"/></td>
          </tr>
        </table>
      </fieldSet>
      <input type="hidden" id="updateRowIndex"/>
    </form>
    <span style="background:#FAEBD7;cursor:hand" onclick="saveAndUpdateView();">&nbsp;修改&nbsp;</span>
  </div>
 </body>
</html>

2、dailog.html 窗口原型

<html>
 <head>
   <script>
     var param = window.dialogArguments; //传过来的模式对话框窗口参数
     document.title = param.title; //窗口标题,必须在窗口创建前实现s
    
   /********将父窗口的js加载进来********/
     var scripts = param.parent.document.scripts;
     var _head = document.getElementsByTagName("head")[0];
     for(var n = 0; n < scripts.length; n++) {
       if(scripts[n].src) {
         var _script = newEl("script");
         _script.src = scripts[n].src;
         bind(_head, _script);
       }else{//加载直接在html文档中写的script
         var _script = newEl("script");
         _script.text = scripts[n].text;
          bind(_head, _script);
       }
     }
    
     /*******根据ID获得父窗口的元素*********/
     function $f(el) {
       return param.parent.document.getElementById(el);
     }
   
    /***********创建一个HTML元素*******/
     function newEl(tagName) {
       return document.createElement(tagName);
     }
     /***********追加元素***************/
     function bind(ower, child) {
       ower.appendChild(child);
     }
     /*******在浏览器完成对象的装载后立即触发*********/
     window.onload = function() {
       var winDiv;
       if(typeof(param._div) == "string") {
         winDiv = param.parent.document.getElementById(param._div); //父窗口window对象,因为param._div对象在父窗口
       }else{//直接传对象过来
         winDiv = param._div;
       }
       $("mainDiv").innerHTML = winDiv.innerHTML; //将DIV内容在弹出窗口中渲染
    }
   </script>
 </head>
 <body>
 <center>
  <div id="mainDiv" style="margin-top:20px;width:90%"></div>
 </center>
 </body>
</html>

如需转载，请注明原文出处！谢谢合作。


Sonny Li 2008-05-01 21:33 发表评论
]]>用模式对话框实现“消息提示框”和“操作提示框”http://www.blogjava.net/sonnylys/archive/2008/05/01/197655.htmlSonny LiSonny LiThu, 01 May 2008 07:54:00 GMThttp://www.blogjava.net/sonnylys/archive/2008/05/01/197655.htmlhttp://www.blogjava.net/sonnylys/comments/197655.htmlhttp://www.blogjava.net/sonnylys/archive/2008/05/01/197655.html#Feedback2http://www.blogjava.net/sonnylys/comments/commentRss/197655.htmlhttp://www.blogjava.net/sonnylys/services/trackbacks/197655.html   由于本人认为用 alert()和confirm()的消息框和操作确认对话框，界面不太友好，下面介绍用模式对话框实现“消息提示  框”和“操作提示框”；用模式对话框也可以实现弹出窗口(抱括Iframe模式及DIV模式），DIV模式较麻烦些，不过，还挺实用，这里不作介绍。

1、test.html 测试页
<html>
 <head>
   <title>测试页面</title>
   <script>
     /**** 打开消息框 ***
   * @param 为Object类型,原型为 {msg:"val1", time:val2},val1为要提示的消息，val2为窗口出来后延迟关闭的时间
   *
   */
   function showMsg(param) {
     window.showModalDialog("msg.html", param, "dialogWidth:280px;dialogHeight:180px;center:yes;help:no;scroll:no;status:no;resizable:no");
   }

  /****操作确认窗口*****
   * @param 为string类型,提示信息
   * @return true为选取了“确定”铵钮，false为选取了“取消”铵钮
   */
   function confirm(msg) {
    return window.showModalDialog("confirm.html", msg, "dialogWidth:280px;dialogHeight:180px;center:yes;help:no;scroll:no;status:no;resizable:no");
  }
  
  
     function confirmDel() {
       var rval = confirm("确定删除此用户吗？");
       if(rval) {
         showMsg({msg:"你点击了确定铵钮", time:1200});
       }else{
         showMsg({msg:"你点击了取消铵钮", time:1200});
       }
     }
   </script>
 </head>
 <body>
   <center>
     <a href="#" onclick="showMsg({msg:'1秒钟后会自动关闭的提示信息框', time:1000})">会自动关闭的提示信息框</a>
     <br/>
     <a href="#" onclick="confirmDel();">操作确认对话框</a>
   </center>
 </body>
</html>

2、msg.html 消息框通用模板
<html>
 <head>
   <title>提示对话框</title>
   <script>
      var obj = window.dialogArguments; //传过来的模式对话框窗口参数
      /****在obj.time秒后关闭窗****/
      window.setTimeout(function() {
       window.close();
      }, obj.time);
   </script>
 </head>
 <body>
  <p style="margin-top:36px">
   <center>
     <script>
        document.write(obj.msg);  //打印信息
     </script>
   </center>
  </p>
 </body>
</html>

3、confirm.html
<html>
 <head>
   <title>操作确认对话框</title>
   <script>
     function setState() {
       returnValue = event.srcElement.id == "ok"? true: false;
       window.close();
     }
   </script>
 </head>
 <body>
  <p style="margin-top:26px">
   <center>
     <script>
       var msg = window.dialogArguments? window.dialogArguments: "";
       document.write(msg);
     </script>
     <br/>
     <div style="margin-top:20px">
      <a href="#" id="ok" onclick="setState()">确定</a>
      <a href="#" id="cal" onclick="setState()">取消</a>
     </div>
   </center>
  </p>
 </body>
</html>

运行test.html例子可以看到相应的效果





Sonny Li 2008-05-01 15:54 发表评论
]]>简单的javascript入门知识http://www.blogjava.net/sonnylys/archive/2008/04/27/196669.htmlSonny LiSonny LiSun, 27 Apr 2008 14:53:00 GMThttp://www.blogjava.net/sonnylys/archive/2008/04/27/196669.htmlhttp://www.blogjava.net/sonnylys/comments/196669.htmlhttp://www.blogjava.net/sonnylys/archive/2008/04/27/196669.html#Feedback2http://www.blogjava.net/sonnylys/comments/commentRss/196669.htmlhttp://www.blogjava.net/sonnylys/services/trackbacks/196669.html     一个 JavaScript 程序其实是一个文档，一个文本文件，它嵌入到 HTML 文档中执行。所以，一般的本文编辑器就可以实现编写javascript代码。
   1、将javascript嵌入到HTML文档中，一般有两种实现方法。一种是直接在HTML文档中的任何地方加入<script>
  <!--你的js代码-->
</script>
值得注意的是，js代码必须在<frameset>之前插入才有效。
另一种是将js代码写在一个以 .js为后缀的js文件里，用以下方法引入到HMTL档供使用
 <script src="你要引入的.js文件的路径" type="text/javascript"></script>
这两种实现的例子如下：
<html>
 <head>
   <title>js exmaple</title>
 <!--直接在HMTL文档中写js代码--> 
  <script> 
      function  sayHello() {
          alert("hello");
     }
   </script>
 <!--从.js文件中加载-->
  <script src="myjs/util.js"></script>
  </head>
 <body>
</body>
</html>
2、变量声明
  javascript中用 var关键字声明一个变量，如：var userName;由于javascript使用的是弱类型，所以声明时不需要指定具体类型，在运行时会根据所赋的值检查其数据类型。比如声明 var v; 在运行中如果出现v = 123;那么变量v指数值类型，如果运行中出现的是v = "123"，v 为字符串类型。
3、函数声明，介绍两种型式
  一、function sayHello(who) { //who为参数
              alert("say hello to: " + who);
         }
  二、var sayHello = function(who) {
               alert("say hello to: " + who);
         }
  说明：第二种声明方式是将函数的指针赋给一个变量，调用如下：sayHello("whoOne");和第一种声明方式调用一样。举个第二种声明方式有用的应用，如，在js代码中，给一个铵钮的onclick事件注册一个方法可以如下声明：    var btn = document.createElement("button"); 
              btn.onclick= function() {
                //添加当点击此铵钮时想执行的js代码
              }
4、事件响应
   声明了的函数可以在js代码里被调用，也可以用于响应事件。如：
 <html>
 <head>
   <title>js exmaple</title>
 <!--直接在HMTL文档中写js代码--> 
  <script> 
      function  sayHello() {
          alert("hello");
     }
   </script>
  </head>
  <body>
   <!--响应button中的onclick事件（单击事件）,调用sayHello()方法-->
   <button onclick="sayHello()">点击将调用sayHello()方法来响应</button>
 </body>
</html>
运行例子，点击铵钮后运行结果如下：
 


备注：这是一篇很简单的javascript相关知识文章，适合对javascript完全没概念的初学者参考， 有误之处，请指正讨论。

  
     
 

  

Sonny Li 2008-04-27 22:53 发表评论
]]>Spring与Struts集成开发http://www.blogjava.net/sonnylys/archive/2008/03/01/183112.htmlSonny LiSonny LiSat, 01 Mar 2008 03:08:00 GMThttp://www.blogjava.net/sonnylys/archive/2008/03/01/183112.htmlhttp://www.blogjava.net/sonnylys/comments/183112.htmlhttp://www.blogjava.net/sonnylys/archive/2008/03/01/183112.html#Feedback2http://www.blogjava.net/sonnylys/comments/commentRss/183112.htmlhttp://www.blogjava.net/sonnylys/services/trackbacks/183112.html
Spring与Struts集成开发

最近喜欢将所学的东西理顺一下，且发现写blog可以达成这目的。
那就来整理一下我对Spring与Struts集成开发的一些想法。

首先确认系统的结构为三层的B/S模式结构，如下图：

在图中看出，Spring和Struts集成开发中，Spring在业务逻辑层被使用（集成）。因为Spring框架的依赖注入，AOP及可声明的事务管理方面的技术优势，使得用Spring来管理业务实体，实体之间的依赖关系，业务逻辑服务接口变得简单且可配置。至此我们要清楚：Spring和Struts集成开发中，Spring在业务逻辑层被使用（集成）。

清楚Struts和Spring在系统结构中分别充当的角色后，接下来要讨论：如何实现集成？
1、使用Spring的ActionSurpert类集成Struts。
org.springframework.web.struts.ActionSurpert是一个继承org.apache.struts.action.Action的类，简要代码如下：
public abstract class ActionSurpert extends Action {
     private WebApplicationContext webApplicationContext;
     public void setServlet(ActionServlet actionServlet) {//当容器实例化此Action时被容器调用
           surper.setServlet(actionServlet);
           if(actionServlet != null) {
              this.webApplicationContext = initWebApplicationContext(actionServlet);//获取webApplicationContext
               //........
           }else{
             //.......
           }           
     } 
     
     //通过getXXX()方法获取   webApplicationContext 对象
     protected final WebApplictionContext getWebApplicationContext() {
            return this.webApplicationContext;
    }
}
通过上述代码可以看出，所有继承了ActionSupport类的Action将可以通过WebApplicationContext对象的getBean(beanKey)方法获得Spring配置文件中定义的各种Bean。
WebApplicationContext要由Web Server来加载，有两种方法：
１、通过org.springframework.web.struts.ContextLoaderPlugIn加载，ContextLoaderPlugIn是个插件，需要在Struts配置文件中配置。
<plug-in className="org.springframework.web.struts.ContextLoaderPlugIn">
   <set-property property = "contextConfigLocation" value="/WEB-INF/applicationContext.xml"></set-property>
</plug-in>
2、在web.xml文件中加载
<context-param>
  <param-name>contextConfigLocation</param-name>
 <param-value>/WEB-INF/applicationContext.xml</param-value>
</context-param>
<servlet>
 <servlet-name>context</servlet-name>
<servlet-class>org.springframework.web.context.ContextLoaderServlet</servlet-name>
<load-on-startup>1</load-on-startup>
</servlet>
举个简单的例子说明一下相关配置信息：
假定有ExampleAction，ExampleBean，ExampleService这几个类，它们工作流程是：
用户请求ExampleAction，ExampleAction调用ExampleService的接口方法对ExampleBean进行相关的操作。
1、applicationContext.xml中配置相关的bean信息
<beans>
<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
  <property name="driverClassName">
   <value>com.mysql.jdbc.Driver</value>
  </property>
  <property name="url">
   <value>jdbc:mysql://localhost:3306/ssh?useUnicode=true&amp;characterEncoding=UTF-8</value>
  </property>
  <property name="username">
   <value>root</value>
  </property>
  <property name="password">
   <value>root</value>
  </property>
 </bean>
<bean id="exampleBean" class="org.mypackge.beans.ExampleBean"/>
<bean id="exampleBeanService" class="org.mypackge.services.ExampleService"/>@
</beans>
通过这样配置后，在ExampleAction中可以用getWebApplicationContext() 获得webApplicationContext对象，然后通过
webApplicationContext的getBean(beanKey)方法获得相应的bean进行业务处理。标了红色的"beanKey"就是applicationContext.xml中<bean>元素定义的bean id，如:webApplicationContext.getBean("exampleBeanService")。@

当然，ExampleAction还要在stuts-config.xml配置文件中配置，这里不作介绍。
2、使用Spring的Action代理集成Struts
这种集成方式的核心思想是，将Struts的配置文件中的所有Action的type属性设为org.springframwork.web.struts.DelegationActionProxy。当用户请求Action时，就执行这代理，代理会在Spring应用上下文中找到真正的Action，然后交给它处理用户的请求。而真正用于处理用户请求的Action的配置放在了Spring的配置文件中。这样，Struts中的Action以及其依赖关系就可以用Spring容器来管理，比如将业务逻辑对象注入到Action中，供其使用。简单片段<bean name="/exampleAction" class="org.myproj.struts.actions.ExampleAction">
....
</bean>
说明：用name属性而不是用id来标识这个Bean,Spring不允许ID中出现"/"，而name可以；"name"属性值要和struts-config.xml文件中相应<action>元素中的path属性值相同(<action path="/exampleAction")，这样Action代理才能找到相应的Action来处理请求。

欢迎讨论，提出宝贵意见。

Sonny Li 2008-03-01 11:08 发表评论
]]>struts与hibernate集成开发http://www.blogjava.net/sonnylys/archive/2008/02/29/183017.htmlSonny LiSonny LiFri, 29 Feb 2008 10:44:00 GMThttp://www.blogjava.net/sonnylys/archive/2008/02/29/183017.htmlhttp://www.blogjava.net/sonnylys/comments/183017.htmlhttp://www.blogjava.net/sonnylys/archive/2008/02/29/183017.html#Feedback0http://www.blogjava.net/sonnylys/comments/commentRss/183017.htmlhttp://www.blogjava.net/sonnylys/services/trackbacks/183017.html 最近学习struts与hibernate相关知识，下面是个人对struts与hibernate集成开发的一些见解，写出来跟大家共同讨论、学习，欢迎指教。
 要集成struts与hibernate进行开发，首先应该了解一下struts和hibernate框架各自的工作原理和模式般的开发流程。
首先介绍struts的大概工作流程，下面通过一张struts工作的时序图来说明其工作流程：

Struts工作流程分析：
1）Web服务器启动，初始化ActionServlet,读取struts-config.xml文件配置信息，把这些信息分发到相应的对象中。
2）用户发出请求后，ActionServlet接收到请求，查找与请求匹配的Action映射对象（ActionMapping)对象是否存在，是：将请求以及Actionform对象传递给相应的Action对象。
3）Action调用业务逻辑服务接口，结合ActionForm，对用户的请求做出处理。
4）Action处理完毕返回ActionForward对象给ActionServlet。ActionForward对象包含了转发目标对象，可以是jsp或Action。
5)ActionServlet根据ActionForward对象的指向继续转发请求，重复从第2步进行处理。
至此，我们对struts 的基本工作流程有个整体的认识，但还没提hibernate相关的任何知识，业务逻辑层也只是在第3)点微提一下。

接下来，我们来看下hibernate是怎样工作的？(注：在这不是讨论ＯＲＭ的实现，只讨论怎让hibernate这ORM中间件工作）
Hibernate是个独立的框架，它不依赖任何的Web Server或Application Server，就是说不需要这些支持。
Hibernate有五个核心接口，分别为Configuratoin, SessionFactory, Session,Query及Criteria。通过这些接口就可以完成hibernate的初始化，对持久化对象进行存取，更新等操作。
下面简要介始一下这些接口。
1、Configuration接口 是Hibernate应用的入口，在开始使用Hibernate的各种功能之前需要先创建Configuration对象。它负责加载Hibernate 应用配置文件，如Configuration cf = new Configuration.configure("com/myproj/hibernate/configs/hibernate.cfg.xml");
2、SessionFactory接口 缓存了Configuration对象所包含的配置信息，能根据映射信息自动生成SQL语句，并提供生成Session对象的方法。
3、Session接口提供一系列持久化的操作。
到此，可以写一小段代码来加看下如何使用hibernate
Configuration cf = new Configuration.configure("com/myproj/hibernate/configs/hibernate.cfg.xml");//配置文件不在此作介绍
SessionFactory sessionFactory = cf.buildSessionFactory();
Session session = sessionFactory.openSession();
session.update();
session.save();等等持久化操作。
至此，简单介绍了hibernate 是怎样工作的，其实我只想让你清楚：“Hibernate是个独立的框架，它不依赖任何的Web Server或Application Server，就是说不需要这些支持。”

那么，我们要回到主题来：如何集成struts与hibernate开发？答案很简单：hibernate和struts本质上是没什么联系的，只要你记住：Hibernate是个独立的框架，它不依赖任何的Web Server或Application Server。用DAO模式把hibernate持久化的操作封装好，供业务逻辑服务类调用就可以。回过头来看struts工作流时序图的解释的第三点：“3）Action调用业务逻辑服务接口，结合ActionForm，对用户的请求做出处理。”，不难得出：
用户请求后，struts负责找到相应的Action对象，Action调用业务逻辑服务接口，业务逻辑服务接口调用DAO接口(这里默认的实现就用hibernate,当然, 还可以有多种对数据库操作的实现）
hibernate充当下面这张图中的"持久层（DAO）"


由于本人对struts及hibernate认识不深，写这篇文章只是抛砖引玉，希望高手们发表意见指正错误，多指教。







Sonny Li 2008-02-29 18:44 发表评论
]]>