Latest web development tutorials
×

jQuery EasyUI kuliah

jQuery EasyUI kuliah jQuery EasyUI pengantar singkat

jEasyUI aplikasi

jEasyUI Membuat CRUD Aplikasi jEasyUI Membuat data grid CRUD jEasyUI formulir aplikasi CRUD jEasyUI Buat pembaca RSS

jEasyUI Drag dan Drop

jEasyUI tarik dasar dan penurunan jEasyUI Buat penurunan keranjang belanja jEasyUI Buat kurikulum sekolah

jEasyUI Menu dan tombol

jEasyUI Membuat menu sederhana jEasyUI Membuat tombol link jEasyUI Membuat tombol menu jEasyUI Buat tombol perpecahan

jEasyUI tata ruang

jEasyUI Membuat layout perbatasan jEasyUI Membuat layout yang kompleks jEasyUI Buat panel lipat jEasyUI Buat tab jEasyUI Dinamis menambahkan tab jEasyUI Tambahkan tab AutoPlay jEasyUI Buat XP Style di panel sebelah kiri

jEasyUI Data Grid

jEasyUI Dikonversi ke HTML jaringan data tabel jEasyUI Mendapatkan baris data yang dipilih jEasyUI Tambahkan Bertanya jEasyUI Tambahkan toolbar jEasyUI Membuat toolbar yang kompleks jEasyUI Pengaturan kolom freeze jEasyUI Dinamis Perubahan kolom jEasyUI Format Kolom jEasyUI Mengatur semacam itu jEasyUI Pemesanan kustom jEasyUI Buat kombinasi kolom jEasyUI Tambahkan kotak centang jEasyUI kustom Pager jEasyUI Aktifkan editing inline jEasyUI Editor diperpanjang jEasyUI operasi kolom jEasyUI sel gabungan jEasyUI Buat Custom View jEasyUI Buat Ringkasan footer jEasyUI Ketentuan yang ditetapkan baris warna latar belakang jEasyUI Membuat kotak properti jEasyUI garis diperluas Tampilkan Detail jEasyUI Buat Pembagian jEasyUI Menampilkan data besar jEasyUI Menambahkan komponen halaman

jEasyUI jendela

jEasyUI Membuat jendela yang sederhana jEasyUI Kustom Jendela Toolbars jEasyUI Jendela dan Layout jEasyUI Buat dialog jEasyUI Sesuaikan kotak dialog

jEasyUI menu pohon

jEasyUI Gunakan tag untuk membuat menu pohon jEasyUI Buat menu pohon asynchronous jEasyUI Menambahkan menu pohon simpul jEasyUI Membuat menu pohon dengan kotak centang jEasyUI Drag dan drop kontrol menu pohon jEasyUI Beban menu tree node orangtua / anak jEasyUI Membuat pohon grid yang didasarkan jEasyUI Buat mesh pohon kompleks jEasyUI Dinamis dimuat jaringan pohon jEasyUI Menambahkan tab Grid pohon jEasyUI Lazy loading pohon jaringan simpul

jEasyUI bentuk

jEasyUI Menyerahkan formulir untuk membuat asynchronous jEasyUI bentuk Authentication jEasyUI Membuat kotak pohon drop-down jEasyUI Format kotak drop-down jEasyUI Filter data grid drop-down

jEasyUI Reference manual

jQuery EasyUI widget jQuery EasyUI penyebaran

jQuery EasyUI bentuk Plugin - Form Form

jQuery EasyUI Plugin jQuery EasyUI Plugin

Dengan $ .fn.form.defaults menimpa default default.

Form (bentuk) menawarkan beberapa cara untuk melakukan suatu tindakan dengan kolom formulir, seperti ajax mengirimkan, beban, menghapus, dan sebagainya. Ketika mengirimkan formulir, memanggil metode 'validate' untuk memeriksa formulir tersebut valid.

pemakaian

Membuat bentuk HTML sederhana. Membangun bentuk dan memberikan id, tindakan, metode tugas.

<Form id = "ff" method = "post">
    <Div>
		<Label untuk = "nama"> Nama: </ label>
		<Input class = "easyui-validatebox" type = "text" name = "nama" Data-opsi = "diperlukan: true" />
    </ Div>
    <Div>
		<Label untuk = "email"> Email: </ label>
		<Input class = "easyui-validatebox" type = "text" name = "email" Data-opsi = "VALIDTYPE: 'email'" />
    </ Div>
    ...
</ Form>

Biarkan bentuk (form) menjadi pengiriman formulir ajax (bentuk)

$ ( '# Ff'). Form ({
    url: ...,
    onSubmit: function () {
		// Melakukan cek
		// Kembali palsu untuk mencegah mengirimkan;
    },
    Keberhasilan: function (data) {
		alert (data)
    }
});
// Kirim formulir
. $ ( '# Ff') mengirimkan ();

Melakukan tindakan penyerahan

// Panggil 'submit' metode bentuk plugin untuk mengirimkan formulir
$ ( '# Ff'). Form ( 'submit', {
    url: ...,
    onSubmit: function () {
		// Melakukan cek
		// Kembali palsu untuk mencegah mengirimkan;
    },
    Keberhasilan: function (data) {
		alert (data)
    }
});

Dengan mengirimkan parameter tambahan

$ ( '# Ff'). Form ( 'submit', {
    url: ...,
    onSubmit: function (param) {
		'Value1' param.p1 =;
		'Value2' param.p2 =;
    }
});

Kirim Response Pengolahan

Mengirimkan formulir ajax (bentuk) sangat sederhana. Ketika mengirimkan pengguna selesai dapat memperoleh data respon. Perhatikan bahwa data respon adalah data mentah dari server. Data analisis untuk tindakan respon meminta data yang benar.

Sebagai contoh, asumsikan bahwa respon format data JSON, data respon khas adalah sebagai berikut:

{
    "Sukses": true,
    "Pesan": "Pesan berhasil dikirim."
}

Sekarang menangani string JSON fungsi callback 'sukses'.

$ ( '# Ff'). Form ( 'submit', {
    Keberhasilan: function (data) {
		var data = eval ( '(' + Data + ')'); // mengubah JSON string untuk objek javascript
		jika (data.success) {
			alert (data.message)
		}
    }
});

milik

名称 类型 描述 默认值
url string 要提交的表单动作 URL。 null

peristiwa

名称 参数 描述
onSubmit param 提交前触发,返回 false 来阻止提交动作。
success data 当表单提交成功时触发。
onBeforeLoad param 发出请求加载数据之前触发。返回 false 就取消这个动作。
onLoadSuccess data 当表单数据加载时触发。
onLoadError none 加载表单数据时发生某些错误的时候触发。

cara

名称 参数 描述
submit options 做提交动作,options 参数是一个对象,它包含下列属性:
url:动作的 URL
onSubmit:提交之前的回调函数
success:提交成功之后的回调函数

下面的实例演示如何提交一个有效表单,避免重复提交表单。
$.messager.progress();	// display the progress bar
$('#ff').form('submit', {
	url: ...,
	onSubmit: function(){
		var isValid = $(this).form('validate');
		if (!isValid){
			$.messager.progress('close');	// hide progress bar while the form is invalid
		}
		return isValid;	// return false will stop the form submission
	},
	success: function(){
		$.messager.progress('close');	// hide progress bar while submit successfully
	}
});
load data 加载记录来填充表单。data 参数可以是一个字符串或者对象类型,字符串作为一个远程 URL,否则作为一个本地记录。

代码实例:
$('#ff').form('load','get_data.php');	// load from URL

$('#ff').form('load',{
	name:'name2',
	email:'[email protected]',
	subject:'subject2',
	message:'message2',
	language:5
});
clear none 清除表单数据。
reset none 重置表单数据。该方法自版本 1.3.2 起可用。
validate none 进行表单字段验证,当全部字段都有效时返回 true 。该方法和 validatebox 插件一起使用。
enableValidation none 启用验证。该方法自版本 1.3.4 起可用。
disableValidation none 禁用验证。该方法自版本 1.3.4 起可用。

jQuery EasyUI Plugin jQuery EasyUI Plugin