jQuery MiniUI

标题: 关于DataGrid编辑行验证的问题！ [打印本页]

作者: 天狼 时间: 2014-2-8 15:57:21 标题: 关于DataGrid编辑行验证的问题！

本帖最后由天狼于 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效果为：
                  [attach]3870[/attach]
当点击“增加”按钮执行代码为：
            //添加
            function addRow() {
                     var newRow = {};
                     grid.addRow(newRow, 0);
                     grid.validateRow(newRow);//加入新行，马上验证新行
            }

效果为:
                  [attach]3867[/attach]
其中<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，何解啊？

作者: factory 时间: 2014-2-8 16:36:07

你保存的时候,写个grid.getChanges()
然后把changes弹出来,看下你修改的值,有没有存在于数据中了

作者: 天狼 时间: 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);

         }
打印数据为：
         [attach]3871[/attach]
看上去也是正常的啊！

作者: factory 时间: 2014-2-8 17:18:42

天狼发表于 2014-2-8 17:01
按您的说法修改测试代码为：
//保存
function saveData() {

我们修复下

作者: 天狼 时间: 2014-2-8 17:23:27

factory 发表于 2014-2-8 17:18
我们修复下

非常感谢，期待这个问题的解决！

作者: factory 时间: 2014-2-10 15:14:15

天狼发表于 2014-2-8 17:23
非常感谢，期待这个问题的解决！

已经修复,下载更新即可

作者: 天狼 时间: 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="类别不能为空"不生效，而自定义验证器的验证消息生效，但是生效后要鼠标悬停在变色的单元格上才能显示提示消息。如图：
[attach]3904[/attach]
要是能在单元格内的右边显示验证提示图片该多好！

作者: felt 时间: 2014-2-13 13:42:57

天狼发表于 2014-2-13 11:56
谢谢！
更新后的确可以验证了，但是datagrid必须添加allowCellEdit="true" allowCellSelect="true"，否则 ...

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

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)