最近這段時間都在做關於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>
以上就是最近兩天空餘時間做的小demo,最近在學highcarts,整合到demo中可以產生很漂亮的統計圖。下周會積蓄完善模組包括使用者登入模組，輸入輸出excel格式，上傳檔案等等，想慢慢的把這個架構整合成一個小型的應用系統，呵呵，也算對實習期間一個很好的交代。 10~11月，馬上就要校招，會有好多招聘會，還是小菜鳥的我不得不抓緊時間了，哎。時間浪費了好多，期待自己可以找到一份滿意的工作吧。加油。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
