zoukankan      html  css  js  c++  java
  • easyui-combogrid必填为空时无法通过表单验证的问题

    在使用easyui-combogrid时,由于html解析出的格式是如下三层:

    <td>
    <input id="txcombo" class="easyui-combogrid combogrid-f combo-f" value="" style=" 200px; height: 28px; display: none;" comboname="tx">

    <span class="combo" style=" 198px; height: 26px;">

    <input type="text" class="combo-text validatebox-text validatebox-invalid" autocomplete="off" readonly="readonly" title="" style="cursor: pointer; 176px; height: 26px; line-height: 26px;">

    <span>

    <span class="combo-arrow" style="height: 26px;">

    </span>

    </span>

    <input type="hidden" class="combo-value" name="tx" value=""></span>

    </td>

    注意到最外层的display:none,所以直接在样式中添加required="required"是不起作用的娥,而真正提交的input却是hidden。

    第一层是一个display:none的下拉数据表格框;

    第二层是一个validate-box,验证框;

    第三层是一个显示属性为hidden,隐藏的文本框。

    选择一项下拉值后发现,第一层的value,值为空,第三层的文本框值却不为空。那么问题就出现在第一层,因为它自动解析了一个display:none,同时我又在页面添加了必填属性,required:true,但是它又没有拿到值,所以就是那个报错的原因:一个隐藏的必填项为空。

    前台html代码是自动解析的,无法更改,也就意味着无法去掉display:none属性,那么只能去掉必填属性,required:true.但是需求中又明确要求必填,那么只能在js中试试,是否能够识别必填属性:

    /*********下拉数据表格*******/
    $('#tx').combogrid({
    panelWidth: 700,
    panelHeight:500,
    idField: 'value',
    textField: 'value',
    url:'getTx.do',
    method: 'post',
    fit: false,
    fitColumns: false,
    required: true,
    editable:false,
    columns: [[
    {field:'value',title:'value'},
    {field:'note',title:'note',align:'left'}
    ]],

    onLoadSuccess:function(){ //修改页加载表格数据
    $('#tx').combogrid('setValue', '${dto.tx}');
    }
    }

    });

    测试发现,无论是否有值,都会提示必填。这说明必填属性起作用了,但是这个框没有拿到值。那么此时的隐藏项就只剩下最后一层了,那个type=”hidden”的文本框,这样问题就简单多了,在下拉框选中值之后,将下拉框的值手动赋给这个文本框:

    /*********下拉数据表格*******/
    $('#tx').combogrid({
    panelWidth: 700,
    panelHeight:500,
    idField: 'value',
    textField: 'value',
    url:'getTx.do',
    method: 'post',
    fit: false,
    fitColumns: false,
    required: true,
    editable:false,
    columns: [[
    {field:'value',title:'value'},
    {field:'note',title:'note',align:'left'}
    ]],

    onLoadSuccess:function(){ //修改页加载表格数据
    $('#tx').combogrid('setValue', '${dto.tx}');
    },

    onClickRow:function(index,row){ 
    $('#tx').val(row.value); //下拉数据表格的第一层的input框赋值,否则不能作为必填项提交
    }
    }

    });

    注意到此处的方法onClickRow:function(index,row)是数据表格的方法,那么easyui-combogrid继承自easyui-datagrid和easyui-combo,它同时也继承了datagrid和combo的方法,所以此处可以直接用。

  • 相关阅读:
    Go-day01
    M1-Flask-Day2
    M1-Flask-Day1
    Tornado基于MiddleWare做中间件
    SqlAlchenmy基本使用
    PV、UV、UIP、VV、CPC、CPM、RPM、CTR解释
    Celery笔记
    Celery 分布式任务队列快速入门
    库操作
    Django cache
  • 原文地址:https://www.cnblogs.com/tulpen/p/5078679.html
Copyright © 2011-2022 走看看