最近在做的一个项目,用到了mini-ui,之前只是听说过没咋用过,没办法项目来了,现学现用吧!
一直都参考着API挺顺利的,但是在一个场合发生了个奇怪的问题,值得深究。
看如下界面:
<tr>
<span style="white-space:pre"> </span><th><label for="zycd">负责人:</label></th>
<td><input style="width:98%" id="simpleAssignment" name="monitorUid" class="mini-combobox"
textField="text" valueField="id" showNullItem="true" onvaluechanged="setAssignment"
url="/Domain/DynamicAjax.do?serviceUrl=pmbase_ProjectServiceImpl/getProjectMembers/$pid"/>
</td>
</tr>
<tr style="display:true" >
<td width="10%">
<label>参与人<font color="red">*</font>:</label><br>
<a class="mini-button" iconCls="icon-add" οnclick="addRow('Assignment')" plain="true">增加</a>
<a class="mini-button" iconCls="icon-remove" οnclick="removeRow('Assignment')" plain="true">删除</a>
</td>
<td colspan="3" width="80%">
<div id="Assignment" name="Assignment" class="mini-datagrid" style="width:99%;height:200px" idField="id"
allowResize="false" allowCellEdit="true" allowCellSelect="true" multiSelect="false" pageSize="20" showFooter="false"
oncellendedit="assignmentEndEdit" oncellcommitedit="assignmentEndEdit" >
<div property="columns">
<div field="assignmentUid" name ="assignmentUid" vtype="require" type="comboboxcolumn" headerAlign="center" allowSort="false">资源
<input property="editor" class="mini-combobox" style="width:100%;"
url="/Domain/DynamicAjax.do?serviceUrl=pmbase_ProjectServiceImpl/getProjectMembers/$pid" />
</div>
<div field="units" vtype="require" allowSort="true" >工作量(工时)
<input property="editor" class="mini-spinner" minValue="1" maxValue="10000" style="width:100%;" />
</div>
<div field="assignmentNotes" headerAlign="center" allowSort="false">任务描述
<input property="editor" class="mini-textarea" style="width:100%;" minHeight="120"/>
</div>
<div field="isfzr" id="isfzr" type="checkboxcolumn" headerAlign="center" >负责人
</div>
</div>
</div>
</td>
</tr>
Name | EventObject | Description |
---|---|---|
columnschanged | 列改变时激发。如列显示/隐藏、列宽调整、列增加/删除等情况。 | |
rowclick | { sender: Object, //表格对象 record: Object //行对象 } | 行点击时发生 |
rowdblclick | { sender: Object, //表格对象 record: Object //行对象 } | 行双击时发生 |
rowmousedown | { sender: Object, //表格对象 record: Object //行对象 } | 行鼠标按下时发生 |
cellclick | { sender: Object, //表格对象 record: Object, //行对象 column: Object //列对象 } | 单元格点击时发生 |
cellmousedown | { sender: Object, //表格对象 record: Object, //行对象 column: Object //列对象 } | 单元格鼠标按下时发生 |
headercellclick | { sender: Object, //表格对象 column: Object //列对象 } | 表头单元格点击时发生 |
headercellmousedown | { sender: Object, //表格对象 column: Object //列对象 } | 表头单元格鼠标按下时发生 |
headercellcontextmenu | { sender: Object, //表格对象 column: Object //列对象 } | 表头单元格点击右键时发生 |
beforeload | { sender: Object, //表格对象 data: Object //参数对象 cancel: Boolean } | 数据加载前发生 |
preload | 数据加载,设置到Grid前发生 | |
loaderror | { sender: Object, //表格对象 xhr: Object, //ajax对象 errorMsg: String //错误信息 errorCode: int //错误码 } | 数据加载错误时发生 |
load | { sender: Object, //表格对象 xhr: Object, //ajax对象 data: Array //数据 } | 数据加载成功时发生 |
update | 表格渲染完毕事件 | |
drawcell | { sender: Object, rowIndex: Number, columnIndex: Number, record: Object, column: Object, field: String, value: String, cellHtml: "", rowCls: "", cellCls: "", rowStyle: "", cellStyle: "" } | 绘制单元格时发生 |
cellbeginedit | { sender: Object, rowIndex: Number, record: Object, column: Object, field: String, editor: Object, value: String, cancel: false } | 编辑开始前发生 |
cellcommitedit | { sender: Object, rowIndex: Number, record: Object, column: Object, field: String, editor: Object, oldValue: Object, value: Object, cancel: false } | 编辑值提交前发生 |
cellendedit | { sender: Object, rowIndex: Number, record: Object, column: Object, field: String, editor: Object, value: String } | 编辑结束时发生 |
celleditenter | { sender: Object, record: Object } | 编辑器按回车时发生 |
selectionchanged | 行选择改变时发生 | |
beforeselect | { sender: Object, record: Object, cancel: Boolean } | 行选中前发生 |
beforedeselect | { sender: Object, record: Object, cancel: Boolean } | 行取消选中前发生 |
select | { sender: Object, record: Object } | 行选中时发生 |
deselect | { sender: Object, record: Object } | 行取消选中时发生 |
cellvalidation | { sender: Object, record: Object, column: Object, field: String, value: String, isValid: Boolean, //是否验证通过 errorText: "" //错误提示文本 } | 单元格验证时发生(一般在单元格编辑结束时) |
drawsummarycell | { sender: Object, result: Object, //服务端返回的原始数据对象 records: Array, //行数组 column: Object, field: String, value: String, cellHtml: "", cellCls: "", cellStyle: "" } | 绘制汇总单元格事件 |
resize | 表格拖拽调节尺寸时发生 |
只有cellcommitedit,cellmousedown仅仅几个可以监听到checkboxcolumn的点击修改。
在处理这个列表时,由于需求是选择了负责人,上面的负责人进行联动改变,起初采用了var data = mini.get('Assignment').data;方法来获取列表的现在值,但有个问题,是这个方法获取到的永远都是点击按钮之前的列表值,并不能实时的获取到点击后列表的值。于是在朋友的帮助下,小弟可算找到方法,既可以点击监听又可以联动改变的方法。
assignmentEndEdit = function(e) {
var grid = mini.get('Assignment');
if(e.field == 'isfzr'){
var fuzerenId;
if(e.value){
mini.get("simpleAssignment").setValue(e.row.assignmentUid);
}
}
}
看来,js中e的妙用还是需要你我来共同掌握的呀!