miniui.js多条件筛选的实现方法,怎么写也写不对跪求大神指点,根据姓名,年龄,性别,查找出对应员工。自己在网上对照写的不太对,跪求
<!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>员工信息测试表</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>员工详细信息查询表</h1>
<fieldset style="width:700px;border:solid 1px #aaa;margin-top:8px;position:relative;">
<legend>员工详细信息</legend>
<div id="editForm1" style="padding:5px;">
<input class="mini-hidden" name="id"/>
<table style="width:100%;">
<tr>
<td style="width:80px;">姓名:</td>
<td style="width:150px;"><input id="name" name="name" class="mini-textbox" /></td>
<td>性别:</td>
<td><input id="gender" name="gender" class="mini-combobox" data="Genders"/></td>
</tr>
<tr>
<td>年龄:</td>
<td><input id="age" name="age" class="mini-spinner" minValue="0" maxValue="65" value="25" /></td>
<td>出生日期:</td>
<td><input id="birthday" name="birthday" class="mini-datepicker" /></td>
</tr>
</table>
<span>精确查找:</span>
<!-- <input type="text" id="key" /> -->
<input type="button" value="查找" onclick="search(name,gender,age,birthday)" />
</div>
</fieldset>
<div id="datagrid1" class="mini-datagrid"
style="width: 725px; height: 250px;"
url="../data/AjaxService.jsp?method=SearchEmployees" idField="id"
multiSelect="true" allowResize="true">
<div property="columns">
<div type="checkcolumn"></div>
<div field="name" width="100" headerAlign="center" allowSort="true">名称</div>
<div field="gender" width="100" allowSort="true"
renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
<div field="age" width="100" allowSort="true">年龄</div>
<div field="birthday" width="100" allowSort="true"
dateFormat="yyyy-MM-dd">出生日期</div>
<div field="createtime" width="100" headerAlign="center"
dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
</div>
</div>
<script type="text/javascript">
var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
mini.parse();
var grid = mini.get("datagrid1");
grid.load();
/* //多条件筛选
function filter(fn) {
var list =document.getElementsByTagName('body')[0]
.getElementsByTagName('tbody')[0].rows;
var size=list.length;
var tr;
for(var i=0;i<size;i++) {
tr =[list];
tr.removeAttrubute('class', 'hide')
if(!fn(tr)) {
tr.setAttribute('class','hide');
}
}
}
function value(id) {
return document.getElementById(id).value;
}
function search() {
var sex = document.getElement.getElementById('name');
var gender= document.getElement.getElementById('gender');
var gender=document.getElement.getElementById('age') ;
filter(function(tr)) {
if(gender && tr.cells[0].innerHTML != gender) {
return false;
}
if(name && tr.cells[1].innerHTML.indexOf(name) < 0) {
return false;
}
if(course && tr.cells[2].innerHTML.indexOf(course) < 0) {
return false;
}
return true;
}
}
*/ //绑定表单
var db = new mini.DataBinding();
db.bindForm("editForm1", grid);
//查找表单
function search() {
var key = document.getElementById("name").value;
grid.load({ key: name });
}
$("#key").bind("keydown", function (e) {
if (e.keyCode == 13) {
search();
}
});
///////////////////////////////////////////////////////
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>
</body>
</html>