jQuery EasyUI data Grid - operasi kolom
Dalam tutorial ini, Anda akan belajar bagaimana untuk menyertakan kolom dalam pengoperasian data grid yang dapat diedit (datagrid) di. Kolom operasional biasanya berisi nilai-nilai dari satu atau lebih kolom operasi lainnya.
Pertama, membuat data grid yang dapat diedit (datagrid). Di sini kita membuat beberapa kolom yang dapat diedit, 'listprice', 'jumlah' dan kolom 'unitcost' didefinisikan sebagai numberbox mengedit jenis. Kolom operasi adalah bidang 'unitcost', akan menjadi hasil perkalian kolom jumlah listprice.
<Table id = "tt" style = "width: 600px; height: auto" title = "Editable datagrid dengan Dikira Kolom" iconCls = "icon-edit" singleSelect = "true" idfield = "itemid" url = "data / datagrid_data.json"> <Thead> <Tr> <Bidang Th = "Itemid" width = "80"> ID Item </ th> <Th field = "listprice" width = "80" align = "right" editor = "{type: 'numberbox', pilihan: {presisi: 1}}"> Daftar Harga </ th> <Th field = "jumlah" width = "80" align = "right" editor = "{type: 'numberbox', pilihan: {presisi: 0}}"> Jumlah </ th> <Bidang Th = "unitcost" width = "80" align = "right" editor = "numberbox"> Satuan Biaya </ th> <Th field = "attr1" width = "150" editor = "text"> Atribut </ th> <Th field = "status" width = "60" align = "center" editor = "{type: 'checkbox', pilihan: {pada: 'P', off: ''}}"> Status </ th> </ Tr> </ Thead> </ Table>
Ketika pengguna mengklik berturut-turut, kami mulai tindakan mengedit.
var lastIndex; $ ( '# Tt'). Datagrid ({ onClickRow: function (rowIndex) { jika (lastIndex! = rowIndex) { $ ( '# Tt') datagrid ( 'EndEdit', lastIndex) .; $ ( '# Tt') datagrid ( 'BeginEdit', rowIndex) .; setEditing (rowIndex); } lastIndex = rowIndex; } });
Untuk menciptakan hubungan antara operasi dari beberapa kolom, kita harus mendapatkan editor saat ini, dan mengikat mereka untuk beberapa peristiwa di atas.
Fungsi setEditing (rowIndex) { var editor = $ ( '# tt') datagrid ( 'getEditors', rowIndex) .; var priceEditor = editor [0]; var amountEditor = editor [1]; var costEditor = editor [2]; priceEditor.target.bind ( 'perubahan', function () { menghitung (); }); amountEditor.target.bind ( 'perubahan', function () { menghitung (); }); fungsi menghitung () { biaya var = priceEditor.target.val () * amountEditor.target.val (); $ (CostEditor.target) .numberbox ( 'setValue', biaya); } }