<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>depList</title>
<%--导入 easyui 所需要的 js 包等等 --%>
<link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
<script type="text/javascript" src="ui/jquery.min.js"></script>
<script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script>
<%--导入将表单进行序列化的 js文件--%>
<script type="text/javascript" src="ui/jquery.serializejson.min.js"> </script>
</head>
<body>
<div id="search">
<form id="searchForm">
部门名称：<input type="text" name="name" id="name"/>
部门电话：<input type="text" name="tele" id="tele"/>
<button id="searchButton" type="button">查询</button>
</form>
</div>
<div id="grid"></div>
</body>
<script>
$(function(){
$('#grid').datagrid({
url:'/dep_list.action',
columns:[[
{field:'uuid',title:'部门编号',width:100},
{field:'name',title:'部门名称',width:100},
{field:'tele',title:'部门电话',width:100}
]],
singleSelect : true
});
// 对查询按钮绑定事件
$("#searchButton").bind('click',function() {
// 首先需要拿到参数，这时候使用 表单序列化的 插件
// 表单数据转换成json 对象
var formData = $("#searchForm").serializeJSON();
// 然后将json对象转换成 json 字符串,这里只是用来查看的
// $.messager.alert(JSON.stringify(formData));
//alert(JSON.stringify(formData));
//然后调用 datagrid 的load 方法使用参数
//$('#grid').datagrid('load',formData);
// 通过ajax 的方法将数据移除
$.ajax({
url:'/dep_listByCondition.action',
data: formData,
type:'POST',
dataType:'json',
success : function (rtn) {
$("#grid").datagrid('loadData',rtn);
}
})
});
});
</script>
</html>
