<%@ 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>
easyui巨坑問題，記錄一下以後解決
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.