ok-admin/lib/jquery.bsgrid/examples/form/simple.html

70 lines
2.9 KiB
HTML
Executable File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Simple Form</title>
<link rel="stylesheet" href="../../builds/css/form.min.css"/>
<link rel="stylesheet" href="example.css"/>
<script type="text/javascript" src="../../plugins/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../builds/js/common.min.js"></script>
<script type="text/javascript" src="../../builds/js/util.min.js"></script>
<script type="text/javascript" src="../../builds/js/form.min.js"></script>
</head>
<body>
<form id="formDemo" class="bsgrid_form">
<table>
<tr showType="false">
<td class="formLabel">ID:</td>
<td class="formInput"><input name="id" type="text" value="100" /></td>
</tr>
<tr>
<td class="formLabel"><span class="require">*</span>Account:</td>
<td class="formInput">
<input name="account" type="text" editAble="false" value="Account" />
<span class="inputTip" showType="add">Start with letter, can contains number</span>
<span class="inputTip" showType="edit">Can not modify</span>
</td>
</tr>
<tr showType="add,edit">
<td class="formLabel">Password:</td>
<td class="formInput">
<input name="password" type="password" value="123456" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="button" value="Refresh" onclick="location.href = location.href;" />
&emsp;
<input type="button" value="view style" onclick="formObj.showForm('view');" />
&emsp;
<input type="button" value="add style" onclick="formObj.showForm('add');" />
&emsp;
<input type="button" value="edit style" onclick="formObj.showForm('edit');" />
&emsp;
<input type="button" value="Commit" onclick="doCommit();" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
var formObj;
$(function () {
formObj = $.fn.bsgrid_form.init('formDemo', {});
});
function doCommit() {
var type = formObj.options.formType;
if (type == 'view') {
alert('This is view.');
} else if (type == 'add') {
alert($('#formDemo').serialize() + '&formType=' + type);
} else if (type == 'edit') {
// editAble false not commit
alert($('#formDemo :not([editAble="false"])').serialize() + '&formType=' + type);
} else {
alert('None.');
}
}
</script>
</body>
</html>