JQuery中dategrid编辑状态下的数据长度限制方法小结.docx

JQuery中dategrid编辑状态下的数据长度限制方法小结 作者：陈晓亚在JQuery的dategrid的使用中，往往会有业务逻辑要求在加载出来的dategrid中进行数据的编辑。这样就会使用到单行保存或者批量保存的技术。但是在此，先暂不讨论批量保存技术。由于存入数据库的数据都有一定的长度限制，如果超出限定的长度就会造成无法存入的情况，在SQL语句中会产生回滚。这样就不能正常操作了。所以在dategrid处在可以编辑的状态时，都要对每一列的长度进行适当的限制。下面就是几种长度限制的方法。一、当加载列的数据是数值类型int时。这个时候可以使用numberbox的内置方法进行长度的限制。 如图： 在field中，options：required:true,min:0,max:99999 就是把数值的范围限定在五位数以内，超出部分会在离开编辑行时自动默认为最大值99999。这样的一个方法比较的简单，但是在实际的运用中给客户的体验不是太好。如果项目要求不高的情况下，还是可以使用的。在此我不建议使用此种方法。二、当加载列的数据是字符串类型String 或者nvchar类型的时。这个时候使用的方法如图： 使用validType:length1,5 就是把字符串的长度限制在1到5的范围内，当在界面上输出超出长度部分时，就只能显示5位，超出部分会显示红色的提示符，在保存提交onsubmit的事件中使用 /* isSubmit = $(this).form(validate); /验证表单是否有 必须要填的选项if(!isSubmit) alertMsg(格式输入错误);return isSubmit; */这样的方法可以检测是否有不符合规范的数据填写。它能够使错误的数据不能够提交，必须是在正确长度范围内才可以进行提交保存。如下图界面的显示：这个界面就是第一和第二的两种情况的显示。这两种方法都能够解决阻止错误数据传入后台数据库，但是这样的页面显示效果并不是特别的好。客户体验就不好了。于是经过多次的改良有了以下的方法和显示。三、 dategrid编辑状态时长度限制的规范方法。我说的规范是界面上很规范，可是代码的编程就有点小麻烦了。首先设置参数，中间变量和判断值的参数。其次是给中间变量赋值。以年龄为例。在单击事件中给ExtraAge赋值获取当前点击行的年龄值。然后在onBefoeEdit事件中再把ExtraAge这个中间变量赋值给另外一个中间变量ExtraAge2。之所以这样做是因为在field的formatter方法中，当点击一行进行编辑后，再点击其他行的时候，上一行的中间变量值就会被新点击行的值所覆盖，从而产生了把新点击行的值赋值给上一行的情况。所以在onBefoeEdit事件中加入一个全新的中间变量，用于保存上一个点击行的值。而后就是十分关键的field里面使用formatter进行函数的调用，在函数里面写逻辑。下图是当输入数值大于120的时候，点击其他行或者保存后，会弹出提示框，当提示框关闭后，之前编辑行的数值会变成原来的值，不保存输入错误的数值。下图是当输入的数据是错误数据时，在onsubmit方法中做的一个判断，如果输入错误数据保存，会弹出提示框，并且保存是失败的。当然下图还少了段代码，就是在return 之