关于LigerUI表单元素的动态替换

最新推荐文章于 2017-11-02 19:01:35 发布

oqqBOSS123456

最新推荐文章于 2017-11-02 19:01:35 发布

阅读量3k

点赞数

分类专栏： ligerUI 文章标签： ligerUI 表单

本文链接：https://blog.csdn.net/oqqBOSS123456/article/details/49228047

版权

ligerUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：是根据表单的一个元素输入的文本值之后，动态变换表单中另一个元素的类型，比如从初始化的文本框变成下拉框。
实现过程分析：为表单的文本框绑定事件，在该文本框失去焦点时为表单的fields属性通过set方法重新设置内容即可。
下面是ligerUI的一个表单的DEMO，直接做了修改贴出来可以参考参考。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
    <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 
    <link href="../../lib/ligerUI/skins/Tab/css/form.css" rel="stylesheet" type="text/css" /> 
    <script src="../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
     <script src="../../lib/ligerUI/js/ligerui.all.js" type="text/javascript"></script>  
    <script src="../../grid/CustomersData.js"></script>


   <script src="../../lib/jquery-validation/jquery.validate.min.js"></script>
    <script src="../../lib/jquery-validation/jquery.metadata.js" type="text/javascript"></script>
    <script src="../../lib/jquery-validation/messages_cn.js" type="text/javascript"></script>

    <script type="text/javascript">
        var groupicon = "";
        var form;
        var area_data = [
            { id: '11', value: '11', text: '北京市' },
            { id: '22', value: '22', text: '广州市' },
            { id: '33', value: '33', text: '苏州市' },
            { id: '44', value: '44', text: '杜洲市' }
        ];
        $(function ()
        {
            //创建表单结构 
            form = $("#form2").ligerForm({
                inputWidth: 170, labelWidth: 90, space: 40,

                fields: [
                { name: "ProductID", type: "hidden" },
                {display:'hahah',name:'test',type:'text',nullText:'hhhhhhh'},
                { display: "日期 ", name: "AddTime", newline: true, type: "date", validate: { required: true, minlength: 5 } },
                { display: "折扣", name: "QuantityPerUnit", newline: true, type: "number", validate: { required: true, minlength: 5 } },
                { display: "单价", name: "UnitPrice", newline: true, type: "number",editor:{readonly:true}, validate: { required: true, minlength: 5 } },
                { display: "库存量", name: "UnitsInStock", newline: true, type: "digits", group: "库存", groupicon: groupicon },
                { display: "订购量", name: "UnitsOnOrder", newline: true, type: "digits" },
                { display: "采购量", name: "UnitsOnOrder2", newline: true, type: "spinner" },
                 { display: "选择公司", name: "Company", newline: true, type: "popup" },
              { display: "地区", name: "Area", newline: false, type: "select", editor: {data:area_data} },
                { display: "备注", name: "Remark", newline: true, type: "text", width: 470, validate: { required: true, minlength: 5 } },
                { display: "备注", name: "Remark", newline: true, type: "text", width: 470 }
                ]
            });
//通过set方法实现表单的某些字段的动态替换，原理是重新给表单设置fields属性值。
        //  $(document.getElementsByName("test")).blur(function(){
            liger.get("test").bind('blur',function(){
                form.set('fields',
                [
                { name: "ProductID", type: "hidden" },
                {display:'hahah',name:'test',type:'text'},
                { display: "日期 ", name: "AddTime", newline: true, type: "date", validate: { required: true, minlength: 5 } },
                { display: "折扣", name: "QuantityPerUnit", newline: true, type: "select", validate: { required: true, minlength: 5 } },
                { display: "单价", name: "UnitPrice", newline: true, type: "number",editor:{readonly:true}, validate: { required: true, minlength: 5 } },
                { display: "库存量", name: "UnitsInStock", newline: true, type: "digits", group: "库存", groupicon: groupicon },
                { display: "订购量", name: "UnitsOnOrder", newline: true, type: "digits" },
                { display: "采购量", name: "UnitsOnOrder2", newline: true, type: "spinner" },
                 { display: "选择公司", name: "Company", newline: true, type: "popup" },
              { display: "地区", name: "Area", newline: false, type: "select", editor: {data:area_data} },
                { display: "备注", name: "Remark", newline: true, type: "text", width: 470, validate: { required: true, minlength: 5 } },
                { display: "备注", name: "Remark", newline: true, type: "text", width: 470 }
                ]
                );
                });
        //  
        });
    </script> 

</head>
<body style="padding:10px"> 
  <form id="form2"></form> 
  <div class="liger-button" data-click="f_validate" data-width="150">验证</div> 

</html>

oqqBOSS123456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于LigerUI表单元素的动态替换

关于LigerUI表单元素的动态替换需求：是根据表单的一个元素输入的文本值之后，动态变换表单中另一个元素的类型，比如从初始化的文本框变成下拉框。实现过程分析：为表单的文本框绑定事件，在该文本框失去焦点时为表单的fields属性通过set方法重新设置内容即可。下面是ligerUI的一个表单的DEMO，直接做了修改贴出来可以参考参考。<!DOCTYPE html PUBLIC "-//W3C
复制链接

扫一扫