1. Rumah
  2. jQuery EasyUI data Grids - dinamis mengubah kolom

Tutorial jQuery EasyUI data Grids - dinamis mengubah kolom Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Ambil jQuery EasyUI contoh,

jQuery EasyUI data Grids - dinamis mengubah kolom

Data Grid (datagrid) kolom dapat menggunakan properti 'kolom' hanya didefinisikan. Jika Anda ingin mengubah dinamis kolom, bahwa tidak ada masalah. Untuk mengubah kolom, Anda dapat mengingat metode datagrid, melewati kolom atribut baru.

Membuat data Grid (datagrid) 

	<Table id = "tt" title = "Kolom Frozen" class = "easyui-datagrid" style = "width: 550px; height: 250px"
			url = "data / datagrid_data.json"
			singleSelect = "true" iconCls = "icon-save">
	</ Table>

	$ ( '# Tt'). Datagrid ({
		kolom: [[
			{Bidang: 'Itemid', judul: 'Barang ID', lebar: 80},
			{Bidang: 'ProductID', judul: 'ID Produk', lebar: 80},
			{Bidang: 'attr1', judul: 'Atribut', width: 200},
			{Bidang: 'Status', judul: 'Status', lebar: 80}
		]]
	});

Menjalankan halaman, Anda akan melihat:

Tapi kadang-kadang Anda ingin mengubah kolom, sehingga Anda perlu untuk menulis beberapa kode: 

	$ ( '# Tt'). Datagrid ({
		kolom: [[
			{Bidang: 'Itemid', judul: 'Barang ID', lebar: 80},
			{Bidang: 'ProductID', judul: 'ID Produk', lebar: 80},
			{Bidang: 'listprice', judul: 'Daftar Harga', lebar: 80, menyelaraskan: 'benar'},
			{Bidang: 'unitcost', judul: 'Satuan Biaya', lebar: 80, menyelaraskan: 'benar'},
			{Bidang: 'attr1', judul: 'Atribut', width: 100},
			{Bidang: 'Status', judul: 'Status', lebar: 60}
		]]
	});

Ingat, kita telah mendefinisikan atribut lainnya, seperti: url, lebar, tinggi dan sebagainya. Sekali lagi, kita tidak perlu mendefinisikan mereka, kita menjelaskan siapa kita perlu mengubah.

Ambil jQuery EasyUI contoh

jeasyui-datagrid-datagrid6.zip

Tutorial Panas

Hubungi kami

jQuery EasyUI data Grids - dinamis mengubah kolom
10/30