jQuery MiniUI

 找回密码
 立即注册
查看: 13424|回复: 7
打印 上一主题 下一主题

关于DataGrid编辑行验证的问题! [复制链接]

Rank: 3Rank: 3

跳转到指定楼层
楼主
发表于 2014-2-8 15:57:21 |只看该作者 |倒序浏览
本帖最后由 天狼 于 2014-2-8 16:02 编辑

关于DataGrid编辑行验证的问题官方给出的例子:http://www.miniui.com/demo/datagrid/cellvalidation.html
没有任何问题。
不知何故,我的代码始终无法验证通过,直接贴代码吧!
html代码:
                        <div id="dgExpenseDetail" class="mini-datagrid" style="width:100%;"
                                borderStyle="border:0px" idField="expenseDetailId"
                                allowResizeColumn="false" allowMoveColumn="false"
                                allowCellEdit="true" allowCellSelect="true" allowCellValid="true"
                                url="<s:url namespace="/expense" action="expenseDetailList" />"
                                    sizeList="[1,2,3,4,5,6]" pageIndex="1" pageSize="6"
                                    totalField="totalElements" dataField="pageList">
                                            <div property="columns">
                                                    <div type="checkcolumn"></div>
                                                        <div field="categroy.categroyId" displayField="categroy.name" vtype="required" width="20%" align="center" headerAlign="center" >部门
                                                <input property="editor" class="mini-combobox" style="width:100%;"
                                                    valueField="categroyId" textField="name"
                                                    url="<s:url namespace="/expense" action="categroyAll" />"/>               
                                            </div>
                                                <div field="amount" width="20%" align="center" dataType="currency" currencyUnit="¥" headerAlign="center">项目金额
                                                         <input property="editor" class="mini-textbox" style="width:100%;"/>
                                                </div>
                                                <div field="description" width="45%">费用说明
                                                         <input property="editor" class="mini-textbox" style="width:100%;"/>
                                                </div>
                                            </div>
                                </div>
                    </div>js代码:
                    var grid = mini.get("dgExpenseDetail");
                    grid.load({expenseId:1});
其中<s:url namespace="/expense" action="expenseDetailList" />返回的JSON为:
                    {
                                        "pageList":[
                                                            {"amount":2000.0,"categroy":{"categroyId":2,"name":"城际交通费"},"description":"222","expense":null,"expenseDetailId":1},
                                                            {"amount":1000.0,"categroy":{"categroyId":3,"name":"交际餐费"},"description":"111","expense":null,"expenseDetailId":2}
                                        ],
                                        "totalElements":2
                    }
UI效果为:
                    
当点击“增加”按钮执行代码为:
                //添加
                function addRow() {
                        var newRow = {};
                        grid.addRow(newRow, 0);
                        grid.validateRow(newRow);//加入新行,马上验证新行
                }

效果为:
                    
其中<s:url namespace="/expense" action="categroyAll" />返回的JSON为:
                    [
                                        {"categroyId":3,"name":"交际餐费"},
                                        {"categroyId":2,"name":"城际交通费"},
                                        {"categroyId":1,"name":"市内交通费"},
                                        {"categroyId":4,"name":"礼品费"}
                    ]
任意选择一项后,单击“保存”按钮执行代码为:
                //保存
                function saveData() {
                        grid.validate();
                        mini.alert(grid.isValid());

                }
问题来了,现在部门下拉列表无论是否选择,点击“保存”按钮,始终弹出false,何解啊?
附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 8Rank: 8

沙发
发表于 2014-2-8 16:36:07 |只看该作者
你保存的时候,写个grid.getChanges()
然后把changes弹出来,看下你修改的值,有没有存在于数据中了

Rank: 3Rank: 3

板凳
发表于 2014-2-8 17:01:50 |只看该作者
factory 发表于 2014-2-8 16:36
你保存的时候,写个grid.getChanges()
然后把changes弹出来,看下你修改的值,有没有存在于数据中了 ...

按您的说法修改测试代码为:
                //保存
                function saveData() {
                    grid.commitEdit();

                    var data = grid.getChanges();
                    var json = mini.encode(data);

                    mini.alert(json);

                }
打印数据为:
                
看上去也是正常的啊!
附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 8Rank: 8

地板
发表于 2014-2-8 17:18:42 |只看该作者
天狼 发表于 2014-2-8 17:01
按您的说法修改测试代码为:
                //保存
                function saveData() {

我们修复下

Rank: 3Rank: 3

5#
发表于 2014-2-8 17:23:27 |只看该作者
factory 发表于 2014-2-8 17:18
我们修复下

非常感谢,期待这个问题的解决!

Rank: 8Rank: 8

6#
发表于 2014-2-10 15:14:15 |只看该作者
天狼 发表于 2014-2-8 17:23
非常感谢,期待这个问题的解决!

已经修复,下载更新即可

Rank: 3Rank: 3

7#
发表于 2014-2-13 11:56:57 |只看该作者
本帖最后由 天狼 于 2014-2-13 12:07 编辑
factory 发表于 2014-2-10 15:14
已经修复,下载更新即可

谢谢!
更新后的确可以验证了,但是datagrid必须添加allowCellEdit="true" allowCellSelect="true",否则还是不能验证。可是添加这两个属性后,datagrid的所有单元格都可以编辑了,项目需求不希望这样。项目期望的效果是像http://www.miniui.com/demo/datagrid/celllinkedit2.html这样。同时需要对新添加的行做验证!
不知道官方是不是没有考虑这样的需求??!!!

即使在allowCellEdit="true" allowCellSelect="true"模式下能验证了,经测试
<div field="categroy.categroyId" displayField="categroy.name" vtype="required" requiredErrorText="类别不能为空" ...
中的requiredErrorText="类别不能为空"不生效,而自定义验证器的验证消息生效,但是生效后要鼠标悬停在变色的单元格上才能显示提示消息。如图:

要是能在单元格内的右边显示验证提示图片该多好!
附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 8Rank: 8

8#
发表于 2014-2-13 13:42:57 |只看该作者
天狼 发表于 2014-2-13 11:56
谢谢!
更新后的确可以验证了,但是datagrid必须添加allowCellEdit="true" allowCellSelect="true",否则 ...

1 不加allowCellEdit和allowCellSelect可以验证的
2 目前datagrid的验证是这样的,验证不通过表格背景色会变颜色,然后鼠标悬停的话出现提示信息

Archiver|普加软件

GMT+8, 2024-11-1 09:23 , Processed in 1.049150 second(s), 10 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部