easyui-datagrid（基础篇）

最近刚研究easyui，发现网上没有一片通俗易懂的文章。所以决定写一下

这篇例子是从jsp到controller的，比较通俗易懂。（需要注意的地方已经标蓝色）

想要跳转到第n页，输入数字后回车即可

html:

       <table id="datagrid" title="My Users" class="easyui-datagrid" style="width:550px;height:250px" <span style="color:#3366ff;">toolbar="#toolbar"</span>
		rownumbers="true" fitColumns="true" singleSelect="true">
		</table>  
        <div <span style="color:#3366ff;">id="toolbar"</span>>
				<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">New User</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="destroyUser()">Remove User</a>
		</div> 

js:

 $(function(){  
        $('#datagrid').datagrid({  
            url:'<%=basePath%>data',  
//              title: 'ssss',  
           // iconCls:'icon-save',  //table中左上角保存
            pagination:true,  
            pageSize:10,  
            pageList:[10,20,30,40,50,60,70,80,90,100], //可以选择不同的每页数据 
            //fit:true,//使表格自适应  
            fitColumns:true,//使得表格中所有的列宽相加等于自适应的宽度、也就是浏览器改变大小的时候下方会不会出现滚动条、一般只有在列较少的时候使用  
            nowrap:false,//表格中的文字可以换行、默认是false、不能换行、这样在文字很多的时候就看不到全部：使用真实的数据去测试  
            border:true,  
            idFeild:'id',//标识、会记录我们选中项的id、不一定是id、通常使用主键  
            sortName:'id',//设置默认排序时的 字段（必须是field中的一个字段）  
            sortOrder:'asc',//是按照升序还是降序排序   但是仅仅添加这两个字段并不会自动排序、这样写的意义就是前台会自动的向后台传递两个参数：sort order,我们可以在后台查询记录的时候进行排序  
            loadFilter: function(data){//数据在显示前的过滤
        		if (data.success){
        			return data.data;//后台中data中放的数据
        		} else {
        			return data.data;
        		}
        	},
            columns:[ [{  
                    title:'编号',  
                    field:'id',  
                    width:50,//必须要给  
//                      sortable:true,//指定按照这个排序  
                },{  
                    title:'姓名',  
                    field:'userName',  
                    width:50,//必须要给  
                      
                },{  
                    title:'密码',  
                    field:'passWord',  
                    width:50,//必须要给  
                }] ],
        });   
    });  
    function newUser(){
    	alert("新增");
    }

java-controller:

  	@RequestMapping(value="/data")
  	@ResponseBody
  	public JsonResponse getDate(HttpServletRequest request){
  		Enumeration<String> enu =request.getParameterNames();<span style="color:#3366ff;">//可以通过此数据查看从前前台传来的数据</span>
  		String page = request.getParameter("page");
  		Map<String,Object> map = new HashMap<String,Object>();
  		List<DateDemo> list = new ArrayList<DateDemo>();
  		Long newpage = Long.parseLong(page);
  		for(Long i=newpage*10;i<(newpage+1)*10;i++){
  			list.add(new DateDemo(i,24+i+"","a"+i));
  		}
  		map.put("total", 30);
  		map.put("rows", list);
  		return JsonResponse.ok(map);
  	}