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; }