2012.04統(tǒng)一監(jiān)控平臺(tái)項(xiàng)目打醬油的日子

系統(tǒng)介紹：

目標(biāo)，致力于服務(wù)于公司內(nèi)部的所有系統(tǒng)，對(duì)所有接入監(jiān)控的系統(tǒng)進(jìn)行監(jiān)控，包括系統(tǒng)監(jiān)控，URL存活監(jiān)控，端口存活監(jiān)控，方法監(jiān)控等。

作為打醬油的我，沒(méi)有接觸到上面的編碼，主要作為小組間的支持過(guò)去。項(xiàng)目中有一塊系統(tǒng)管理類(lèi)的東西，需要添加部門(mén)信息之類(lèi)的，我就去做這個(gè)了。

了解需求之類(lèi)的就不在多說(shuō)了，也不是我要將的主題，主題是：jqGrid插件。

先來(lái)看一看運(yùn)行的界面吧，還是有點(diǎn)爽的，不管是當(dāng)時(shí)看著，還是現(xiàn)在看。

?

那接下來(lái)，我們來(lái)講講怎么做的。

要做出這么一個(gè)列表，我們需要知道他的數(shù)據(jù)格式是什么？以及需要哪些頁(yè)面元素等。

詳解一下：

?

<table class="" id="list2"></table> <div id="noticepage"></div> </div>

?

需要這兩個(gè)頁(yè)面元素，jqgrid通過(guò)這兩個(gè)標(biāo)簽的id來(lái)渲染頁(yè)面，jqGrid定義的模板如下：

//初始化var $thisGrid = jQuery("#list2");$thisGrid.jqGrid({url:umpsetting.funcrootpath +'/menu/queryMenu.action', datatype: "json", mtype:"POST",colNames:['菜單編號(hào)','菜單名稱(chēng)','菜單父ID','操作人','操作時(shí)間','狀態(tài)','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 "無(wú)效";}},{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});

?

?

數(shù)據(jù)結(jié)構(gòu)如下：

具體數(shù)據(jù)：

突然感覺(jué)這些都不是重點(diǎn)，重點(diǎn)是官方?jīng)]有給出java版的demo，這里的重點(diǎn)的整合struts吧，大家覺(jué)得呢？

Js，html這些在官方demo中都有，那我們直接從Action的代碼開(kāi)始講

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就是組裝查詢(xún)參數(shù)而已，不需要重點(diǎn)了解。我們進(jìn)一步來(lái)了解result里放了什么？從這一行代碼里可以看出

jsonGrid = (SimplePage<Menu>) result.get("menuList"); SimplePage<Menu> 對(duì)象，那這個(gè)對(duì)象具體是怎樣的呢？再往下看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; }

?

可以看出，是通過(guò)這樣一行代碼創(chuàng)建了它

SimplePage<Menu> sp = newSimplePage<Menu>(page, rows, menus.size(), resultList);

那SimplePage內(nèi)部的結(jié)構(gòu)呢？用一張圖來(lái)看吧

?

加個(gè)注解，可以格式化你想要的json里的key鍵

@JSON(name = "records") public int getTotalCount() {return totalCount; }

?

那返回這個(gè)對(duì)象，struts在什么地方處理的呢？接下來(lái)，看一看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>

?

至于為什么要配置這個(gè)JSONResult有篇文章可以推薦給大家讀讀。

http://www.cnblogs.com/ini_always/archive/2011/10/15/2213404.html

我們這里返回的是jsonGrid，斷點(diǎn)運(yùn)行來(lái)看看結(jié)果吧

?

主要在這兩段代碼：

?

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所對(duì)應(yīng)的值，也就是我們放的SimplePage<Menu>對(duì)象。

?

最后createJSONString創(chuàng)建所要的值：

在頁(yè)面中，jqgrid的配置ajax調(diào)用一下，就ok了，數(shù)據(jù)就展示出來(lái)了。

需要注意的是，正確的引入js，css等

把這兩個(gè)用上

jquery-ui-redmond/jquery-ui-1.8.10.custom.min.js

jquery-ui-redmond/jquery-ui-1.8.10.custom.css

對(duì)那彈出框的處理

來(lái)看新增吧

function add() {$("#name").val("");$("#addOpt").dialog("open"); }

?

頁(yè)面元素：

<div id="addOpt" class="modal"><div class="moadalCon"><table class="fakeGrid mt10"><tr><td class="valignT w100 textR"><label class="necessaryL">菜單名稱(chēng):</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")方法，打開(kāi)一個(gè)窗口，或者叫對(duì)話(huà)框。把這個(gè)div放到對(duì)話(huà)款里。那同學(xué)們一定很關(guān)心是怎么保存的吧，

看下面的代碼：

//創(chuàng)建彈出頁(yè)面 $("#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("報(bào)警分類(lèi)信息已經(jīng)存在!");}else{if(data==true){gridReload();}else{alert("新增報(bào)警分類(lèi)信息出錯(cuò)!");}}}});$(this).dialog("close");},'關(guān)閉': function() {$(this).dialog("close");}},close: function() {} });

可以看出，是通過(guò)ajax異步去保存的，成功之后還gridReload();重新加載grid。

方法如下：

?

/**reload grid*/ window.gridReload = function(){var name = $('#queryName').val();$thisGrid.setGridParam({postData:{/*此次寫(xiě)的默認(rèn)查詢(xún)參數(shù)*/"queryParam.name":encodeURIComponent(name)}}).trigger("reloadGrid"); };

?

好了，所有的分享就到這里，有什么疑問(wèn)，可以隨時(shí)提哦。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的在ump系统的那半个多月-jqGrid的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。