时候就是生命，浪费了时候就是就义了生命。 今天让我倒腾半天的居然不是写我的javaEE框架，而是调换jqgrid的皮肤。我是相当的憎恶jqgrid的默认皮肤，它总让我想起一向想学而都没学过的EXTJS，看多了那种淡蓝色的皮肤太多了绝对视觉疲惫，所以这篇博文就从jqgrid换肤讲起吧，这个过程在收集上找到的材料斗劲少，是以我今天的博文还是很有实用价值的。不空话了，下面开端吧！
最严重的浪费就是时候的浪费。 起首我们在浏览器地址栏里填入地址：http://www.trirand.com/blog/？page_id=6，这是jqgrid的界面，如下图：
点击Demo files链接，最新的jqgrid_demo40.zip紧缩包，解压后我把示例法度放到Apache Server的htdocs目次下，启动apache web办事器。
然后我在浏览器地址栏里填入地址：http://localhost/jqgrid_demo40/jqgrid.html，界面如下：
这就是我所说的恶心皮肤了，我如今调换jqgrid的皮肤，这里应用到的是jquery的UI法度，我们在浏览器填入地址http://jqueryui.com/themeroller，我们在这里选择我们喜好的皮肤，我斗劲喜好baidu和google那种简洁的页面风格，所以我起首的UI是Smoothness和Overcast两种，Smoothness以前我应用过，今天我选择Overcast（色彩有点暗，然则和我博客的皮肤还是有点相配的），结果如下图：
的UI紧缩包的名称是jquery-ui-1.8.16.custom.zip ，解压后我们在jquery-ui-1.8.16.customdevelopment-bundlehemes路径下找到overcast包，将这个包复制一下，拷贝到jqgrid_demo40 hemes路径下。
下面我们批改jqgrid_demo40示例代码里导航页面的代码，这里要希罕提示下，我们从网站高低载的jqgrid demo代码中的jqgrid.html页面里面有一个javascript脚本引入文件：
<script src="js/jquery.js" type="text/javascript"></script>
而实际上js包下面没有jquery.js文件，里面只有jquery.min.js文件，我们将这段代码批改成：
<script src="js/jquery.min.js" type="text/javascript"></script>
那么apache web办事器下的示例代码就会正确显示了。
下面我们导入新的皮肤，很简单，只要将下面代码调换进去就可以了（上方是原代码，下面是新添代码，原代码要被注释掉）：
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" /> ----------------------------------------------------------------------------- <link rel="stylesheet" type="text/css" media="screen" href="themes/overcast/jquery-ui-1.8.16.custom.css" /> <!--<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />-->
我们再在浏览器地址栏里填入地址：http://localhost/jqgrid_demo40/jqgrid.html，界面如下：
哈哈，终于换成我喜好的皮肤了~~~。
我将在我的javaEE框架里参加jqgrid组件。我将jqgrid demo法度里的js包和themes包下的文件导入到里，如下图：
在WebContent包下建树main.jsp页面，这个将是我的里的主页面，main.jsp代码如下：
<％＠ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"％> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>主页面</title> <link rel="stylesheet" type="text/css" media="screen" href="themes/overcast/jquery-ui-1.8.16.custom.css"/> <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css"/> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script> <script src="js/jquery.layout.js" type="text/javascript"></script> <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> <script src="js/jquery.tablednd.js" type="text/javascript"></script> <script src="js/jquery.contextmenu.js" type="text/javascript"></script> <script src="js/ui.multi.js" type="text/javascript"></script> </head> <body> <table id="dataGrid"></table> </body> </html> <script type="text/javascript"> jQuery（document）.ready（function（）{ jQuery（"＃dataGrid"）.jqGrid（{ datatype: "local"，//数据类型 height: 250，//高度 colNames:[""编号""，""日期""， ""客户""， ""数量""，""税金""，""总金额""，""备注""]，//列名 colModel:[ {name:""id""，index:""id""， width:60， sorttype:"int"}， {name:""invdate""，index:""invdate""， width:90， sorttype:"date"}， {name:""name""，index:""name""， width:100}， {name:""amount""，index:""amount""， width:80， align:"right"，sorttype:"float"}， {name:""tax""，index:""tax""， width:80， align:"right"，sorttype:"float"}， {name:""total""，index:""total""， width:80，align:"right"，sorttype:"float"}， {name:""note""，index:""note""， width:150， sortable:false} ]， multi: true，//支撑多项选择 caption: "jqgrid测试"//列表题目 }）; var mydata = [ {id:"1"，invdate:"2007-10-01"，name:"test"，note:"note"，amount:"200.00"，tax:"10.00"，total:"210.00"}， {id:"2"，invdate:"2007-10-02"，name:"test2"，note:"note2"，amount:"300.00"，tax:"20.00"，total:"320.00"}， {id:"3"，invdate:"2007-09-01"，name:"test3"，note:"note3"，amount:"400.00"，tax:"30.00"，total:"430.00"}， {id:"4"，invdate:"2007-10-04"，name:"test"，note:"note"，amount:"200.00"，tax:"10.00"，total:"210.00"}， {id:"5"，invdate:"2007-10-05"，name:"test2"，note:"note2"，amount:"300.00"，tax:"20.00"，total:"320.00"}， {id:"6"，invdate:"2007-09-06"，name:"test3"，note:"note3"，amount:"400.00"，tax:"30.00"，total:"430.00"}， {id:"7"，invdate:"2007-10-04"，name:"test"，note:"note"，amount:"200.00"，tax:"10.00"，total:"210.00"}， {id:"8"，invdate:"2007-10-03"，name:"test2"，note:"note2"，amount:"300.00"，tax:"20.00"，total:"320.00"}， {id:"9"，invdate:"2007-09-01"，name:"test3"，note:"note3"，amount:"400.00"，tax:"30.00"，total:"430.00"} ];//测试数据 for（var i=0;i<=mydata.length;i++） jQuery（"＃dataGrid"）.jqGrid（""addRowData""，i+1，mydata[i]）; }）; </script>
我们在浏览器地址栏里填入地址：http://localhost:8080/ssiprj/main.jsp，页面显示如下：
呵呵，结果不错啊！
下面我将从办事端取数据，然后用main.jsp页面显现出来。批改后的main.jsp文件代码如下：
<％＠ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"％> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>主页面</title> <link rel="stylesheet" type="text/css" media="screen" href="themes/overcast/jquery-ui-1.8.16.custom.css"/> <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css"/> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script> <script src="js/jquery.layout.js" type="text/javascript"></script> <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> <script src="js/jquery.tablednd.js" type="text/javascript"></script> <script src="js/jquery.contextmenu.js" type="text/javascript"></script> <script src="js/ui.multi.js" type="text/javascript"></script> </head> <body> <br/> <br/> <table id="dataGrid"></table> <div id="pager"></div> </body> </html> <script type="text/javascript"> jQuery（document）.ready（function（）{ jQuery（"＃dataGrid"）.jqGrid（{ url:""queryProductList.action""， datatype: "json"，//数据类型 办事端返回的值是json类型 height: 250，//高度 colNames:[""编号""，""名称""， ""描述""， ""创建时候""，""批改时候""，""状况""]，//列名 colModel:[ {name:""id""，index:""id""，align:""right""，width:60， sorttype:"int"}， {name:""name""，index:""name""， width:120}， {name:""desc""，index:""desc""， width:130}， {name:""create_date""，index:""create_date""， width:150，sorttype:"date"}， {name:""modify_date""，index:""modify_date""， width:150，sorttype:"date"}， {name:""status""，index:""status""， width:80，sorttype:"int"} ]， rowNum:10，//默认显示行数 rowList:[10，20，50]， jsonReader:{ root:""results""， repeatitems: false }， pager: ""＃pager""，//分页 multi: true，//支撑多项选择 sortname: ""id""，//排序字段 sortorder: "desc"，//排序体式格式 caption: "jqgrid测试"//列表题目 }）; jQuery（"＃dataGrid"）.jqGrid（""navGrid""，""＃pager""，{edit:false，add:false，del:false}）; }）; </script>
我们还要批改下ProductAction.java类下的queryProductList办法，代码如下：
public String queryProductList（） throws Exception
{
Map<String， Object> map = new HashMap<String， Object>（）;
// map.put（"name"， namequery）;
// JSONObject jsonObject = new JSONObject（jsonQuery）;//把查询参数转化为json对象
// map.put（"name"， jsonObject.get（"namequery"））;
results = this.productService.queryProductList（map）;
flag = "success";
msg = "查询操纵成功！";
welcome = "你的查询操纵已经完成！";
return SUCCESS;
}
将我昨天写的json解析代码注释掉，不然会报错。
我们在浏览器地址栏里填入地址：http://localhost:8080/ssiprj/main.jsp，页面显示如下图：
数据正确显示了，我想有些童鞋对jqgrid的用法不太熟悉吧，接下来我将jqgrid的根蒂根基属性做做简单介绍，因为时候有限，想深切懂得jqgrid的用法，可以查查baidu。
| 属性 | 申明 |
|---|---|
|
url
|
jqGrid控件经由过程这个参数获得须要显示的数据，具体的返回值可以使XML也可所以Json。
|
|
这个参数用于设定将要获得的数据类型。我最常用的是“json”，其余的类型还包含：xml、xmlstring、local、javascript、 function。
| |
|
mtype
|
定义应用哪种办法创议恳求，GET或者POST
|
|
height
|
Grid的高度，可以接管数字、％值、auto，默认值为150。
|
|
width
|
Grid的宽度，若是未设置，则宽度应为所有列宽的之和；若是设置了宽度，则每列的宽度将会按照shrinkToFit选项的设置，进行设置。
|
|
shrinkToFit
|
此选项用于按照width策画每列宽度的算法。默认值为true。若是shrinkToFit为true且设置了width值，则每列宽度会按照 width成比例缩放；若是shrinkToFit为false且设置了width值，则每列的宽度不会成比例缩放，而是对峙原有设置，而Grid将会有 程度迁移转变条。
|
|
autowidth
|
默认值为false。若是设为true，则Grid的宽度会按照父容器的宽度主动重算。重算仅产生在Grid初始化的阶段；若是当父容器尺寸变更了，同 时也须要变更Grid的尺寸的话，则须要在本身的代码中调用setGridWidth办法来完成。
|
|
pager
|
定义页码把握条Page Bar
|
|
sortname
|
指定默认的排序列，可所以列名也可所以数字。此参数会在被传递到Server端。
|
|
viewrecords
|
设置是否在Pager Bar显示所有记录的总数。
|
|
caption
|
设置Grid表格的题目，若是未设置，则题目区域不显示。
|
|
caption
|
Grid的题目。若是设置了，则将显示在Grid的Header层。
|
|
rowNum
|
用于设置Grid中一次显示的行数，默认值为20。恰是这个选项将参数rows（prmNames中设置的）经由过程url选项设置的链接传递到 Server。重视若是Server返回的数据行数跨越了rowNum的设定，则Grid也只显示rowNum设定的行数。
|
|
rowList
|
一个数组，用于设置Grid可以接管的rowNum值。例如[10，20，30]。
|
|
colNames
|
字符串数组，用于指定各列的题头文本，与列的次序是对应的。
|
|
colModel
|
最首要的数组之一，用于设定各列的参数。（稍后胪陈）
|
|
prmNames
|
这是一个数组，用于设置jqGrid将要向Server传递的参数名称。（稍后胪陈）
|
|
jsonReader
|
这又是一个数组，用来设定如何解析从Server端发还来的json数据。（稍后胪陈）
|
prmNames是jqGrid的一个首要选项，用于设置jqGrid将要向Server传递的参数名称。其默认值为：
prmNames : {
page:"page"， // 默示恳求页码的参数名称
rows:"rows"， // 默示恳求行数的参数名称
sort: "sidx"， // 默示用于排序的列名的参数名称
order: "sord"， // 默示采取的排序体式格式的参数名称
search:"_search"， // 默示是否是搜刮恳求的参数名称
nd:"nd"， // 默示已经发送恳求的次数的参数名称
id:"id"， // 默示当在编辑数据模块中发送数据时，应用的id的名称
oper:"oper"， // operation参数名称（我临时还没用到）
editoper:"edit"， // 当在edit模式中提交数据时，操纵的名称
addoper:"add"， // 当在add模式中提交数据时，操纵的名称
deloper:"del"， // 当在模式中提交数据时，操纵的名称
subgridid:"id"， // 当点击以载入数据到子表时，传递的数据名称
npage: null，
totalrows:"totalrows" // 默示需从Server获得统共几许行数据的参数名称，拜见jqGrid选项中的rowTotal
}
jsonReader是jqGrid的一个首要选项，用于设置如何解析从Server端发还来的json数据。其默认值为：
jsonReader : {
root: "rows"， // json中代表实际模型数据的进口
page: "page"， // json中代表当前页码的数据
total: "total"， // json中代表页码总数的数据
records: "records"， // json中代表数据行总数的数据
repeatitems: true， // 若是设为false，则jqGrid在解析json时，会按照name来搜刮对应的数据元素（即可以json中元素可以不按次序）；而所应用的name是来自于colModel中的name设定。
cell: "cell"，
id: "id"，
userdata: "userdata"，
subgrid: {
root:"rows"，
repeatitems: true，
cell:"cell"
}
}
colModel的首要选项
name ：为Grid中的每个列设置独一的名称，这是一个必须选项，此中保存字包含subgrid、cb、rn。 index ：设置排序时所应用的索引名称，这个index名称会作为sidx参数（prmNames中设置的）传递到Server。 label ：当jqGrid的colNames选项数组为空时，为各列指定题头。若是colNames和此项都为空时，则name选项值会成为题头。 width ：设置列的宽度，今朝只能接管以px为单位的数值，默认为150。 sortable ：设置该列是否可以排序，默认为true。 search ：设置该列是否可以被列为搜刮前提，默认为true。 resizable ：设置列是否可以变革尺寸，默认为true。 hidden ：设置此列初始化时是否为隐蔽状况，默认为false。 formatter ：预设类型或用来格局化该列的自定义函数名。常用预设格局有：integer、date、currency、number等
好了，今天内容写完了，框架越来越完美了，我想下一步为main.jsp加一个导航，然后做绘制图表的操纵，这个里面我将应用velocity模板说话。今天有博友问我深切解析javascript里对象构建的下篇合适出来，我下一篇博文将这块内容补全。
李大钊
4182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
