Jquery Easyui Datagrid作成コード

13748 ワード
jquery css 参照 default themes
参照easyui

  
  
  
  
    
   
   
   
   
  1. <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> 
    2. 
   
   
   
   
  2. <link rel="stylesheet" type="text/css" href="../themes/icon.css"> 
    3. 
   
   
   
   
  3. <link rel="stylesheet" type="text/css" href="demo.css"> 
    4. 
   
   
   
   
  4. <script type="text/javascript" src="../jquery-1.7.2.min.js"></script> 
    5. 
   
   
   
   
  5. <script type="text/javascript" src="../jquery.easyui.min.js"></script> 
    6.

JAvascriptコード

  
  
  
  
    
   
   
   
   
  1. $(function(){  
    2. 
   
   
   
   
  2.     $('#tt').datagrid({  
    3. 
   
   
   
   
  3.         url:'datagrid_data2.json',  
    4. 
   
   
   
   
  4.         columns:[[  
    5. 
   
   
   
   
  5.             {   field:'productid',  
    6. 
   
   
   
   
  6.                 title:'Product ID',  
    7. 
   
   
   
   
  7.                 width:120  
    8. 
   
   
   
   
  8.                 //rowspan:2  
    9. 
   
   
   
   
  9.                 //colspan:2  
    10. 
   
   
   
   
  10.                 //align:'center'  
    11. 
   
   
   
   
  11.                 //sortable:true  
    12. 
   
   
   
   
  12.                 //resizable:true  
    13. 
   
   
   
   
  13.                 //hidden:true  
    14. 
   
   
   
   
  14.                 //checkbox:true  
    15. 
   
   
   
   
  15.                 //formatter:function(value,row,index){}  
    16. 
   
   
   
   
  16.                 //styler:function(value,row,index){}  
    17. 
   
   
   
   
  17.                 //sorter:function(a,b){ }  
    18. 
   
   
   
   
  18.                 //editor:string,object  
    19. 
   
   
   
   
  19.  
    20. 
   
   
   
   
  20.             },  
    21. 
   
   
   
   
  21.               
    22. 
   
   
   
   
  22.             {field:'listprice',title:'List Price',width:80,align:'right'},  
    23. 
   
   
   
   
  23.             {field:'unitcost',title:'Unit Cost',width:80,align:'right'},  
    24. 
   
   
   
   
  24.             {field:'attr1',title:'Attribute',width:250},  
    25. 
   
   
   
   
  25.             {field:'status',title:'Status',width:60,align:'center'}  
    26. 
   
   
   
   
  26.         ]],  
    27. 
   
   
   
   
  27.         frozenColumns:[[  
    28. 
   
   
   
   
  28.                {field:'ck',checkbox:true},  
    29. 
   
   
   
   
  29.                {field:'itemid',title:'Item ID',width:80,sortable:true}  
    30. 
   
   
   
   
  30.         ]],  
    31. 
   
   
   
   
  31.         //fitColumns:false,//true        
    32. 
   
   
   
   
  32.         //autoRowHeight:true,  
    33. 
   
   
   
   
  33.         toolbar:[{  
    34. 
   
   
   
   
  34.             iconCls: 'icon-edit',  
    35. 
   
   
   
   
  35.             text:'  ',  
    36. 
   
   
   
   
  36.             handler: function(){alert('edit')}  
    37. 
   
   
   
   
  37.         },'-',{  
    38. 
   
   
   
   
  38.             iconCls: 'icon-help',  
    39. 
   
   
   
   
  39.             text:'  ',  
    40. 
   
   
   
   
  40.             handler: function(){alert('help')}  
    41. 
   
   
   
   
  41.         }],  
    42. 
   
   
   
   
  42.         //striped:true,//   ，      
    43. 
   
   
   
   
  43.         //method:'post',  
    44. 
   
   
   
   
  44.         //nowrap:true,//false          
    45. 
   
   
   
   
  45.         //idField:'itemid',  
    46. 
   
   
   
   
  46.         loadMsg:'   ...',  
    47. 
   
   
   
   
  47.         pagination:true,//     
    48. 
   
   
   
   
  48.         rownumbers:true,//           
    49. 
   
   
   
   
  49.         singleSelect:true 
    50. 
   
   
   
   
  50.         //checkOnSelect:true,  
    51. 
   
   
   
   
  51.         //selectOnCheck:true,  
    52. 
   
   
   
   
  52.         //pagePosition:'both',  
    53. 
   
   
   
   
  53.         //pageNumber:1,  
    54. 
   
   
   
   
  54.         //pageSize:10,  
    55. 
   
   
   
   
  55.         //pageList:[10,20,30,40,50],  
    56. 
   
   
   
   
  56.         //queryParams: {  
    57. 
   
   
   
   
  57.         //  name: 'easyui',  
    58. 
   
   
   
   
  58.         //  subject: 'datagrid'  
    59. 
   
   
   
   
  59.         //},  
    60. 
   
   
   
   
  60.         //sortName:'itemid',  
    61. 
   
   
   
   
  61.         //sortOrder:'desc',  
    62. 
   
   
   
   
  62.         //remoteSort:false,//true              ，false        
    63. 
   
   
   
   
  63.         //showHeader:true,  
    64. 
   
   
   
   
  64.         //showFooter:true,  
    65. 
   
   
   
   
  65.         //scrollbarSize:18,  
    66. 
   
   
   
   
  66.         //rowStyler:function(index,row,css){}  
    67. 
   
   
   
   
  67.         //loader:'json loader',  
    68. 
   
   
   
   
  68.         //loadFilter:function(data){}  
    69. 
   
   
   
   
  69.         //editors:'predefined editors',  
    70. 
   
   
   
   
  70.         //view:'default view'  
    71. 
   
   
   
   
  71.     });  
    72. 
   
   
   
   
  72.     //           
    73. 
   
   
   
   
  73.     $('#tt').datagrid('getPager').pagination({     
    74. 
   
   
   
   
  74.         pageSize: 10,//         ，   10     
    75. 
   
   
   
   
  75.         pageList: [5,10,15],//                  
    76. 
   
   
   
   
  76.         beforePageText: ' ',//                
    77. 
   
   
   
   
  77.         afterPageText: '       {pages}  ',     
    78. 
   
   
   
   
  78.         displayMsg: '     {from} - {to}         {total}    '   
    79. 
   
   
   
   
  79.         /*onBeforeRefresh:function(){    
    80. 
   
   
   
   
  80.             $(this).pagination('loading');    
    81. 
   
   
   
   
  81.             alert('before refresh');    
    82. 
   
   
   
   
  82.             $(this).pagination('loaded');    
    83. 
   
   
   
   
  83.         }*/    
    84. 
   
   
   
   
  84.     });   
    85. 
   
   
   
   
  85. }); 
    86.

 
htmlコード

  
  
  
  
    
   
   
   
   
  1. <table id="tt"></table> 
    2.

jsネイティブネットワークipの取得
ValidationError: CSS Loader Invalid Options