miracle专题手册补充.docVIP

Grid组件 这个组件是经过精细优化，在速度上具有很大的优势，加载5000行数据只需要3秒，加载10000行数据只需要10秒。对比ExtJs Grid，后者虽然界面漂亮，但是下载体积和性能是其软肋。 功能介绍 Grid组件提供的功能有： 点击标题排序 定制列宽、是否显示 支持序号列 提供复选列 鼠标调整列宽 支持自定义行、列渲染器 grid生成原理 如下图所示，新创建的具体业务的list页面和list.js文件中是没有grid相关的代码的，但是启动tomcat之后可以在list页面查询得到该实体的数据展示列表，因此grid的实现不是在具体业务的list页面中完成的。 List.jsp页面 %@ page contentType=text/html;charset=UTF-8% %@ include file=/framework/include/taglibs.jsp% tiles:insert definition=crud.single.list flush=true tiles:put name=content.main value=/fldpdss/module/netline/struts/NetLineListContent.jsp / /tiles:insert ListContent.jsp页面 %@ page contentType=text/html;charset=UTF-8% %@ include file=/framework/include/taglibs.jsp% %@ include file=/framework/include/manager.jsp% %-- business logic --% script src=${root}/fldpdss/module/netline/struts/NetLineList.js/script miracle框架中list、edit、query页面相关的jsp和js模板文件都存放在目录WebContent\framework\layout\tiles\crud\single\中，这些模板文件包含了一些通用组件和js脚本，所有新建具体业务的页面都通过tiles引入了对应的模板文件，因此开发者只需要在这些模板的基础上扩展自己需要的功能。 Miracle中所有grid相关的代码和grid相关的样式都被封装在framework\script\webfx\columnlist\includes下的columnlist.js和columnlist.css文件中。 grid组件的实现被封装在list.js文件中；实现过程如下：首先声明一个grid变量var grid = new WebFXColumnList()，然后通过doInitGrid方法初始化该grid，接着是通过doRenderGrid方法对grid的渲染等工作（grid相关的js方法可以查看list.js文件）。开发者可以通过grid变量对list页面的grid组件进行相关操作。 grid页面代码分析 link href=/fldpdss/framework/script/webfx/columnlist/includes/columnlist.css rel=stylesheet / script src=/fldpdss/framework/script/webfx/columnlist/includes/columnlist.js/script 该部分用来引入columnlist相关的脚本和样式，只有引入了这两个文件grid才能正常的实现并显示。 var entityClass = com.jtv.fldpdss.module.netdepot.entity.NetDepot; var gridColumnName = [id,名称,x坐标,y坐标,整备能力,能否调头,是否本务段,所属机务段,所在站,用途]; var gridColumnId = [id,name,xpos,ypos,capacity,canturnover,isbasicdepot,depotgroupId,stationId2,use]; var gridColumnAlias = [id,name,xpos,ypos,capacity,canturnover,isbasicdepot,depotgroupId,stationId2,use]; var gridColumnWidth = [0,100,0,0,100,100,100,100,100,100]; var gridRowIdColumnId = [id]; var gridData = [ [8,牡丹江,,,,否,