SSH框架網(wǎng)上商城項(xiàng)目第6戰(zhàn)之基于DataGrid的數(shù)據(jù)顯示
EasyUI中DataGrid以表格形式展示數(shù)據(jù)，并提供了豐富的選擇、排序、分組和編輯數(shù)據(jù)的功能支持。DataGrid的設(shè)計(jì)用于縮短開發(fā)時(shí)間，并且使開發(fā)人員不需要具備特定的知識。它是輕量級的且功能豐富。單元格合并、多列標(biāo)題、凍結(jié)列和頁腳只是其中的一小部分功能。
1. 回顧一下第4節(jié)內(nèi)容
在第4節(jié)中，我們使用EasyUI搭建好了左側(cè)菜單欄，并且通過點(diǎn)擊菜單選項(xiàng)在右邊彈出對應(yīng)的選項(xiàng)卡。這節(jié)我們來使用DataGrid把右邊的選項(xiàng)卡部分做好。先看一下第4節(jié)中最后的aindex.jsp文件（也可參見第4節(jié)中的內(nèi)容）：
2. 創(chuàng)建DataGrid控件的幾種方式
DataGrid顯示數(shù)據(jù)是json格式的，所以我們首先要把從后臺獲取到的數(shù)據(jù)打包成Jason格式，然后傳到前臺來讓DataGrid來顯示，這一節(jié)我們先不從后臺獲取數(shù)據(jù)，先自己準(zhǔn)備一個(gè).json文件，里面有ison格式的數(shù)據(jù)，然后我們來讓DataGird顯示，先把顯示功能做好，再請求后臺數(shù)據(jù)。
我們先從EasyUI的參考文檔中看一下DataGrid顯示的格式是什么樣的，如下圖所示：
我們沿著參考文檔往下看，我們發(fā)現(xiàn)DataGrid空間是通過<table>來創(chuàng)建的，有三種創(chuàng)建方式：
第一種：從現(xiàn)有的表格元素創(chuàng)建DataGrid，在HTML中定義列、行和數(shù)據(jù)。
第二種：通過<table>標(biāo)簽創(chuàng)建DataGrid控件。在表格內(nèi)使用<th>標(biāo)簽定義列。
第三種：使用Javascript去創(chuàng)建DataGrid控件。
我們采取第三種，用js去創(chuàng)建DataGrid控件，首先我們得先準(zhǔn)備一個(gè)存儲了json格式數(shù)據(jù)的文件，在WebRoot/jquery-easyui-1.3.5/demo/datagrid/下面有幾個(gè)json文件，我們選擇一個(gè)datagrid_data1.json，拷貝到WebRoot目錄下，修改一下參數(shù)，等會我們要來顯示這個(gè)json文件里的數(shù)據(jù)。如下：
{"total":10,"rows":[
{"code":"FI-SW-01","productname":"Koi","price":10.00},
{"code":"K9-DL-01","productname":"Dalmation","price":12.00},
{"code":"RP-SN-01","productname":"Rattlesnake","price":12.00},
{"code":"RP-LI-02","productname":"Iguana","price":12.00},
{"code":"FL-DSH-01","productname":"Manx","price":12.00},
{"code":"FL-DSH-01","productname":"Manx","price":12.00},
{"code":"FL-DLH-02","productname":"Persian","price":12.00},
{"code":"FL-DLH-02","productname":"Persian","price":12.00},
{"code":"AV-CB-01","productname":"Amazon Parrot","price":92.00},
{"code":"AV-CB-03","productname":"Amazon Parrot","price":92.00}
]}
我們可以看到，json數(shù)據(jù)格式是："key1": value1, "key2":value2。每個(gè)value里面又可以是數(shù)組，數(shù)組中保存新的Jason數(shù)據(jù)。
有了json文件，我們接下來就可以設(shè)計(jì)DataGrid控件了，整個(gè)DataGrid都是在query.jsp中設(shè)計(jì)的，因?yàn)橐@示的內(nèi)容就是query.jsp中的內(nèi)容。我們來看看query.jsp頁面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ include file="/public/head.jspf" %>
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
//請求數(shù)據(jù)的url地址，后面會改成請求我們自己的url
url:'datagrid_data.json',
loadMsg:'Loading......',
queryParams:{type:''},//參數(shù)
//width:300,
fitColumns:true,//水平自動展開，如果設(shè)置此屬性，則不會有水平滾動條，演示凍結(jié)列時(shí)，該參數(shù)不要設(shè)置
//顯示斑馬線
striped:true,
//當(dāng)數(shù)據(jù)多的時(shí)候不換行
nowrap:true,
singleSelect:true, //如果為真，只允許單行顯示，全顯功能失效
//設(shè)置分頁
pagination:true,
rowStyler: function(index,row){
console.info("index" + index + "," + row)
if(index % 2 == 0) {
return 'background-color:#fff;';
} else {
return 'background-color:#ff0;';
}
},
//同列屬性，但是這些列將會凍結(jié)在左側(cè),大小不會改變，當(dāng)寬度大于250時(shí)，會顯示滾動條，但是凍結(jié)的列不在滾動條內(nèi)
frozenColumns:[[
{field:'checkbox',checkbox:true},
{field:'code',title:'編號',width:200}
]],
//配置datagrid的列字段
//field：列字段的名稱，與json的key捆綁
//title：列標(biāo)題，是顯示給人看的
columns:[[
{field:'productname',title:'類別名稱',width:100,
//用來格式化當(dāng)前列的值，返回的是最終的數(shù)據(jù)
formatter: function(value,row,index){
return "<span title=" + value + ">" + value + "</span>";
}
},
{field:'price',title:'價(jià)格',width:100,
styler: function(value,row,index){
//設(shè)置當(dāng)前單元格的樣式，返回的字符串直接交給 style屬性
//console.info("val:" + value + ",row:" + row + ",index:" + index)
if (value < 20){
return 'color:red;';
}
}
}
]]
});
});
</script>
</head>
<body>
<table id="dg"></table>
</body>
</html>
3. DataGrid控件的屬性
我們可以看到，使用js去創(chuàng)建DataGrid控件的話，只要一個(gè)<table>標(biāo)簽即可，主要都是在js中完成。DataGrid的控件很強(qiáng)大，這里我們主要做一下基本的顯示，更多其他的功能可以參照EasyUI的開發(fā)文檔。我們現(xiàn)在針對上面的query.jsp文件做一下分析：
首先DataGrid控件有兩種屬性：一個(gè)是DataGrid屬性，還有一個(gè)是列屬性。顧名思義，DataGrid屬性是給整個(gè)DataGrid控件添加的屬性，而列屬性是針對某一列的。每中屬性有很多，這里只做了一些基本的常用的屬性。
DataGrid屬性里最重要的是columns屬性，它是一個(gè)數(shù)組，可以創(chuàng)建多列，見下面的截圖：
我們來看下columns屬性中有哪些細(xì)節(jié)：
列屬性中，field表示字段名稱，對應(yīng)與json數(shù)據(jù)的key，然后title是要顯示給用戶看的標(biāo)題，見query.jsp文件中，還有其他一些基本屬性可以參照EasyUI文檔。列屬性中比較重要的也比較常用的兩個(gè)屬性是formatter和styler，分別是用來格式化當(dāng)前列的值和設(shè)置單元格樣式的，我們主要來看一下這兩個(gè)屬性：
我們具體來分析一下上面query.jsp中的columns屬性中，如何使用這兩個(gè)列屬性的：
{field:'productname',title:'類別名稱',width:100,
//用來格式化當(dāng)前列的值，返回的是最終的數(shù)據(jù)
formatter: function(value,row,index){
return "<span title=" + value + ">" + value + "</span>";//設(shè)置為鼠標(biāo)放上去顯示value值
}
},
{field:'price',title:'價(jià)格',width:100,
styler: function(value,row,index){
//設(shè)置當(dāng)前單元格的樣式，返回的字符串直接交給 style屬性
//console.info("val:" + value + ",row:" + row + ",index:" + index)
if (value < 20){ //如果value值小于20
return 'color:red;'; //將value值顯示為紅色
}
}
}
然后我們再看看DataGrid控件的一些屬性：
url表示要顯示的數(shù)據(jù)來源，這里設(shè)置成datagrid_data.json表示數(shù)據(jù)來源是這個(gè)json文件，放在WebRoot目錄下了；
loadMsg表示加載數(shù)據(jù)過程中顯示的信息；
queryParams表示傳給后臺的參數(shù)，在這里用不到，因?yàn)槲覀兡壳斑€沒有和后臺關(guān)聯(lián)上，只是顯示一個(gè)json文件，后面會用到；
fitColums設(shè)置為true后表示水平自動展開，自適應(yīng)網(wǎng)格的寬度，如此設(shè)置，水平方向就不會有滾動條了，也不用設(shè)置寬度了；
width是寬度，如果數(shù)據(jù)過長顯示不下，水平方向就會出現(xiàn)滾動條；
striped設(shè)置為true后表示顯示斑馬線，這是一個(gè)顯示樣式，試一下便知；
nowrap設(shè)置為true后表示當(dāng)數(shù)據(jù)多的時(shí)候不換行，否則某一行數(shù)據(jù)多的時(shí)候會換行，會比較難看；
pagination設(shè)置為true后表示開啟分頁功能；
singleSelect設(shè)置為true時(shí)，只允許勾選單行，全選功能失效，主要用于最前面一列的復(fù)選框；
frozenColums是為了設(shè)置凍結(jié)列，在frozenColums中設(shè)置的列，不會改變大小。里面如果設(shè)置了{(lán)field:'checkbox',checkbox:true},表示這是個(gè)復(fù)選框列，給用戶勾選用的，如果設(shè)置了上面的singleSelect，那么只能選擇一項(xiàng)，不能全選；
rowStyler是設(shè)置所有行的樣式的，兩個(gè)參數(shù)為行索引和行，上面設(shè)置的是偶數(shù)行是白色，奇數(shù)行是黃色。
等等……還有其他DataGrid控件的屬性，可以參考EasyUI的技術(shù)文檔，在這里就不一一解說了。
4. DataGrid數(shù)據(jù)顯示的效果
好了，完成了query.jsp后，我們重啟tomcat，然后進(jìn)入到后臺，點(diǎn)擊左側(cè)菜單欄的類別管理，就會在右邊出現(xiàn)一個(gè)類別管理的選項(xiàng)卡，然后就會顯示我們指定的json數(shù)據(jù)，這個(gè)Jason數(shù)據(jù)是我們自己放在WebRoot目錄下的，后面我們將會把json和struts整合，動態(tài)的獲取從后臺傳過來的json數(shù)據(jù)。
（注：到最后我會提供整個(gè)項(xiàng)目的源碼下載！歡迎大家收藏或分享）
原文地址：http://blog.csdn.net/eson_15/article/details/51322262
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- JSChart輕量級圖形報(bào)表工具(內(nèi)置函數(shù)中文參考)
- php網(wǎng)上商城購物車設(shè)計(jì)代碼分享
- php 網(wǎng)上商城促銷設(shè)計(jì)實(shí)例代碼
- SSH框架的常見問題和解決方法
- SSH+Jquery+Ajax框架整合
- SSH網(wǎng)上商城之使用ajax完成用戶名是否存在異步校驗(yàn)
- java網(wǎng)上商城開發(fā)之郵件發(fā)送功能（全）
- SSH框架網(wǎng)上商城項(xiàng)目第12戰(zhàn)之添加和更新商品功能
- SSH框架網(wǎng)上商城項(xiàng)目第25戰(zhàn)之使用java email給用戶發(fā)送郵件
- SSH框架網(wǎng)上商城項(xiàng)目第29戰(zhàn)之使用JsChart技術(shù)顯示商品銷售報(bào)表
相關(guān)文章
這篇文章主要介紹了詳解Java Spring各種依賴注入注解的區(qū)別的相關(guān)資料,需要的朋友可以參考下2016-03-03
打開IDEA配置Spring項(xiàng)目時(shí)發(fā)現(xiàn)沒有選擇java?1.8的選項(xiàng)解決方案
這篇文章主要介紹了打開IDEA配置Spring項(xiàng)目時(shí)發(fā)現(xiàn)沒有選擇java?1.8的選項(xiàng)的解決方案,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者idea具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2025-03-03
詳解Java的MyBatis框架中的緩存與緩存的使用改進(jìn)
很多人在使用MyBatis的緩存后經(jīng)常會遇到MySQL分頁查詢的顯示問題,針對于此,這里我們就來詳解Java的MyBatis框架中的緩存與緩存的使用改進(jìn),首先來回顧一下MyBatis的緩存機(jī)制與執(zhí)行:2016-06-06
解決IDEA創(chuàng)建maven項(xiàng)目時(shí)pom.xml沒有變藍(lán)的問題
這篇文章主要介紹了解決IDEA創(chuàng)建maven項(xiàng)目時(shí)pom.xml沒有變藍(lán)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
通過實(shí)例了解JavaBean開發(fā)及使用過程解析
這篇文章主要介紹了通過實(shí)例了解JavaBean開發(fā)及使用過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
Spring在多線程下@Resource注入為null的問題
這篇文章主要介紹了Spring在多線程下@Resource注入為null的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-02-02
SpringBoot yaml語法與數(shù)據(jù)讀取操作詳解
YAML 是 “YAML Ain’t Markup Language”（YAML 不是一種標(biāo)記語言）的遞歸縮寫。在開發(fā)的這種語言時(shí)，YAML 的意思其實(shí)是：“Yet Another Markup Language”（仍是一種標(biāo)記語言），本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-07-07
IDEA連接MySQL數(shù)據(jù)庫的4種方法圖文教程
IDEA是一種流行的Java開發(fā)工具,可以方便地連接MySQL,這篇文章主要給大家介紹了關(guān)于IDEA連接MySQL數(shù)據(jù)庫的4種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
fastjson全局日期序列化設(shè)置導(dǎo)致JSONField失效問題解決方案
這篇文章主要介紹了fastjson通過代碼指定全局序列化返回時(shí)間格式，導(dǎo)致使用JSONField注解標(biāo)注屬性的特殊日期返回格式失效問題的解決方案2023-01-01
學(xué)習(xí)java以來，都是以語法，類庫入手，最基本的也是最基礎(chǔ)的java編譯過程往往被我遺忘，先解釋一下學(xué)習(xí)java第一課時(shí)，都聽到過的一句話，“java是半解釋語言”。什么是半解釋語言。本文將介紹Java文件被執(zhí)行的歷程。2021-06-06