首页>>Jquery文字>>可以分列排序,隐藏的表格,异步加载 mootools(2013-11-22)

可以分列排序,隐藏的表格,异步加载 mootools

可以分列排序,隐藏的表格,异步加载 mootools
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div style="margin:0 auto;width:80%">  
  2. <a href="#" onclick="grid.addRecords(newRecords);return false">Add records</a> |  
  3. <a href="#" onclick="grid.hideColumn('address');return false">Hide Address column</a> |   
  4. <a href="#" onclick="grid.showColumn('address');return false">Show Address column</a>  
  5.     </div>  
  6. <div id="gridContainer" style="margin:0 auto;width:80%;"></div>  
  7. <div id="debug"></div>  
  8. <script type="text/javascript">  
  9. if(!window.console){  
  10.     console = {  
  11.         log : function(obj){  
  12.             var html = $('debug').get('html');  
  13.             htmlhtml = html + obj + '<br>';  
  14.             $('debug').set('html', html);  
  15.         }  
  16.     }  
  17. }  
  18.   
  19. function viewPlayer(id){  
  20.     try{  
  21.         console.log('View player ' + id);  
  22.     }catch(e){  
  23.         alert('View player ' + id);  
  24.     }  
  25. }  
  26.   
  27. function previewElement(id){  
  28.     try{  
  29.         console.log('Preview ' + id);  
  30.     }catch(e){  
  31.         alert('Preview ' + id);  
  32.     }  
  33. }  
  34.   
  35. function clickOnData(id){  
  36.     try{  
  37.         console.log('Click on ' + id);  
  38.     }catch(e){  
  39.         alert('Click on  ' + id);  
  40.     }  
  41. }  
  42. function dblClickOnData(id){  
  43.     try{  
  44.         console.log('Double click on ' + id);  
  45.     }catch(e){  
  46.         alert('Double click on ' + id);  
  47.     }  
  48. }  
  49.   
  50. /**  
  51.  * THE GRID OBJECT  
  52.  */  
  53. var grid = new DG.Grid({  
  54.     title : 'Grid demo',    // Title bar  
  55.     height : 500,           // Height  
  56.     els : {  
  57.         parent : 'gridContainer'    // Where to render the grid  
  58.     },  
  59.     behaviour : {  
  60.         resizable : true, // Grid is resizable  
  61.         closable : false // Grid is not closable  
  62.     },  
  63.     listeners : {  
  64.         'view' : viewPlayer,  
  65.         'load' : function(obj, gridObj){  
  66.             gridObj.setStatusText('Number of players ' + gridObj.getCountRows());  
  67.         },  
  68.         'add' : function(obj, gridObj){  
  69.             gridObj.setStatusText('Number of players ' + gridObj.getCountRows());  
  70.         },  
  71.         'preview' : previewElement,  
  72.         'click' : clickOnData,  
  73.         'dblclick' : dblClickOnData  
  74.     },  
  75.   
  76.     stretch : true, // If total width of columns is less than width of view, last column will use all remaining space  
  77.   
  78.     defaultSort : { /* Initial sorting */  
  79.         key : 'score',  
  80.         direction : 'asc'  
  81.     },  
  82.     statusBar : {  
  83.         visible : true  
  84.     },  
  85.     /* Column configuration */  
  86.     columnConfig : [  
  87.         {  
  88.             resizable : false,  
  89.             width : 40,  
  90.             sortable : false,  
  91.             txt : 'View',  
  92.             event : 'view',  
  93.             movable : false  
  94.         },  
  95.         {  
  96.             resizable : false,  
  97.             width : 55,  
  98.             sortable : false,  
  99.             txt : 'Preview',  
  100.             event : 'preview',  
  101.             movable : false,  
  102.             hidden : true  
  103.         },  
  104.         {  
  105.             width : 120,  
  106.             key : 'firstname',  
  107.             heading : 'First name',  
  108.             sortable : true,  
  109.             sortWith : 'lastname'  
  110.         },  
  111.         {  
  112.             width : 120,  
  113.             key : 'lastname',  
  114.             sortable : true,  
  115.             heading : 'Last name',  
  116.             sortWith : 'firstname'  
  117.         },  
  118.         {  
  119.             width : 70,  
  120.             align : 'right',  
  121.             key : 'score',  
  122.             sortable : true,  
  123.             removable : false,  
  124.             heading : 'Score',  
  125.             renderer : function(val){  
  126.                 if(val == 0){  
  127.                     return val;  
  128.                 }else if(val > 0){  
  129.                     return '<span style="color:#F00">' + val + '</span>';  
  130.                 }else{  
  131.                     return '<span style="color:#060">' + val + '</span>';  
  132.                 }  
  133.             }  
  134.         },  
  135.         {  
  136.             hidden : true,  
  137.             width : 200,  
  138.             key : 'address',  
  139.             sortable : true,  
  140.             removable : true,  
  141.             heading : 'Address'  
  142.         },  
  143.         {  
  144.             width : 90,  
  145.             key : 'zip',  
  146.             sortable : true,  
  147.             removable : true,  
  148.             heading : 'Zip code'  
  149.         },  
  150.         {  
  151.             width : 300,  
  152.             key : 'city',  
  153.             sortable : true,  
  154.             removable : true,  
  155.             heading : 'City'  
  156.         },  
  157.         {  
  158.             width : 100,  
  159.             key : 'birth',  
  160.             sortable : true,  
  161.             removable : true,  
  162.             heading : 'Born'  
  163.         }  
  164.     ],  
  165.     remote : {  
  166.         url : 'datasource/grid-data.php'  
  167.     }  
  168. });  
  169. /** END GRID CONFIG */  
  170.   
  171.   
  172. /* Config objects for two new dynamically added records */  
  173. var newRecords = [  
  174.     {  
  175.         id : 1000,  
  176.         firstname : 'Tiger',  
  177.         lastname : 'Woods(New record)',  
  178.         address : 'NEW ADDRESS',  
  179.         zip : '9999',  
  180.         city : 'LONDON',  
  181.         score : -21,  
  182.         birth : '<i style="display:none">1991-08-11</i>Sun, August 11, 1991'  
  183.     },  
  184.     {  
  185.         id : 1001,  
  186.         firstname : 'Rory',  
  187.         lastname : 'McIlroy(New Record)',  
  188.         address : 'NEW ADDRESS 2',  
  189.         zip : '9998',  
  190.         city : 'LONDON',  
  191.         score : -20,  
  192.         birth : '<i style="display:none">1991-08-12</i>Mon, August 12, 1991'  
  193.     }  
  194. ]  
  195. </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_111.html