在ump系统的那半个多月-jqGrid
2012.04統一監控平臺項目打醬油的日子
系統介紹：
目標，致力于服務于公司內部的所有系統，對所有接入監控的系統進行監控，包括系統監控，URL存活監控，端口存活監控，方法監控等。
作為打醬油的我，沒有接觸到上面的編碼，主要作為小組間的支持過去。項目中有一塊系統管理類的東西，需要添加部門信息之類的，我就去做這個了。
了解需求之類的就不在多說了，也不是我要將的主題，主題是：jqGrid插件。
先來看一看運行的界面吧，還是有點爽的，不管是當時看著，還是現在看。
?
那接下來，我們來講講怎么做的。
要做出這么一個列表，我們需要知道他的數據格式是什么？以及需要哪些頁面元素等。
詳解一下：
?
<table class="" id="list2"></table> <div id="noticepage"></div> </div>?
需要這兩個頁面元素，jqgrid通過這兩個標簽的id來渲染頁面，jqGrid定義的模板如下：
//初始化var $thisGrid = jQuery("#list2");$thisGrid.jqGrid({url:umpsetting.funcrootpath +'/menu/queryMenu.action', datatype: "json", mtype:"POST",colNames:['菜單編號','菜單名稱','菜單父ID','操作人','操作時間','狀態','URL','操作'], colModel:[ {name:'id',index:'id',align:"center",sortable:false,hidden:true}, {name:'name',index:'name',align:"center",sortable:false},{name:'pid',index:'pid',align:"center",sortable:false},{name:'creator',index:'creator',align:"center",sortable:false}, {name:'createTime',index:'createTime',align:"center",sortable:false,formatter:function(cellval){if(cellval == null || cellval == "")return "";return cellval.replace("T"," ");}},{name:'status',index:'status',align:"center",sortable:false,formatter:function(cellval){if(cellval=="1")return "有效";if(cellval=="0")return "無效";}},{name:'url',index:'url',align:"center",sortable:false},{name:'des',index:'id',align:"center",sortable:false,formatter:currencyFmatter}],width:800,height:250,rowNum:20, rowList:[15,20,30], pager: '#noticepage', sortname: 'id', rownumbers:true,viewrecords: true, rownumbers:true,sortorder: "desc", caption:"",jsonReader:{root: "rows",page: "page",total: "total",records: "records",repeatitems: false,id: "0"}}).jqGrid('navGrid','#noticepage',{edit:false,add:false,del:false,search:false});?
?
數據結構如下：
具體數據：
突然感覺這些都不是重點，重點是官方沒有給出java版的demo，這里的重點的整合struts吧，大家覺得呢？
Js，html這些在官方demo中都有，那我們直接從Action的代碼開始講
public String queryMenu() throws Exception {Map<String, Object> initMap = new HashMap<String, Object>();result = menuService.queryByPage(page, rows, queryParam == null ? initMap : parseQueryParam(queryParam));if (result.isSuccess()) {jsonGrid = (SimplePage<Menu>) result.get("menuList");}return JSON_GRID; }?
InitMap就是組裝查詢參數而已，不需要重點了解。我們進一步來了解result里放了什么？從這一行代碼里可以看出
jsonGrid = (SimplePage<Menu>) result.get("menuList"); SimplePage<Menu> 對象，那這個對象具體是怎樣的呢？再往下看public Result queryByPage(int page, int rows, Map<String, Object> map) {Result result = new Result(false);List<Menu> resultList = getMenus(page,rows);SimplePage<Menu> sp = new SimplePage<Menu>(page, rows, menus.size(), resultList);result.addDefaultModel("menuList", sp);result.setSuccess(true);return result; }?
可以看出，是通過這樣一行代碼創建了它
SimplePage<Menu> sp = newSimplePage<Menu>(page, rows, menus.size(), resultList);
那SimplePage內部的結構呢？用一張圖來看吧
?
加個注解，可以格式化你想要的json里的key鍵
@JSON(name = "records") public int getTotalCount() {return totalCount; }?
那返回這個對象，struts在什么地方處理的呢？接下來，看一看struts里的配置情況：
<package name="json-protected-default" extends="ump-default"><result-types><result-type name="json" class="org.apache.struts2.json.JSONResult" /></result-types><interceptors><interceptor name="json"class="org.apache.struts2.json.JSONInterceptor" /></interceptors><global-results><result name="jsonObject" type="json"><param name="root">jsonObject</param></result><result name="jsonGrid" type="json"><param name="root">jsonGrid</param></result><result name="jsonMap" type="json"><param name="root">jsonMap</param></result></global-results> </package>?
至于為什么要配置這個JSONResult有篇文章可以推薦給大家讀讀。
http://www.cnblogs.com/ini_always/archive/2011/10/15/2213404.html
我們這里返回的是jsonGrid，斷點運行來看看結果吧
?
主要在這兩段代碼：
?
protected Object findRootObject(ActionInvocation invocation) {Object rootObject;if (this.root != null) {ValueStack stack = invocation.getStack();rootObject = stack.findValue(root);} else {rootObject = invocation.getStack().peek(); // model overrides action}return rootObject;}protected String createJSONString(HttpServletRequest request, Object rootObject) throws JSONException {String json = JSONUtil.serialize(rootObject, excludeProperties, includeProperties, ignoreHierarchy, enumAsBean, excludeNullProperties);json = addCallbackIfApplicable(request, json);return json;}?
?
從值棧ValueStack里找到root=jsonGrid所對應的值，也就是我們放的SimplePage<Menu>對象。
?
最后createJSONString創建所要的值：
在頁面中，jqgrid的配置ajax調用一下，就ok了，數據就展示出來了。
需要注意的是，正確的引入js，css等
把這兩個用上
jquery-ui-redmond/jquery-ui-1.8.10.custom.min.js
jquery-ui-redmond/jquery-ui-1.8.10.custom.css
對那彈出框的處理
來看新增吧
?
頁面元素：
<div id="addOpt" class="modal"><div class="moadalCon"><table class="fakeGrid mt10"><tr><td class="valignT w100 textR"><label class="necessaryL">菜單名稱:</label></td><td class="textL"><input type="text" name="name" id="name" class="textField28"/><div class="errorItem"></div></td></tr><tr><td class="valignT w100 textR"><label class="necessaryL">菜單父ID:</label></td><td class="textL"><input type="text" name="pid" id="pid" class="textField28"/><div class="errorItem"></div></td></tr><tr><td class="valignT w100 textR"><label class="necessaryL">菜單URL:</label></td><td class="textL"><input type="text" name="url" id="url" class="textField28"/><div class="errorItem"></div></td></tr></table></div> </div>?
用dialog("open")方法，打開一個窗口，或者叫對話框。把這個div放到對話款里。那同學們一定很關心是怎么保存的吧，
看下面的代碼：
//創建彈出頁面 $("#addOpt").dialog({title:"新增菜單信息",autoOpen: false,width: 500,resizable:false,height: 300,modal: true,buttons: {"確定": function() {jQuery.ajax({type: "post",cache: false,url:umpsetting.funcrootpath + "/menu/addMenu.action",data: {"menu.name":encodeURIComponent($("#name").val()),"menu.url":encodeURIComponent($("#url").val()),"menu.pid":$("#pid").val()},dataType: "json",success: function (data) {if(data=="EXIST"){alert("報警分類信息已經存在!");}else{if(data==true){gridReload();}else{alert("新增報警分類信息出錯!");}}}});$(this).dialog("close");},'關閉': function() {$(this).dialog("close");}},close: function() {} });可以看出，是通過ajax異步去保存的，成功之后還gridReload();重新加載grid。
方法如下：
?
/**reload grid*/ window.gridReload = function(){var name = $('#queryName').val();$thisGrid.setGridParam({postData:{/*此次寫的默認查詢參數*/"queryParam.name":encodeURIComponent(name)}}).trigger("reloadGrid"); };?
好了，所有的分享就到這里，有什么疑問，可以隨時提哦。
總結
以上是生活随笔為你收集整理的在ump系统的那半个多月-jqGrid的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 和我信如何取消套餐
- 下一篇： Oracle11gR2在9x8hk..W