ext树表+ZeroClipboard复制链接功能
效果图：
其中：前台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 += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="' + protocol + 'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="' + width + '" height="' + height + '" id="' + this.movieId + '" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="' + ZeroClipboard.moviePath + '" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="' + flashvars + '"/><param name="wmode" value="transparent"/></object>'; } else { html += '<embed id="' + this.movieId + '" src="' + ZeroClipboard.moviePath + '" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="' + width + '" height="' + height + '" name="' + this.movieId + '" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="' + flashvars + '" wmode="transparent" />'; } return html; },hide: function() { if (this.div) { this.div.style.left = '-2000px'; } },show: function() { this.reposition(); },destroy: function() { if (this.domElement && this.div) { this.hide(); this.div.innerHTML = ''; var body = document.getElementsByTagName('body')[0]; try { body.removeChild(this.div); } catch (e) { ; } this.domElement = null; this.div = null; } },reposition: function(elem) { if (elem) { this.domElement = ZeroClipboard.$(elem); if (!this.domElement) this.hide(); } if (this.domElement && this.div) { var box = ZeroClipboard.getDOMObjectPosition(this.domElement); var style = this.div.style; style.left = '' + box.left + 'px'; style.top = '' + box.top + 'px'; } },setText: function(newText) { this.clipText = newText; if (this.ready) this.movie.setText(newText); },addEventListener: function(eventName, func) { eventName = eventName.toString().toLowerCase().replace(/^on/, ''); if (!this.handlers[eventName]) this.handlers[eventName] = []; this.handlers[eventName].push(func); },setHandCursor: function(enabled) { this.handCursorEnabled = enabled; if (this.ready) this.movie.setHandCursor(enabled); },setCSSEffects: function(enabled) { this.cssEffects = !!enabled; },receiveEvent: function(eventName, args) { eventName = eventName.toString().toLowerCase().replace(/^on/, ''); switch (eventName) { case 'load': this.movie = document.getElementById(this.movieId); if (!this.movie) { var self = this; setTimeout(function() { self.receiveEvent('load', null); }, 1); return; } if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) { var self = this; setTimeout(function() { self.receiveEvent('load', null); }, 100); this.ready = true; return; } this.ready = true; this.movie.setText(this.clipText); this.movie.setHandCursor(this.handCursorEnabled); break; case 'mouseover': if (this.domElement && this.cssEffects) { this.domElement.addClass('hover'); if (this.recoverActive) this.domElement.addClass('active'); } break; case 'mouseout': if (this.domElement && this.cssEffects) { this.recoverActive = false; if (this.domElement.hasClass('active')) { this.domElement.removeClass('active'); this.recoverActive = true; } this.domElement.removeClass('hover'); } break; case 'mousedown': if (this.domElement && this.cssEffects) { this.domElement.addClass('active'); } break; case 'mouseup': if (this.domElement && this.cssEffects) { this.domElement.removeClass('active'); this.recoverActive = false; } break; } if (this.handlers[eventName]) { for (var idx = 0, len = this.handlers[eventName].length; idx < len; idx++) { var func = this.handlers[eventName][idx]; if (typeof (func) == 'function') { func(this, args); } else if ((typeof (func) == 'object') && (func.length == 2)) { func[0][func[1]](this, args); } else if (typeof (func) == 'string') { window[func](this, args); } } } }}; $(document).ready(function(){ $('#copyToBord').zclip({ path: "/courseware-tool/resources/js/ZeroClipboard.swf", copy: function(){ return $('#cwPath').val(); } }); $('#copy').zclip({ path: "/courseware-tool/resources/js/ZeroClipboard.swf", copy: function(){ return "111"; } }); }); function copyToBoard(obj,value){ var clip = new ZeroClipboard.Client(); clip.setHandCursor(true); clip.addEventListener('load', function(client) { }); clip.addEventListener('mouseOver', function(client) { client.setText(value); }); clip.addEventListener('mousedown', function(client) { // clip.addEventListener('mousedown', function(client) { // var _c_ode = client.movie.parentNode.parentNode.parentNode.parentNode.nextSibling.innerHTML; // _c_ode = _c_ode.replace(/</g, "<").replace(/>/g, ">").replace(/&/g, "&"); client.setText(value); }); clip.addEventListener('complete', function(client, text) { alert("代码已经复制到你的剪贴板。"); }); clip.glue(obj); }
上述，包含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('<div class="detailData">', '',
'</div>')
});
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 "<input type='button' value='复制链接' onclick='copyToBoard(this,\""+value+"\")' onmouseover='copyToBoard(this,\""+value+"\")'>";
}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); List<Sites> list = 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<CwInfo> 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<CwInfo> 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<CwInfo> 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<CwInfo> list = (List<CwInfo>) methodList.get(0); return list; }
