easyUI datagrid笔记

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);
                }
            });
        }