justep.Util.hint提示信息如何设置背景颜色

如果是单个的justep.Util.hint提示要控制样式可以在调用的设置style,如下: justep.Util.hint("提示信息", { "tyep" : "info", "delay" : 100000, "position" : "bottom", "style":"background-color:red !important;background-image:none!important;" }); 如果是所有的都控制,修改系统原来的样式可以定义公共CSS文件,在门户首页中引用这个CSS文件。例如在/UI2/portal/pc/index.w中引用,在CSS文件中重写x-hint样式如下: .x-hint{ background-color:red !important; background-image:none!important; }

orgDialog、orgDialogPC第二次打开页面的如何刷新数据,不显示第一次打开的数据

orgDialog和orgDialogPC组件都是用windowDialog组件实现的,windowDialog组件提供的forceRefreshOnOpen属性控制每次打开都刷新页面,所以orgDialog和orgDialogPC组件也可以通过forceRefreshOnOpen属性控制 具体如下: var orgDialogPC1 = this.comp("orgDialogPC1"); orgDialogPC1.set({forceRefreshOnOpen:true}); orgDialogPC1.open();

动态创建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 : [...]

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提供的有行展开(onExpandRow)事件,因此可以在这个事件中控制行选中,具体实现如下: 在gridSelect组件的onShowOption事件中实现监控onExpandRow事件 Model.prototype.orgSelectPC1ShowOption = function(event){ var gridselect = event.source;//获取gridselect组件 var grid = gridselect.grid;//获取gridSelect组件内部的grid var id = this.comp("mainData").getValue("fBMID");//获取当前行已经选择的数据(bind-ref关联的关系值) var column = gridselect.optionCfg.value;//获取option-value设置的关系 var valueSeparator = gridselect.valueSeparator;//获取多选值的分隔符 var data = this.comp("bizData1"); //获取option关联的data grid.on('onExpandRow', function(event) {//使用on方法添加onExpandRow事件 [...]

判断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" }); [...]