mootoolsクラス実装編集可能table

25392 ワード
table mootools
説明しない
  

  
  
  
  
    
   
   
   
   
  1. <html> 
    2. 
   
   
   
   
  2. <head> 
    3. 
   
   
   
   
  3. <script src="mootools.js" ></script> 
    4. 
   
   
   
   
  4. <script> 
    5. 
   
   
   
   
  5.     var Editor=new Class({ 
    6. 
   
   
   
   
  6.         initialize: function(){ 
    7. 
   
   
   
   
  7.             this.elements = {}; 
    8. 
   
   
   
   
  8.             this.error=[]; 
    9. 
   
   
   
   
  9.             this.events=new Events(); 
    10. 
   
   
   
   
  10.         }, 
    11. 
   
   
   
   
  11.         getError:function (){ 
    12. 
   
   
   
   
  12.             var error=this.error; 
    13. 
   
   
   
   
  13.             this.error=[]; 
    14. 
   
   
   
   
  14.             return JSON.encode(error); 
    15. 
   
   
   
   
  15.         } 
    16. 
   
   
   
   
  16.         , 
    17. 
   
   
   
   
  17.         // ， ;   group=44 name="password" [type="password"] 
    18. 
   
   
   
   
  18.         toEdit:function (obj){ 
    19. 
   
   
   
   
  19.             var att=obj.attributes; 
    20. 
   
   
   
   
  20.             var name=att['name'].value; 
    21. 
   
   
   
   
  21.             var type=att['type']?att['type'].value:'text'; 
    22. 
   
   
   
   
  22.             if(!att['group']){ 
    23. 
   
   
   
   
  23.                 this.error.push('unknow group'); 
    24. 
   
   
   
   
  24.                 return; 
    25. 
   
   
   
   
  25.             } 
    26. 
   
   
   
   
  26.             var group = att['group'].value; 
    27. 
   
   
   
   
  27.             this.elements[group]=this.elements[group]||{}; 
    28. 
   
   
   
   
  28.             var ele=this.elements[group]; 
    29. 
   
   
   
   
  29.              
    30. 
   
   
   
   
  30.             if(!ele[name]) 
    31. 
   
   
   
   
  31.             { 
    32. 
   
   
   
   
  32.                 value=obj.innerHTML; 
    33. 
   
   
   
   
  33.                 obj.innerHTML="<input type='"+type+"' style='width:"+(obj.offsetWidth+10)+"px;' name="+name+"  />"; 
    34. 
   
   
   
   
  34.                 $(obj).getElement('input').value=value; 
    35. 
   
   
   
   
  35.                 ele[name]={object:obj}; 
    36. 
   
   
   
   
  36.                 this.events.fireEvent("toEdit",{type:'toEdit',group:group,object:obj,name:name}); 
    37. 
   
   
   
   
  37.             } 
    38. 
   
   
   
   
  38.         }, 
    39. 
   
   
   
   
  39.         getValue:function(group,name){ 
    40. 
   
   
   
   
  40.             var element=this.elements[group]; 
    41. 
   
   
   
   
  41.             if(element[name]){                   
    42. 
   
   
   
   
  42.                 var object=element[name].object; 
    43. 
   
   
   
   
  43.                 var input=$(object).getElement('input'); 
    44. 
   
   
   
   
  44.                 var value=input.value; 
    45. 
   
   
   
   
  45.                 return value; 
    46. 
   
   
   
   
  46.             } 
    47. 
   
   
   
   
  47.             return null; 
    48. 
   
   
   
   
  48.         }, 
    49. 
   
   
   
   
  49.         foreach:function(group,fun){ 
    50. 
   
   
   
   
  50.             var element=this.elements[group]; 
    51. 
   
   
   
   
  51.             for(var name in element){ 
    52. 
   
   
   
   
  52.                 if(element[name]){ 
    53. 
   
   
   
   
  53.                     fun({group:group,name:name,element:element,object:element[name].object,value:this.getValue(group,name)}); 
    54. 
   
   
   
   
  54.                 } 
    55. 
   
   
   
   
  55.             } 
    56. 
   
   
   
   
  56.         } 
    57. 
   
   
   
   
  57.         , 
    58. 
   
   
   
   
  58.         // ， ， json，key name  
    59. 
   
   
   
   
  59.         endEdit:function (obj,group,ext_data){ 
    60. 
   
   
   
   
  60.             var content={}; 
    61. 
   
   
   
   
  61.             for(var e in ext_data){ 
    62. 
   
   
   
   
  62.                 content[e]=ext_data[e]; 
    63. 
   
   
   
   
  63.             } 
    64. 
   
   
   
   
  64.             this.foreach(group,function(data){ 
    65. 
   
   
   
   
  65.                 var object=data.object; 
    66. 
   
   
   
   
  66.                 var check=object.attributes["check"]; 
    67. 
   
   
   
   
  67.                 if(check){ 
    68. 
   
   
   
   
  68.                     alert(eval(check.value)); 
    69. 
   
   
   
   
  69.                     if(!(eval(check.value)(data.value))) 
    70. 
   
   
   
   
  70.                         return false; 
    71. 
   
   
   
   
  71.                 } 
    72. 
   
   
   
   
  72.             }); 
    73. 
   
   
   
   
  73.             this.foreach(group,function(data){ 
    74. 
   
   
   
   
  74.                 var object=data.object; 
    75. 
   
   
   
   
  75.                 content[data.name]=data.value.replace(/'/g,"\\'"); 
    76. 
   
   
   
   
  76.                 object.innerHTML=data.value; 
    77. 
   
   
   
   
  77.                 data.element[data.name]=null; 
    78. 
   
   
   
   
  78.             }); 
    79. 
   
   
   
   
  79.             this.events.fireEvent("endEdit",{type:'endEdit',object:obj,group:group}); 
    80. 
   
   
   
   
  80.             return JSON.encode(content); 
    81. 
   
   
   
   
  81.         } 
    82. 
   
   
   
   
  82.     }); 
    83. 
   
   
   
   
  83.     var editor=new Editor(); 
    84. 
   
   
   
   
  84.     editor.events.addEvent("toEdit",editStart); 
    85. 
   
   
   
   
  85.     editor.events.addEvent("endEdit",editEnd); 
    86. 
   
   
   
   
  86.     function check_num(value){ 
    87. 
   
   
   
   
  87.         return value.length<10; 
    88. 
   
   
   
   
  88.     } 
    89. 
   
   
   
   
  89.     function editStart(data){ 
    90. 
   
   
   
   
  90.         //alert(data.group); 
    91. 
   
   
   
   
  91.         $("button"+data.group).style.display=""; 
    92. 
   
   
   
   
  92.     } 
    93. 
   
   
   
   
  93.     function editEnd(data){ 
    94. 
   
   
   
   
  94.         //alert(data.group); 
    95. 
   
   
   
   
  95.         $("button"+data.group).style.display="none"; 
    96. 
   
   
   
   
  96.     } 
    97. 
   
   
   
   
  97.      
    98. 
   
   
   
   
  98.      
    99. 
   
   
   
   
  99.     function preview() 
    100. 
   
   
   
   
  100.     {  
    101. 
   
   
   
   
  101.         bdhtml=window.document.body.innerHTML;  
    102. 
   
   
   
   
  102.         sprnstr="<!--startprint-->";  
    103. 
   
   
   
   
  103.         eprnstr="<!--endprint-->";  
    104. 
   
   
   
   
  104.         prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);  
    105. 
   
   
   
   
  105.         prnhtmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));  
    106. 
   
   
   
   
  106.         window.document.body.innerHTML=prnhtml;  
    107. 
   
   
   
   
  107.         window.print();  
    108. 
   
   
   
   
  108.     }  
    109. 
   
   
   
   
  109.      
    110. 
   
   
   
   
  110. </script> 
    111. 
   
   
   
   
  111. </head> 
    112. 
   
   
   
   
  112. <body> 
    113. 
   
   
   
   
  113. <table border='1'> 
    114. 
   
   
   
   
  114. <tr> 
    115. 
   
   
   
   
  115.     <td onclick="editor.toEdit(this);" group=44 check="check_num" name="name">aaa</td> 
    116. 
   
   
   
   
  116.     <td onclick="editor.toEdit(this);" group=44 name="password" type="password">123</td> 
    117. 
   
   
   
   
  117.     <td onclick="editor.toEdit(this);" group=44 name="id">1222</td> 
    118. 
   
   
   
   
  118.     <td><span onclick="editor.endEdit(this);" group=44 name="span">s</span></td> 
    119. 
   
   
   
   
  119.     <td><input id="group44" type='button' onclick="$('message').innerHTML=editor.endEdit(44,{group_id:44}); $('error').innerHTML=editor.getError();" value="ok"/></td> 
    120. 
   
   
   
   
  120.     <td id='message'></td> 
    121. 
   
   
   
   
  121.     <td id='error'></td> 
    122. 
   
   
   
   
  122. </tr> 
    123. 
   
   
   
   
  123. <!--startprint--> 
    124. 
   
   
   
   
  124. <tr> 
    125. 
   
   
   
   
  125.     <td onclick="editor.toEdit(this);" group=55 check="check_num" name="name">aaa</td> 
    126. 
   
   
   
   
  126.     <td onclick="editor.toEdit(this);" group=55 name="password" type="password">123</td> 
    127. 
   
   
   
   
  127.     <td onclick="editor.toEdit(this);" group=55 name="id">1222</td> 
    128. 
   
   
   
   
  128.     <td onclick="editor.toEdit(this);" name="id">1222</td> 
    129. 
   
   
   
   
  129.     <td><span onclick="editor.toEdit(this);" group=55 name="span">s</span></td> 
    130. 
   
   
   
   
  130.     <td><input id="button55" type='button' style="display:none" onclick="$('message').innerHTML=editor.endEdit(this,55,{group_id:55}); $('error').innerHTML=editor.getError();" value="ok"/></td> 
    131. 
   
   
   
   
  131.     <td id='message'></td> 
    132. 
   
   
   
   
  132.     <td id='error'></td> 
    133. 
   
   
   
   
  133. </tr> 
    134. 
   
   
   
   
  134. <!--endprint--> 
    135. 
   
   
   
   
  135. <tr> 
    136. 
   
   
   
   
  136.     <td><input type="button" onclick="preview()" /> 
    137. 
   
   
   
   
  137.     </td> 
    138. 
   
   
   
   
  138. </tr> 
    139. 
   
   
   
   
  139. </table> 
    140. 
   
   
   
   
  140. </body> 
    141. 
   
   
   
   
  141. </html> 
    142.

binary search:トッポッキ作り
[JAVA]オブジェクト向け(2)-