W2ui網格自定義頁腳顯示

使用W2ui網格我們是否有類似自定義頁腳選項來顯示每列的總和/總數？W2ui網格自定義頁腳顯示

2016-12-08 Piyush Giri

是的，有簡要記錄：http://w2ui.com/web/docs/1.5/w2grid.summary

例子：

$('#grid').w2grid({ 
 
    name : 'grid', 
 
    columns: [     
 
     { field: 'recid', caption: 'ID', size: '50px' }, 
 
     { field: 'lname', caption: 'Last Name', size: '30%' }, 
 
     { field: 'fname', caption: 'First Name', size: '30%' }, 
 
     { field: 'email', caption: 'Email', size: '40%' }, 
 
     { field: 'sdate', caption: 'Start Date', size: '120px' }, 
 
     { field: 'sdate', caption: 'End Date', size: '120px' } 
 
    ], 
 
    records: [ 
 
     { recid: 1, fname: 'John', lname: 'doe', email: '[email protected]', sdate: '1/3/2012' }, 
 
     { recid: 2, fname: 'Stuart', lname: 'Motzart', email: '[email protected]', sdate: '2/4/2012' }, 
 
     { recid: 3, fname: 'Jin', lname: 'Franson', email: '[email protected]', sdate: '4/23/2012' }, 
 
     { recid: 4, fname: 'Susan', lname: 'Ottie', email: '[email protected]', sdate: '5/3/2012' }, 
 
     { recid: 5, fname: 'Kelly', lname: 'Silver', email: '[email protected]', sdate: '4/3/2012' }, 
 
     { recid: 6, fname: 'Francis', lname: 'Gatos', email: '[email protected]', sdate: '2/5/2012' } 
 
    ], 
 
    summary: [ 
 
     { recid: 10, fname: 'John', lname: 'doe', email: '[email protected]', sdate: '1/3/2012' } 
 
    ] 
 
}); 
 

 
- or - 
 
    
 
$('#grid').w2grid({ 
 
    name : 'grid', 
 
    columns: [     
 
     { field: 'recid', caption: 'ID', size: '50px' }, 
 
     { field: 'lname', caption: 'Last Name', size: '30%' }, 
 
     { field: 'fname', caption: 'First Name', size: '30%' }, 
 
     { field: 'email', caption: 'Email', size: '40%' }, 
 
     { field: 'sdate', caption: 'Start Date', size: '120px' }, 
 
     { field: 'sdate', caption: 'End Date', size: '120px' } 
 
    ], 
 
    records: [ 
 
     { recid: 1, fname: 'John', lname: 'doe', email: '[email protected]', sdate: '1/3/2012' }, 
 
     { recid: 2, fname: 'Stuart', lname: 'Motzart', email: '[email protected]', sdate: '2/4/2012' }, 
 
     { recid: 3, fname: 'Jin', lname: 'Franson', email: '[email protected]', sdate: '4/23/2012' }, 
 
     { recid: 4, fname: 'Susan', lname: 'Ottie', email: '[email protected]', sdate: '5/3/2012' }, 
 
     { recid: 5, fname: 'Kelly', lname: 'Silver', email: '[email protected]', sdate: '4/3/2012' }, 
 
     { recid: 6, fname: 'Francis', lname: 'Gatos', email: '[email protected]', sdate: '2/5/2012', 
 
      w2ui: { summary: true }, 
 
     } 
 
    ] 
 
});

活生生的例子：http://w2ui.com/web/demos/#!grid/grid-14

來源

2016-12-09 07:31:44

的作品就像一個魅力！非常感謝mpf82 :) –

W2ui網格自定義頁腳顯示

回答

相關問題