关于mini-ui的checkboxcolumn的Bug

来源：互联网发布：sql附加数据库失败编辑：程序博客网时间：2024/06/05 19:37

最近在做的一个项目，用到了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" onclick="addRow('Assignment')" plain="true">增加</a><a class="mini-button" iconCls="icon-remove" onclick="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>

关于这个mini-datagrid，其中有两个监听编辑器修改的事件，oncellendedit和oncellcommitedit但是都指向的是同一个方法，这是小弟最后被迫做出的的决定，因为miniui的oncellendedit对下面的负责人选项，即type为checkboxcolumn的点击事件并不监听，它应该是只监听了上面的的类文本框的编辑和修改，之后小弟使用了miniui官方api中的各种监听事件，比如（下表来源于miniui官网）：

NameEventObjectDescriptioncolumnschanged 列改变时激发。如列显示/隐藏、列宽调整、列增加/删除等情况。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 表格拖拽调节尺寸时发生表网址：http://www.miniui.com/docs/api/index.html#ui=datagrid

只有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的妙用还是需要你我来共同掌握的呀！

0 0