DIV CSS 佈局教程網

easyUI datagrid 簡單使用與注意細節

背景：

業余愛好，使用了一下easyUI的搜索框與數據表格，並把兩者整合起來進行使用。

使用前提（引入需要的js and css)：

<link rel="stylesheet" type="text/css" href="./css/easyui.css">
    <link rel="stylesheet" type="text/css" href="./css/icon.css">
    <link rel="stylesheet" type="text/css" href="./css/demo.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./js/easyui-lang-zh_CN.js"></script>

效果展示：

遇到的問題：

datagrid中有一個url屬性，在data-options裡面。給datagrid加載數據有兩種用法，1：從遠程站點加載數據的URL地址。從遠程地址中加載datagrid數據。2：使用本地json數據給datagrid加載數據（通過loadData屬性實現）。因為我要實現的功能是，選擇搜索的類型，輸入搜索值，按回車，使用Ajax去調springmvc的controller進行業務處理，取到要渲染的數據，這種需要比較適合使用上面提到的第二種使用方法。

具體實現：

首先在controller的具體方法上加上@ResponseBody,這樣返回的就是json數據，再在ajax的回調函數中，給datagrid 屬性loadData賦上json數據。

function doSearch(value,name){
            $.post("search/getSearchResult",{
                "value":value,
                "name":name
            },function(data){
                if (data==null || data=="") {
                    alert("輸入名字有誤，請重新輸入");
                    $("#input1").val("");
                    window.location.reload();
                } else {
                    $("#dataTables").css('display','block');
                    if (name=='teacher') {
                        initTeacherDataGrid();
                    } else if (name=='student') {
                        initStudentDataGrid();
                    }
                    var jsdata = {'total':data.length,'rows':data};
                    $("#magazineGrid1").datagrid('loadData', jsdata);
                }
            });
        }