效果图：
其中：前台jsp如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> DOCTYPE html> <html lang="zh_CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>所有课程站点title> <script src="/courseware-tool/resources/extjs/yepnope.min.js" type="text/javascript">script> <script type="text/javascript" src="/library/js/jquery/jquery-1.9.1.min.js">script> <script type="text/javascript" src="/courseware-tool/resources/js/jquery.zclip.min.js">script> <script type="text/javascript" src="/courseware-tool/resources/js/coursewareSelectAllSites.js">script> <style> .cke { visibility: hidden; } style> <script type="text/javascript"> var ctx = "${pageContext.request.contextPath}"; //定义每页多少条 var toolId = "${toolId}"; //服务器地址 var ipAddress = "${ipAddress}"; var path = "/courseware-tool/resources/js/ZeroClipboard.swf"; /* var sizeLength = "${siteList.size()}"; if(sizeLength==''){ sizeLength=0; } sizeLength=26*sizeLength+12*16+"px;"; */ var sizeLength = "700px;"; sizeLength="height:"+sizeLength; parent.$('#Main${toolId}').attr('style',sizeLength); pagesize=eval('(${fields.pagesize==null?"{}":fields.pagesize})'); yepnope({ load:[ "/courseware-tool/resources/extjs/ext-all.css", "/courseware-tool/resources/extjs/gridStyle.css", "/courseware-tool/resources/extjs/ext-base.js", "/courseware-tool/resources/extjs/ext-all.js", "/courseware-tool/resources/extjs/ext-lang-zh_CN.js", "/courseware-tool/resources/css/screen.css", "/courseware-tool/resources/extjs/Ext.ux.override.js", "/courseware-tool/resources/extjs/share.js", "/courseware-tool/resources/extjs/shareux.js", "/courseware-tool/resources/extjs/RowExpander.js", "/courseware-tool/resources/extjs/treegrid/treegrid.css", "/courseware-tool/resources/extjs/treegrid/TreeGrid.js", "/courseware-tool/resources/extjs/treegrid/TreeGridColumnResizer.js", "/courseware-tool/resources/extjs/treegrid/TreeGridColumns.js", "/courseware-tool/resources/extjs/treegrid/TreeGridLoader.js", "/courseware-tool/resources/extjs/treegrid/TreeGridNodeUI.js", "/courseware-tool/resources/extjs/treegrid/TreeGridSorter.js", "/courseware-tool/resources/extjs/RowExpander.js", "/courseware-tool/resources/extjs/treegrid/CourseGridPanel.js", "/courseware-tool/resources/extjs/Course/CourseTreeGridPanel.js", "/courseware-tool/resources/extjs/treegrid/share.js" ], complete:function(){ var testGrid = new Ext.course.CourseGridPanel({ id: 'Course_panel', renderTo:'Course', height : '700' }); } }); script> head> <body> <div id="Course">div> body> html>
coursewareSelectAllSites.js如下：
var ZeroClipboard = {version: "1.0.7",clients: {},moviePath: '/courseware-tool/resources/js/ZeroClipboard.swf',nextId: 1,$: function(thingy) { if (typeof (thingy) == 'string') thingy = document.getElementById(thingy); if (true || !thingy.addClass) { thingy.hide = function() { this.style.display = 'none'; }; thingy.show = function() { this.style.display = ''; }; thingy.addClass = function(name) { this.removeClass(name); this.className += ' ' + name; }; thingy.removeClass = function(name) { var classes = this.className.split(/\s+/); var idx = -1; for (var k = 0; k < classes.length; k++) { if (classes[k] == name) { idx = k; k = classes.length; } } if (idx > -1) { classes.splice(idx, 1); this.className = classes.join(' '); } return this; }; thingy.hasClass = function(name) { return !!this.className.match(new RegExp("\\s*" + name + "\\s*")); }; } return thingy; },setMoviePath: function(path) { this.moviePath = path; },dispatch: function(id, eventName, args) { var client = this.clients[id]; if (client) { client.receiveEvent(eventName, args); } },register: function(id, client) { this.clients[id] = client; },getDOMObjectPosition: function(obj, stopObj) { var info = {left: 0,top: 0,width: obj.width ? obj.width : obj.offsetWidth,height: obj.height ? obj.height : obj.offsetHeight}; while (obj && (obj != stopObj)) { info.left += obj.offsetLeft; info.top += obj.offsetTop; obj = obj.offsetParent; } return info; },Client: function(elem) { this.handlers = {}; this.id = ZeroClipboard.nextId++; this.movieId = 'ZeroClipboardMovie_' + this.id; ZeroClipboard.register(this.id, this); if (elem) this.glue(elem); }}; ZeroClipboard.Client.prototype = {id: 0,ready: false,movie: null,clipText: '',handCursorEnabled: true,cssEffects: true,handlers: null,glue: function(elem, appendElem, stylesToAdd) { this.domElement = ZeroClipboard.$(elem); var zIndex = 99; if (this.domElement.style.zIndex) { zIndex = parseInt(this.domElement.style.zIndex, 10) + 1; } if (typeof (appendElem) == 'string') { appendElem = ZeroClipboard.$(appendElem); } else if (typeof (appendElem) == 'undefined') { appendElem = document.getElementsByTagName('body')[0]; } var box = ZeroClipboard.getDOMObjectPosition(this.domElement, appendElem); this.div = document.createElement('div'); var style = this.div.style; style.position = 'absolute'; style.left = '' + box.left + 'px'; style.top = '' + box.top + 'px'; style.width = '' + box.width + 'px'; style.height = '' + box.height + 'px'; style.zIndex = zIndex; if (typeof (stylesToAdd) == 'object') { for (addedStyle in stylesToAdd) { style[addedStyle] = stylesToAdd[addedStyle]; } } appendElem.appendChild(this.div); this.div.innerHTML = this.getHTML(box.width, box.height); },getHTML: function(width, height) { var html = ''; var flashvars = 'id=' + this.id + '&width=' + width + '&height=' + height; if (navigator.userAgent.match(/MSIE/)) { var protocol = location.href.match(/^https/i) ? 'https://' : 'http://'; html += ''; } else { html += '
上述，包含ZeroClipboard.js
CourseGridPanel.js
Ext.ns('Ext.course');
Ext.course.CourseGridPanel = Ext.extend(Ext.grid.EditorGridPanel, {
pageSize:20,
constructor : function(config) {
if (config == null) {
config = {}
}
Ext.apply(this, config);
this.expander = new Ext.grid.RowExpander({
expandOnDblClick:false,
tpl : new Ext.XTemplate('', '',
'')
});
this.pageSizeCombo = new Share.pageSizeCombo({
value : '20',
listeners : {
select : function(comboBox) {
this.pageSize = parseInt(comboBox.getValue());
this.bbar.pageSize = parseInt(comboBox.getValue());
this.store.baseParams.limit = this.pageSize;
this.store.baseParams.start = 0;
this.store.load();
},
scope:this
}
});
this.pageSize = parseInt(this.pageSizeCombo.getValue());
this.store = new Ext.data.JsonStore({
baseParams : {
start : 0,
limit : this.pageSize
},
proxy : new Ext.data.HttpProxy({// 获取数据的方式
method : 'POST',
url : ctx + '/cw/getAllSites.do'
}),
root : 'rows', // Json中的列表数据根节点
totalProperty : 'results',
fields : ['siteId', 'title', 'type',
'shortDesc', 'description', 'iconUrl']
});
/** 基本信息-选择模式 */
this.selModel = new Ext.grid.CheckboxSelectionModel({
listeners : {
'rowselect' : function(selectionModel, rowIndex, record) {
if(this.expander.state[record.siteId]){
var sonSm=Ext.getCmp(record.data.siteId).getSelectionModel();
if(!sonSm.hasSelection()){
sonSm.selectAll();
}
}else{
this.expander.expandRow(rowIndex);
}
},
'rowdeselect' : function(selectionModel, rowIndex,record) {
Ext.getCmp(record.data.siteId).getSelectionModel().clearSelections();
},
scope : this
}
});
this.colModel = new Ext.grid.ColumnModel([this.selModel, new Ext.grid.RowNumberer(),this.expander,{
header : '编号',
dataIndex : 'siteId',
hidden : true
}, {
header : '标题',
dataIndex : 'title',
width : 200
}, {
header : '类型',
dataIndex : 'type',
width : 200
}, {
header : '简短描述',
dataIndex : 'shortDesc',
width : 200
}, {
header : '描述',
dataIndex : 'description',
width : 650
}]);
this.data=[];
if (this.expander) {
this.expander.on("expand", function(expander, r, body, ri) {
if (Ext.DomQuery.select("div.x-panel-bwrap", body).length == 0) {
// var number = r.get("siteId");
var gridDetail = new Ext.course.CourseTreeGridPanel({
siteId:r.data.siteId
});
gridDetail.render(Ext.DomQuery.select("div.detailData",
body)[0]);
gridDetail.on("mouseover", function(e) {
e.stopPropagation();
});
gridDetail.on("mouseout", function(e) {
e.stopPropagation();
});
/*gridDetail.on("contextmenu", function(e) {
if (e && e.preventDefault()) {
e.preventDefault();
} else {
window.event.returnValue = false;
}
e.stopPropagation();
});*/
gridDetail.afterMethod("processEvent", function(n, e) {
e.stopPropagation();
});
}
}, this);
}
this.bbar = new Ext.PagingToolbar({
pageSize : this.pageSize,
store : this.store,
displayInfo : true,
items : ['-', ' ', this.pageSizeCombo]
});
Ext.course.CourseGridPanel.superclass.constructor.call(
this, {
sm : this.selModel,
cm : this.colModel,
store : this.store,
plugins: this.expander,
bbar : this.bbar,
loadMask : true,
viewConfig : {
forceFit : true,
enableRowBody : true,
getRowClass :function(record, rowIndex, p, ds) {
if(rowIndex%2==0){
return 'yellow-row';
}
return 'gray-row';
}
}
});
this.store.load();
}
});
CourseTreeGridPanel.js
Ext.ns("Ext.course");
Ext.course.CourseTreeGridPanel = Ext.extend(Ext.ux.tree.TreeGrid, {
// siteId:'0cec830b-1ff0-4620-bd9f-78438b8f3213',
siteId:null,
constructor : function(_config) {
Ext.apply(this, _config || {});
this.actionToolBar = new Ext.Toolbar({});
Ext.course.CourseTreeGridPanel.superclass.constructor.call(this, {
columns : [{
header : '课件名称',
dataIndex : 'cwName',
width : 200
}, {
header : '课件编号',
dataIndex : 'cwId',
width : 150
}, {
header : '课件路径',
dataIndex : 'cwPath',
width : 600,
renderer:function(value){
if(value&&value.toLocaleLowerCase().indexOf("http")==-1){
value = "http://" + ipAddress + ":8080"+ value;
}
return value;
}
},{
header : '操作',
dataIndex : 'cwPath',
width : 400,
renderer:function(value){
if(value){
if(value.toLocaleLowerCase().indexOf("http")==-1){
value = "http://" +ipAddress+":8080"+ value;
}
return "";
}else{
return "";
}
}
}],
dataUrl : ctx + '/cw/queryListForTree.do?siteId='+this.siteId,
/*loader: new Ext.tree.TreeLoader({
url : this.treeLoadUrl,
requestMethod : 'POST',
baseParams:{siteId:this.siteId}
}),*/
tbar : this.actionToolBar,
/* listeners : {
// 'click' : this.copyToBoard,
//// 'dblclick' : this.showDetailWindow,
scope : this
}*/
});
this.expandAll();
}
});
share.js
/** 每页显示条数下拉选择框 */ Share.pageSizeCombo = Ext.extend(Ext.form.ComboBox, { name : 'pagesize', triggerAction : 'all', mode : 'local', store : new Ext.data.ArrayStore({ fields : ['value', 'text'], data : [['5','每页5条'],['10','每页10条'],['20','每页20条'],['50','每页50条']] }), valueField : 'value', displayField : 'text', value : '10', editable : false, width : 85 });
controller:
@RequestMapping(value="/allSiteCourse",method=RequestMethod.GET) public String allSiteCourse(HttpServletRequest request){ String toolId = toolManager.getCurrentPlacement().getId(); if(StringUtils.isNotBlank(toolId)){ toolId = toolId.replaceAll("-", "x"); request.setAttribute("toolId", toolId); } Enumeration allNetInterfaces; try { allNetInterfaces = NetworkInterface.getNetworkInterfaces(); InetAddress ip = null; while (allNetInterfaces.hasMoreElements()) { NetworkInterface netInterface = (NetworkInterface) allNetInterfaces.nextElement(); System.out.println(netInterface.getName()); Enumeration addresses = netInterface.getInetAddresses(); while (addresses.hasMoreElements()) { ip = (InetAddress) addresses.nextElement(); if (ip != null && ip instanceof Inet4Address) { System.out.println("本机的IP = " + ip.getHostAddress()); request.setAttribute("ipAddress", ip.getHostAddress()); } } } } catch (SocketException e) { e.printStackTrace(); } return "/jsp/coursewareSelectAllSites"; } @RequestMapping(value="/getAllSites",method=RequestMethod.POST) @ResponseBody public ExtGridReturn getAllSites(Pager pager){ //查询数据库中所有的条数 int result = cwInfoService.queryAllSitesCount(); //设置分页 pager = cwInfoService.setPage(pager, result); Listlist = cwInfoService.queryAllSites(pager); return new ExtGridReturn(result, list); } /** * 描述：进入课程管理主页的方法,并且在进入主页前判断出此用户在此站点是否有某一权限 * @param request 存储变量 * @param isHidden 是否是隐藏状态 0隐藏 1显示 * @param array 接收前台页面传进来的处于折叠状态的文件id * @return 进入课程管理主页面的jsp路径 */ @RequestMapping(value = "/queryListForTree", method = RequestMethod.POST) @ResponseBody public List queryListForTree(Sites sites) { sites = cwInfoService.findSiteBySiteId(sites.getSiteId()); //根据siteId和siteTitle查询toolId //根据课程学习xml唯一的标识进行查询toolId String toolId = cwInfoService.findToolIdByPage("sakai.courseware", sites.getSiteId()); CwInfo cwInfo = new CwInfo(); cwInfo.setToolId(toolId); List list = cwInfoService.queryAllCwInfo(cwInfo); return list; } /** * 描述：进入课程管理主页的方法,并且在进入主页前判断出此用户在此站点是否有某一权限 json形式 * @param request 存储变量 * @param isHidden 是否是隐藏状态 0隐藏 1显示 * @param array 接收前台页面传进来的处于折叠状态的文件id * @return 进入课程管理主页面的jsp路径 */ @RequestMapping(value="/getSiteCourse",method=RequestMethod.POST) @ResponseBody public List getSiteCourse(CwInfo cwInfo,HttpServletRequest request,Sites sites, @RequestParam(required=false) String[] array,@RequestParam(required=false) Object temp){ //根据siteId查询当前站点的左右信息就 sites = cwInfoService.findSiteBySiteId(sites.getSiteId()); //根据siteId和siteTitle查询toolId //每次页面刷新都需要绑定位置(位置=站点标题+工具标题) String toolTitle = toolManager.getCurrentTool().getTitle();//cwInfoService.queryToolTitle(toolId); //根据课程学习xml唯一的标识进行查询toolId String toolId = cwInfoService.findToolIdByPage("sakai.courseware", sites.getSiteId()); if(StringUtils.isBlank(toolId)){ request.setAttribute("noCourse","当前站点没有课件！"); return null; } cwInfo.setToolId(toolId); //sortAll方法的返回是包含带有层级的课程list集合，和页面处于折叠状态文件的id数组 List methodList = cwInfoService.sortAll(cwInfo,array); //从sortAll方法返回值里取出带有层级的课程list集合，并返回页面 List list = (List ) methodList.get(0); return list; }