jQuery MiniUI

标题: DataGrid cell 驗證失敗後回到當前的cell 繼續編輯 [打印本页]

作者: karen 时间: 2015-6-18 18:00:29 标题: DataGrid cell 驗證失敗後回到當前的cell 繼續編輯

這個DataGird 的 Amount 設定了onblur 事件, 去檢查當前輸入的Amount格式是否正確

驗證失敗後, 會彈警告視窗, 但是我想讓游標回到當前的cell 讓user 修正到正確的格式為止, 該怎麼做比較好呢 ?

[attach]6269[/attach]

作者: dforce 时间: 2015-6-19 10:27:05

用表格的验证，不要在编辑器上绑onblur处理了
在oncellendedit事件里面
获取到验证未通过的单元格，再次定位进去编辑

作者: karen 时间: 2015-6-22 16:22:22

本帖最后由 karen 于 2015-6-22 16:26 编辑

dforce 发表于 2015-6-19 10:27
用表格的验证，不要在编辑器上绑onblur处理了
在oncellendedit事件里面
获取到验证未通过的单元格，再次定 ...

用以下方式會不斷地跳出 "Amount is null" 視窗,雖然Cell為編輯狀態, 因alert視窗一直反覆地跳出來, 反而無法編輯, 要如何調整?

function onCellEndEdit(e) {
      if (e.field == "Amount") {
         if (e.value == "") {
            alert("Amount is null!");
            grdItem.beginEditCell();
         }
      }
}

作者: felt 时间: 2015-6-23 09:45:06

karen 发表于 2015-6-22 16:22
用以下方式會不斷地跳出 "Amount is null" 視窗,雖然Cell為編輯狀態, 因alert視窗一直反覆地跳出來, 反而 ...

未发现问题，请提供示例重现

作者: karen 时间: 2015-6-23 10:53:52

Steps :
1, 輸入description 欄
2, 點Amount欄, 不輸入任何東西
3, 點Comments 欄
然後 Amount is null 視窗一直跳出, 關不掉

Table 如下
<table class="myTable" style="width: 100%;">
      <tr>
         <td>
            <div id="grdItembutton" class="mini-toolbar" style="border-bottom: 0; padding: 5px;">
                  <a class="mini-button" iconcls="icon-add" onclick="addRow()" plain="true" tooltip="增加...">new</a>
                  <a class="mini-button" iconcls="icon-remove" onclick="removeRow()" plain="true">delete</a>
            </div>
            <div id="grdItem" class="mini-datagrid" style="width: 100%; height: 120px;"
                  idfield="itemno"
                  allowresize="true" pagesize="5"
                  allowcelledit="true" allowcellselect="true" multiselect="true"
                  editnextonenterkey="true" showpager="false"
                  onCellEndEdit="onCellEndEdit" >
                  <div property="columns">
                     <div type="checkcolumn"></div>

                     <div name="ItemDesc" field="ItemDesc" headeralign="center" width="100">
                        description
                        <input property="editor" class="mini-textbox" style="width: 100%;" value="" required="true" />
                     </div>
                     <div name="Amount" field="Amount" headeralign="center"  numberFormat="#,0.00" align="right" width="100" >
                        amount
                        <input property="editor" class="mini-textbox" style="width: 100%;"  required="true" vtype="int" />
                     </div>
                     <div name="Remark" field="Remark" width="200" headeralign="center">
                        comments
                        <input id="Remark" property="editor" class="mini-textbox" style="width: 100%;" />
                     </div>
                  </div>
            </div>
         </td>
      </tr>
</table>

JS 如下
<script type="text/javascript">
      mini.parse();
      var grdItem = mini.get("grdItem");

      //grditem add new row
      function addRow() {
            var newRow = { name: "New Row" };
            grdItem.addRow(newRow);
            grdItem.beginEditCell(newRow, "ItemDesc");
      }
      //grditme remove row
      function removeRow() {
         var rows = grdItem.getSelecteds();
         if (rows.length > 0) {
            grdItem.removeRows(rows, true);
         }
      }

      function onCellEndEdit(e) {
         if (e.field == "Amount") {
            if (e.value == null) {
                  alert("Amount is null!");
                  grdItem.beginEditCell();
            }
         }
      }
</script>

作者: felt 时间: 2015-6-23 11:05:11

karen 发表于 2015-6-23 10:53
Steps :
1, 輸入description 欄
2, 點Amount欄, 不輸入任何東西

setTimeout(function () {
var cell = [e.row, e.column]
grdItem.setCurrentCell(cell)
grdItem.beginEditCell();
},100)

复制代码

作者: karen 时间: 2015-6-23 11:41:07

felt 发表于 2015-6-23 11:05

可以了, 不過訊息視窗會跳出二個 ?

作者: felt 时间: 2015-6-23 13:24:58

karen 发表于 2015-6-23 11:41
可以了, 不過訊息視窗會跳出二個 ?

本地测试未发现弹2次

作者: karen 时间: 2015-6-23 15:57:52

felt 发表于 2015-6-23 13:24
本地测试未发现弹2次

我發現點完一個alert 視窗, comments會變編輯狀態, 再點掉第二個alert視窗, 游標跳回 Amount 編輯
稍微調整後, 就只剩下一個alert視窗了

作者: felt 时间: 2015-6-23 16:25:47

karen 发表于 2015-6-23 15:57
我發現點完一個alert 視窗, comments會變編輯狀態, 再點掉第二個alert視窗, 游標跳回 Amount 編輯
稍微調 ...

因为是通过控制光标来实现你说的功能
本身按回车后是会自动进去下一个单元格，上面的代码是强制跳回去，如果你下一个单元格有弹出什么的，也会执行到

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