最近这段时间都在做关于Flex项目，下班时间关注了下easyui，同事开发也都在用，对于民工的我来说，学点前端无疑可以增加点资本。
整个框架采用后台spring mvc +持久层mybatis+前端展示easyui+数据库mysql。嘿嘿，不难吧，只是一个练手的小demo，其他功能都在完善中。
先看下界面：
个人认为easyui框架将一般开发中要用的组件，布局都表现的不错的，至少对于实习生的我来说，学着蛮开心的，至于它本身的局限以及存在的Bug问题，也只能另辟蹊径去解决喽，呵呵。
介绍下datagrid，我是这样来写这个“管理员信息一览表”页面的
<body id=""><!– 用户列表 –><div id="tabs" class="easyui-tabs" fit="true" border="false" ><div title="用户列表" style="padding:0px;overflow:hidden; color:red; " ><div id="test"></div></div></div> </body>页面内部添加的datagrid-demo.js,js中主要是对表的一些操作以及datagrid布局，colmun样式$(document).ready(function() {$("#test").datagrid({loadMsg:’数据加载中….’,title:’管理员信息一览表’,iconCls:’icon-edit’,width:1184,height:530,url:'<%=basePath%>userlist.do’,nowrap: false,striped: true,collapsible:true,sortName: ‘uid’,sortOrder: ‘desc’,remoteSort: false,pagination:true,rownumbers:true,frozenColumns:[[{field:’ck’,checkbox:true},{title:’编号’,field:’id’,width:80,sortable:true}]],columns:[[{title:’基本信息’,colspan:3},{field:’opt’,title:’操作’,width:100,align:’center’, rowspan:2,formatter:function(value,rec){return ‘<span style="color:red">编辑 删除</span>’;}}],[{field:’name’,title:’用户名’,width:120},{field:’age’,title:’年龄’,width:120},{field:’phone’,title:’联系方式’,width:120}]],toolbar:[{id:’btnadd’,text:’新增用户’,iconCls:’icon-add’,handler:function(){openDialog_add();}},’-‘,{id:’btncut’,text:’删除用户’,iconCls:’icon-cancel’,handler:function(){batch(‘delete’);}},’-‘,{id:’btnstart’,text:’批量启用’,iconCls:’icon-ok’,handler:function(){batch(‘delete’);}},’-‘,{id:’btnstop’,text:’批量禁用’,iconCls:’icon-remove’,handle:function(){batch(‘invalid’);}}]});var p = $(‘#test’).datagrid(‘getPager’);if (p){$(p).pagination({onBeforeRefresh:function(){alert(‘before refresh’);}});}});function resize(){$(‘#test’).datagrid(‘resize’, {width:700,height:400});}function getSelected(){var selected = $(‘#test’).datagrid(‘getSelected’);if (selected){alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4);}}function getSelections(){var ids = [];var rows = $(‘#test’).datagrid(‘getSelections’);for(var i=0;i<rows.length;i++){ids.push(rows[i].code);}alert(ids.join(‘:’));}function clearSelections(){$(‘#test’).datagrid(‘clearSelections’);}function selectRow(){$(‘#test’).datagrid(‘selectRow’,2);}function selectRecord(){$(‘#test’).datagrid(‘selectRecord’,’002′);}function unselectRow(){$(‘#test’).datagrid(‘unselectRow’,2);}function mergeCells(){$(‘#test’).datagrid(‘mergeCells’,{index:2,field:’addr’,rowspan:2,colspan:2});}其中的url为调用后台userlist方法,由于采用的是spring mvc，controller中方法如下：@RequestMapping("userlist")@ResponseBody //1public Object listUser(HttpServletRequest req,HttpServletResponse response) throws IOException{Map<String, Object> result = new HashMap<String, Object>(2) ;List<User> users = userService.getAllUser(null, null);JSONArray jsonArray = new JSONArray();for(User user:users){JSONObject jsonObject = new JSONObject();jsonObject.put("id",user.getUid()) ;jsonObject.put("name",user.getName());jsonObject.put("age", user.getAge());jsonObject.put("phone",user.getPhone());jsonArray.add(jsonObject) ;}//2 result.put("total", users.size());result.put("rows",jsonArray) ;return JSONObject.fromObject(result);}这里要注意下，就是后台返回的数据必须要与easyui中datagrid接收json形式一样才能显示，不然很纠结的，调试了半天都不知道是什么办法，问了下旁边的同事才解决，实习生伤不起啊，，嘿嘿，开发过程中如果能找到一个好的师傅，真的很棒，在这里我也特别感谢经常帮助我的杨成大哥，哈哈！
//1处这里是在SpringMVC中可以在Controller的某个方法上加@ResponseBody注解，表示该方法的返回结果直接写入HTTP response body中，返回一个字符串，spring mvc中很好的支持了json格式，配置文件中添加json转换器，如果不加这个注解，你是看不到效果的！配置文件中写法如下
<bean class ="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" ><property name="messageConverters"><list><ref bean="mappingJacksonHttpMessageConverter" /><!– json转换器 –></list></property> </bean> 请打开窗口，让我的灵魂与你的灵魂相拥。
