java笔记：本身下手写javaEE框架（八）--为jqgrid换换皮肤然后加到我的框架里

最新推荐文章于 2021-10-25 08:23:11 发布

jjjy00

最新推荐文章于 2021-10-25 08:23:11 发布

阅读量1.4k

点赞数

时候就是生命，浪费了时候就是就义了生命。　　今天让我倒腾半天的居然不是写我的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里对象构建的下篇合适出来，我下一篇博文将这块内容补全。

李大钊