grid中有rowAttr属性：增加在行上属性的表达式，表达式执行结果返回Object，可以包含style、class属性，也可以增加自定义属性 可以在rowAttr中控制新增行的样式 在js中定义一个函数如下： Model.prototype.rowClass = function(row) { if (row.data.getRowState(row) == 'new') { return { style : 'background:LightGoldenrodYellow;' }; } } 然后在rowAttr属性中调用这个函数，要注意传参
一、修改widget标题的样式 /* 修改widget的title样式 */ .ibox-title{ color:white !important; background-color:#90EE90 !important; } 二、修改widget中显示内容的样式 /* 修改widget中的字体大小 */ .x-widgets .x-column{ font-size:12px; } 具体在什么地方写这些css，可以参考http://doc.wex5.com/?p=4827#2.3
可以在data组件的onRefreshCreateParam事件中可以给queryAction参数赋值 queryAction中的设置如下： 也可以直接在select的where部分定义参数 data的onRefreshCreateParam中传参如下： Model.prototype.bizData1RefreshCreateParam = function(event) { //给queryAction中的参数赋值 var mapParam = new biz.Request.MapParam(); mapParam.put("param1", "aaaa"); mapParam.put("param2", "test"); event.param.setMap("variables", mapParam); };
3.6之前的版本有缺陷不能用，需要在3.6以及之后的版本中使用 gridSelect提供了inputFilterable属性，设置后可以通过输入的数据对下拉区域中的数据进行过滤，但这个过滤模式值过滤当前加载的数据，不会过滤服务端的数据 可以在onOptionFilter事件实现服务端的过滤 把option中关联的data的autoLoad设置为false,把option中的autoLoad也设置为false，然后在onOptionFilter事件中实现option中关联的data的过滤 如： Model.prototype.gridSelect3OptionFilter = function(event) { var inputFilterValue = event.inputFilterValue;//获取到输入框中输入的值 var data = this.comp("bizData1"); if (inputFilterValue) { data.setFilter("gridSelectFilter", "AP_SZ.fName like '%" + inputFilterValue + "%'");//给data设置filter，过滤需要的数据 data.refreshData(); var rows = []; data.each(function(param) [...]
设置焦点 $(this.getElementByXid("fWB")).focus(); 设置允许输入的最大值 $(this.getElementByXid("fWB")).attr("maxlength",1); fWB是textarea组件的xid
模版向导生成弹出框编辑数据页面data设置必填规则点确定不起作用 设置data必填规则默认值执行data保存或者主动调用数据校验的时候会对数据进行校验 模版向导生成弹出框编辑数据页面的确定按钮不是执行的data保存，所以不会对数据进行校验，可以把确定按钮的代码如下修改： Model.prototype.okBtnClick = function(event) { var mainData = this.comp("dialogData"); var isValid = mainData.isValid(true);//判断data是否违反约束 if (!isValid) { throw new Error(mainData.getInvalidInfo(true));//获取data违反约束的信息,并抛出异常信息 } else{ this.comp("windowReceiver").windowEnsure(mainData.getCurrentRow()); } };
功能树选中、鼠标滑动和展开目录的背景控制 /* 鼠标移动到非一级目录(包括子级目录和功能)上时的背景样式 */ .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a{ background:#90EEEE !important; } /* 鼠标移动到一级目录上时的背景样式 */ .page-sidebar .page-sidebar-menu > li:hover > a{ background:mediumPurple !important; } /* 当前选中的功能的背景样式*/ .page-sidebar .page-sidebar-menu .sub-menu li.func-open > a{ [...]
grid中列内容多时默认是在一行显示的，不太美观 在grid上提供了onCellRender 单元格显示渲染事件，我们可以通过这个事件使内容换行显示，如下： 把具体的内容给div显示，在div中通过样式控制换行显示 Model.prototype.grid1CellRender = function(event) { if (event.colName == "fWB" && event.colVal != undefined) {//判断是不是需要换行显示的这列并且列是有值的 event.html = " <div style='word-wrap:break-word; white-space:normal;'>" + event.colVal + "</div> ";//在div中显示列的值event.colVal } };
动态创建select需要在V3.6以及之后的版本才可以用，V3.6之前的版本有缺陷不支持 在动态创建时要注意 1. bind-ref：直接用data的xid，不要用this.comp(‘data的xid’); 2. bind-options:直接用data的xid.datas 3. bind-optionsLabel和bind-optionsValue：直接设置bind-options关联data中的关系名 参考如下： 引用js文件var select = require("$UI/system/components/justep/select/select"); 动态创建 var parentNode = this.getElementByXid("content2"); var options = { parentNode : parentNode, xid : 'select1', class : "form-control x-edit", 'bind-ref' : [...]
某些情况下需要用键盘去操作组件中的切换，input组件可以直接在bind-keydown事件中处理，gridSelect没有这个事件需要自己绑定一个 gridSelect中组件里面其实用的是input，所有找到gridSelect中的input，给input绑上keydown事件就可以 如下,在gridSelect中回车切换把焦点到input中 var input = $(this.getElementByXid("input1")); $(this.getElementByXid("gridSelect2")).find("input").bind("keydown", function(event) { if (event.keyCode == 13) { input.focus(); } });