表单查询
<!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">
<head>
<title>Pagination 分页表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="../demo.css" rel="stylesheet" type="text/css" />
<script src="../../scripts/boot.js" type="text/javascript"></script>
</head>
<body >
<h1>Pagination 分页表格</h1>
<div style="padding-bottom:5px;">
<span>员工姓名：</span><input type="text" id="key" />
<input type="button" value="查找" onclick="search()"/>
</div>
<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;" url="../data/AjaxService.aspx?method=SearchEmployees" idField="id" allowResize="true" sizeList="[20,30,50,100]" pageSize="20" >
<div property="columns">
<div type="indexcolumn" ></div>
<div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>
<div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>
<div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
<div field="salary" dataType="currency" currencyUnit="￥" align="right" width="100" allowSort="true">薪资</div>
<div field="age" width="100" allowSort="true">年龄</div>
<div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
</div>
</div>
<script type="text/javascript">
mini.parse();
var grid = mini.get("datagrid1");
grid.load();
//对"createtime"字段，进行降级排序
grid.sortBy("createtime", "desc");
function search() {
var key = document.getElementById("key").value; grid.load({ key: key });
}
$("#key").bind("keydown", function (e) {
if (e.keyCode == 13) {
search();
}
});
///////////////////////////////////////////////////////
var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
function onGenderRenderer(e) {
for (var i = 0, l = Genders.length; i < l; i++) {
var g = Genders[i];
if (g.id == e.value) return g.text;
}
return "";
}
</script>
<div class="description">
<h3>Description</h3>
</div>
</body>
</html>
