easyui巨坑問題,記錄一下以後解決
阿新 • • 發佈:2018-12-13
<%@ 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>