jQuery EasyUI data Grid - Kustom Pager
Data Grid (datagrid) membangun tab fitur bagus, kustom cukup sederhana. Dalam tutorial ini, kita akan membuat data grid (datagrid), dan pada toolbar tab untuk menambahkan beberapa tombol kustom.
Membuat data Grid (datagrid)
<Table id = "tt" title = "Load Data" class = "easyui-datagrid" style = "width: 550px; height: 250px" url = "data / datagrid_data.json" iconCls = "icon-save" pagination = "true"> <Thead> <Tr> <Bidang Th = "Itemid" width = "80"> ID Item </ th> <Bidang Th = "productid" width = "80"> ID Produk </ th> <Th field = "listprice" width = "80" align = "right"> Daftar Harga </ th> <Bidang Th = "unitcost" width = "80" align = "right"> Satuan Biaya </ th> <Th field = "attr1" width = "100"> Atribut </ th> <Bidang Th = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Thead> </ Table>
Ingat, pengaturan 'pagination' properti benar, ini akan menghasilkan toolbar paging.
Kustom Pager Toolbar
var pager = $ ( '# tt') datagrid ( 'getPager') ;. // mendapatkan pager dari datagrid pager.pagination ({ showPageList: palsu, Tombol: [{ iconCls: 'icon-search', handler: function () { alert ( 'search'); } }, { iconCls: 'icon-add', handler: function () { alert ( 'menambahkan'); } }, { iconCls: 'icon-edit', handler: function () { alert ( 'edit'); } }], onBeforeRefresh: function () { alert ( 'sebelum penyegaran'); kembali benar; } });
Seperti yang Anda lihat, kita mendapatkan data grid pertama (datagrid) dari objek pager, dan halaman (pagination) kemudian membuat ulang. Kami menyembunyikan daftar halaman, dan menambahkan tiga tombol baru.