jqgrid demo java_java笔记：自己动手写javaEE框架（八）--为jqgrid换换皮肤然后加到我的框架里...

今天让我倒腾半天的居然不是写我的javaEE框架，而是更换jqgrid的皮肤。我是相当的讨厌jqgrid的默认皮肤，它总让我想起一直想学而都没学过的EXTJS，看多了那种淡蓝色的皮肤太多了绝对视觉疲劳，所以这篇博文就从jqgrid换肤讲起吧，这个过程在网络上找到的资料比较少，因此我今天的博文还是很有实用价值的。不废话了，下面开始吧！

点击Demo files链接，下载最新的jqgrid_demo40.zip压缩包，解压后我把示例程序放到Apache Server的htdocs目录下，启动apache web服务器。

这就是我所说的恶心皮肤了，我现在更换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.custom\development-bundle\themes路径下找到overcast包，将这个包复制一下，拷贝到jqgrid_demo40\themes路径下。

下面我们修改jqgrid_demo40示例代码里导航页面的代码，这里要特别提醒下，我们从网站上下载的jqgrid demo代码中的jqgrid.html页面里面有一个javascript脚本引入文件：

而实际上js包下面没有jquery.js文件，里面只有jquery.min.js文件，我们将这段代码修改成：

那么apache web服务器下的示例代码就会正确显示了。

下面我们导入新的皮肤，很简单，只要将下面代码替换进去就可以了(上面是原代码，下面是新添代码，原代码要被注释掉)：

-----------------------------------------------------------------------------

哈哈，终于换成我喜欢的皮肤了~~~。

我将在我的javaEE框架里加入jqgrid组件。我将jqgrid demo程序里的js包和themes包下的文件导入到工程里，如下图：

在WebContent包下建立main.jsp页面，这个将是我的工程里的主页面，main.jsp代码如下：

主页面

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}

],

multiselect:true,//支持多项选择caption:"jqgrid测试"//列表标题});varmydata=[

{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(vari=0;i<=mydata.length;i++)

jQuery("#dataGrid").jqGrid('addRowData',i+1,mydata[i]);

});

呵呵，效果不错啊！

下面我将从服务端取数据，然后用main.jsp页面展示出来。修改后的main.jsp文件代码如下：

主页面