datagrid的例子

@Action(value = "/HealthtypeAction", params= { "contentType", "text/html" })
	@Override
    public String execute() 
    {
	List<Healthtype> typeList = healthtypeService.findAll();
	int total=typeList.size();
    //httpServletRequest.setAttribute("type_LIST", typeList);
		
		try {
	    	 httpServletResponse.setCharacterEncoding("UTF-8");  
			PrintWriter out = httpServletResponse.getWriter();
			 JSONObject jsonobj = new JSONObject();
			  JSONArray jsonArray = new JSONArray(); 
			  List<Healthtype> hlist=healthtypeService.getType(page,rows);
			  int count=hlist.size();
			  for (Healthtype hos : hlist) {  
				System.out.println(hos.getId());
				jsonobj.put("id", hos.getId());
				jsonobj.put("msgtype", hos.getMsgtype());
				jsonArray.add(jsonobj);
				Map<String, Object> json = new HashMap<String, Object>();
				json.put("total", total);// total键 存放总记录数，必须的
				json.put("rows", jsonArray);// rows键 存放每页记录 list
				jsonobj = JSONObject.fromObject(json);// 格式化result一定要是JSONObject
			}
			System.out.println("count=" + jsonobj.size());
			out.print(jsonobj);
			out.flush();
			out.close();
		} catch (IOException e) {
			e.printStackTrace();
		}   
       return SUCCESS;
    }
	
	
	@Action(value = "/typeDeleteAction", results = { @Result(name = "-1", location = "", type = "redirect") })
    public String delete() 
    {
	    healthtypeService.removeById(Integer.parseInt(httpServletRequest.getParameter("id")));
	    return "-1";
    }
	
	@Action(value = "/typeaddAction",results = { @Result(name = SUCCESS, location = "/manager/subsystem/publicresources/healthnews/back/type.jsp")})
	public String add() 
    {
		Healthtype healthtype=new Healthtype();
		healthtype.setMsgtype(httpServletRequest.getParameter("msgtype"));
		healthtypeService.save(healthtype);
	    return SUCCESS;
    }
	
	@Action(value = "/typeUpdateAction", results = { @Result(name = SUCCESS, location = "",type = "redirect")})
    public String update()
    {
    	Healthtype healthtype = healthtypeService.findById(Integer.parseInt(id));
		httpServletRequest.setAttribute("Healthtype_Object", healthtype);
		System.out.println(healthtype.getMsgtype());
    	return SUCCESS;
    }
    
    @Action(value = "/typeSaveAction", results = { @Result(name = SUCCESS, location = "/HealthtypeAction", type = "redirect") })
    public String save() 
    {
	    Healthtype healthtype = new Healthtype();
	    
	    System.out.println("save");
	    System.out.println("id"+id);
	    System.out.println("m"+msgtype);
	    healthtype = healthtypeService.findById(Integer.parseInt(id));
	    healthtype.setMsgtype(msgtype);
	    System.out.println(id);
	    System.out.println(msgtype);
	    healthtypeService.save(healthtype);
	    return SUCCESS;
    }
	
    @Action(value = "/typeSelectAction", results = { @Result(name = SUCCESS, location = "/manager/subsystem/publicresources/healthnews/back/newsadd.jsp")})
    public String select()
    {
    	List<Healthtype> typeList = healthtypeService.findAll();
	    httpServletRequest.setAttribute("type_LIST", typeList);
    	return SUCCESS;
    }
    
    @Action(value = "/typeDelete", results = { @Result(name = "-1", location = "", type = "redirect") })
    public String deletetypes() 
    {
	    //healthtypeService.removeById(Integer.parseInt(httpServletRequest.getParameter("id")));
	    
        
        int temp=Integer.parseInt(num);//循环次数  
        System.out.println("del"+num);
        System.out.println("ids"+ids);
        String[] typeStr=ids.split(",");
        for(int i=0;i<typeStr.length;i++)
        {  
        healthtypeService.removeById(Integer.parseInt(typeStr[i]));
        }
    	return "-1";
    }
    

<script type="text/javascript">

	$(function() {
		$('#mydatagrid').datagrid({
			title : '快讯类别',
			iconCls : 'icon-ok',
			width : 600,
			pageSize : 5,//默认选择的分页是每页5行数据
			pageList : [ 5, 10, 15, 20 ],//可以选择的分页集合
			nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取
			striped : true,//设置为true将交替显示行背景。
			collapsible : true,//显示可折叠按钮
			toolbar:"#easyui_toolbar",//在添加 增添、删除、修改操作的按钮要用到这个
			url:'HealthtypeAction',//url调用Action方法
			loadMsg : '数据装载中......',
			//singleSelect:true,//为true时只能选择单行
			fitColumns:false,//允许表格自动缩放，以适应父容器
			sortName : 'id',//当数据表格初始化时以哪一列来排序
			sortOrder : 'asc',//定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。
			remoteSort : false,
 			 frozenColumns : [ [ {
				field : 'ck',
				checkbox : true
			} ] ], 
			 columns : [ [ {  
		           title : '类别编号',  
		           field : 'id',  
		           width : '100',  
		           rowspan : 2,  
		           align : 'center'  
		       }, {  
		           title : '类别名称',  
		           field : 'msgtype',  
		           width : '220',  
		           rowspan : 2,  
		           align : 'center'  
		       }] ],
			pagination : true,//分页
			rownumbers : true//行数
			
		});
	
			  /********** 点击删除按钮开始 ***********/     
		    $('#deltable').click(function(){  
		        var array = $('#mydatagrid').datagrid('getSelections');  
		        var id2="";  
		        var num=array.length;//获取要删除信息的个数  
		        for(var i=0; i<array.length; i++){//组成一个字符串，ID主键之间用逗号隔开  
		            if(i!=array.length-1){  
		                id2=id2+array[i].id+",";  
		             }else{  
		                 id2=id2+array[i].id;  
		             }   
		        }   
		        var selected = $('#mydatagrid').datagrid('getSelected');  
		        if (array != "") {  
		            $.messager.defaults={ok:"确定",cancel:"取消"};   
		            $.messager.confirm('', '是否要删除该信息？', function(r){  
		                if (r){  
		                    $.post("typeDelete",  
		                    {  ids:id2,num:num},function(response){  
		                        if(response=="-1"){  
		                            $.messager.alert('操作提示',"删除失败",'error');  
		                        }else{  
		                            $('#mydatagrid').datagrid({url:"HealthtypeAction"});  
		                            $.messager.alert('操作提示',"删除成功",'info');  
		                        }  
		                    });  
		                }  
		            });  
		        }else{  
		            $.messager.alert('',"请先选择要删除的信息！");  
		        }  
		          
		    });  
	});  
		    /********** 删除按钮结束 ***********/  
		

		    /*修改信息*/
 var row;
function editUser(){
var row = $('#mydatagrid').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','修改类别');
$('#fm').form('load',row);
url = 'typeUpdateAction';
}
}
//保存
 function saveUser(){
 var row = $('#mydatagrid').datagrid('getSelected');
 //var msgtype=row.msgtype;
 var id=row.id;
$('#fm').form('submit',{
url: 'typeSaveAction',
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#mydatagrid').datagrid('reload'); // reload the user data
}
}
});
}
</script>	

  </head>
  
  <body>
   <body>
	

	<table id="mydatagrid">
	</table>
    <!-- 显示添加按钮的Div -->  
    <div id="easyui_toolbar" style="padding: 2px 0px 2px 15px; height: auto">  
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">修改</a>
    <a  id="deltable" class="easyui-linkbutton"   iconCls="icon-remove" plain="true">批量删除</a>  
    </div> 
    
    
<!--修改类别 -->
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">类别信息</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>类别名称:</label>
<input name="msgtype" class="easyui-validatebox" required="true">
<input type="hidden" name="id" value="id" readonly="true">
</div>
</form>
</div>
<div id="dlg-buttons">
<a class="easyui-linkbutton" iconCls="icon-ok" οnclick="saveUser()">Save</a>
<a class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
<!--修改类别 -->


</body>