动态创建grid设置多层表头

grid的多表头是通过groupHeaders节点控制的,因此可以在动态创建的时候设置groupHeaders的配置,如下: //引用grid.js var Grid = require("$UI/system/components/justep/grid/grid"); Model.prototype.button5Click = function(event) { var parentNode = this.getElementByXid("content2"); var option = { parentNode : parentNode, // grid的属性,设计时有的属性都可以设置 xid : "gridMain", data : "data1", width : '100%', height : [...]

justep.Shell.showPage打开页面如何跳转到指定的contents页

justep.Shell.showPage有then(),可以在then中实现,如下 justep.Shell.showPage("main").then(function(data){ data.container.getInnerModel().comp("contents").to("XXX"); }) contents是contents组件的xid XXX就是要跳转的contents的指定content页的xid

gridSelect修改下拉区域的行高

gridSelect的下拉区域其实就是grid,因此可以用grid行高的方式设置rowAttr实现 在gridSelect的onShowOption事件中如下实现: Model.prototype.orgSelectPC1ShowOption = function(event) { var grid = event.source.grid; //获取下拉区域生产的grid grid.rowAttr = "{style:'height:50px;background:yellow;'}";//设置grid的rowAttr grid.refresh(); }; 需要注意的时,如果gridSelect设置了selectFilter,上面的方案是不起作用的,需要通过样式来控制,如下 在css文件中定义一个class .grdSelect{ height: 50px !important; } 在gridSelect的onShowOption事件中如下设置: Model.prototype.orgSelectPC1ShowOption = function(event) { event.source.grid.$domNode.find(".x-row-ltr").addClass("grdSelect"); }; [...]

gridSelect树形下拉设置级联勾选

平台默认的在grid组件上提供的有级联(选择父时子也会被选中)选择的属性,因此gridselect的级联勾选可以通过这个属性实现 如下:在gridSelect组件的onShowOption事件中实现 Model.prototype.orgSelectPC1ShowOption = function(event) { event.source.grid.setGridParam({"cascade":true}); };

js中设置image或者iframe的src

image和iframe就是html的组件,设置src时可以通过jquery的方式设置 如下: $(this.getElementByXid("iframe1")).attr("src",url); $(this.getElementByXid("image2")).attr("src", url);

判断accordion是展开还是收缩状态

accordion组件点击heading部分可以控制accordion展开或收缩状态 展开或收缩状态是通过给组件设置不同的class样式控制的,因此要判断状态可以通过判断class样式实现 如下: $(this.getElementByXid("accordion")).find(".panel-collapse").hasClass("in"); 返回true是展开,false是收缩 accordion1是accordion组件的xid

如何用jquery的swiper插件实现上下轮播

平台默认提供的轮播组件是bootstrap的carousel,这个组件是左右轮播的,没有上下轮播的设置 如果需要上下轮播可以集成jquery的swiper插件实现 集成jquery插件的时需要注意插件用的jquery的版本,平台默认带的是1.11.1版本的,如果不是这个版本可能会有冲突 经测试swiper3可以在.w中直接集成,swiper4用的jquery的版本比平台默认的高不能直接集成需要用iframe嵌入html的方式实现 本例用的是swiper3, 1.下载swiper,解压到自己UI2相关目录 2.在自己的.w中引用1中解压的的swiper.min.js和swiper.min.css 如下: require("$UI/appdemo/swiper/swiper3/swiper.min"); require("css!$UI/appdemo/swiper/swiper3/swiper.min").load(); 3.在.w同名的css文件中添加如下样式 .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; [...]

importExcel组件如何控制只能选择excel文件

importExcel组件导入的时候需要选择excel文件,目前默认的在导入的时候没有控制只能选择excel文件 可以参考下面两种方案进行控制 方案一.修改/UI2/system/components/justep/excel/importExcel.js中createUploader方法的实现 在new Uploader的参数中加上accept属性的设置,控制上传类型。这个方案是弹出的选择文件框中只能选择xls或xlsx后缀的文件 如下: _createUploader : function(domNode) { this.uploader = new Uploader(domNode, { actionUrl : uploadURL, autoUpload: false, requestHeader : { Accept : 'application/json' }, name : 'excel', accept : "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); [...]

grid点击用gridSelect下拉的列时设置焦点在gridSelect中并显示下拉

在grid中放可编辑组件gridSelect时,平台默认的需点击两次才可以把焦点定位到gridSelect中并显示下拉 可以参考下面的方案实现点击一次就定位到gridSelect中并显示下拉 grid点击会触发onRowClick事件,可以先判断点击的是不是gridSelect所在的列,然后操作gridSelect,具体如下: Model.prototype.mainGridRowClick = function(event){ var grid = event.source; var rowID = event.rowID; var td = event.domEvent.target;//获取触发事件的dom节点 if(td.tagName.toUpperCase()!='TD') {//当grid的列中放了input等组件时,获取的当前元素不是td td = $(td).closest('td')[0];//获取到对应td } var index = $.jgrid.getCellIndex(td);//获取列索引 var colDef = event.source.getColDef(index);//获取列定义 var gridselect [...]

grid中用gridSelect实现存储ID显示名称

数据库中存的是数字,grid中用gridSelect下拉显示名称可以参考下面的方案 案例一:queryAction中用case when实现,fSex中存储0或1显示男或女 1.queryAction中select中添加自定义字段custom3设置case when select AP_CBM.*,(case when AP_CBM.fSex ='0' then '男' when AP_CBM.fSex ='1' then '女' else '' end) as custom3 from AP_CBM AP_CBM 2.grid的column(列)中添加custom3,不需要添加fSex 3.在custom3列中放gridSelect进行设置,bind-ref设置为fSex,bind-labelRef设置为custom3, option下相关属性的设置 data:要下拉的数据来源 value:下拉的数据来源的ID列 label:下拉数据的数据来源的name列 案例二:queryAction中有关联查询实现,fCreator中存储人员ID显示人员名称 1.queryAction中关联查询SA_OPPerson中的数据返回人员名称sName [...]