jQuery EasyUI grid data - memungkinkan editing inline
Fungsi diedit baru ditambahkan ke jaringan data (datagrid) dari. Hal ini memungkinkan pengguna untuk menambahkan baris baru ke jaringan data (datagrid). Pengguna juga dapat memperbarui satu atau lebih baris.
Tutorial ini menunjukkan Anda bagaimana untuk membuat data grid (datagrid) dan editor inline.
Membuat data Grid (datagrid)
$ (Fungsi () { $ ( '# Tt'). Datagrid ({ Judul: 'Editable DataGrid', iconCls: 'icon-edit', width: 660, height: 250, singleSelect: benar, idfield: 'Itemid', url: 'datagrid_data.json', kolom: [[ {Bidang: 'Itemid', judul: 'Barang ID', lebar: 60}, {Bidang: 'ProductID', judul: 'Produk', lebar: 100, formatter: function (value) { for (var i = 0; i <products.length; i ++) { jika (produk [i] .productid == nilai) produk kembali [i] .name; } Nilai kembali; }, Editor: { Jenis: 'combobox', Pilihan: { valueField: 'ProductID', textField: 'nama', Data: produk, diperlukan: true } } }, {Bidang: 'listprice', judul: 'Daftar Harga', lebar: 80, menyelaraskan: 'benar', editor: {type: 'numberbox', pilihan: {presisi: 1}}}, {Bidang: 'unitcost', judul: 'Satuan Biaya', lebar: 80, menyelaraskan: 'benar', editor: 'numberbox'}, {Bidang: 'attr1', judul: 'Atribut', lebar: 150, editor: 'teks'}, {Bidang: 'Status', judul: 'Status', lebar: 50, menyelaraskan: 'pusat', Editor: { Jenis: 'checkbox', Pilihan: { pada: 'P', off: '' } } }, {Bidang: 'action', judul: 'Action', lebar: 70, menyelaraskan: 'pusat', formatter: function (nilai, baris, indeks) { jika (row.editing) { var s = '<a href="#" onclick="saverow(this)"> bintang </a>'; var c = '<a href="#" onclick="cancelrow(this)"> Batal </a>'; kembali s + c; } Lain { var e = '<a href="#" onclick="editrow(this)"> Sunting </a>'; var d = '<a href="#" onclick="deleterow(this)"> Hapus </a>'; kembali e + d; } } } ]], onBeforeEdit: function (index, baris) { row.editing = true; updateActions (index); }, onAfterEdit: function (index, baris) { row.editing = false; updateActions (index); }, onCancelEdit: function (index, baris) { row.editing = false; updateActions (index); } }); }); updateActions fungsi (indeks) { $ ( '# Tt'). Datagrid ( 'updateRow', { Indeks: Indeks, baris: {} }); }
Untuk mengaktifkan inline jaringan editing data, Anda harus menambahkan properti ke kolom redaksi. Editor (Editor) mengatakan data Grid (datagrid) Cara mengedit lapangan dan bagaimana untuk menyimpan nilai field. Seperti yang Anda lihat, tiga editor (redaktur) Kami mendefinisikan: teks, combobox dan kotak centang.
Fungsi getRowIndex (target) { var tr = $ (target) .closest ( 'tr.datagrid-baris'); kembali parseInt (tr.attr ( 'datagrid-baris-index')); } Fungsi editrow (target) { $ ( '# Tt') datagrid ( 'BeginEdit', getRowIndex (target)) .; } Fungsi deleterow (target) { $ .messager.confirm ( 'Confirm', 'Apakah Anda yakin?', Fungsi (r) { if (r) { $ ( '# Tt') datagrid ( 'deleteRow', getRowIndex (target)) .; } }); } Fungsi saverow (target) { $ ( '# Tt') datagrid ( 'EndEdit', getRowIndex (target)) .; } Fungsi cancelrow (target) { $ ( '# Tt') datagrid ( 'cancelEdit', getRowIndex (target)) .; }