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

时候就是生命,浪费了时候就是就义了生命。  今天让我倒腾半天的居然不是写我的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"}
            ];//测试数据
forvar 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:[102050],
        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里对象构建的下篇合适出来,我下一篇博文将这块内容补全。

 

 李大钊

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值