您的位置：首页 > 产品设计 > UI/UE

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

2015-10-18 15:30 519 查看

需求：是根据表单的一个元素输入的文本值之后，动态变换表单中另一个元素的类型，比如从初始化的文本框变成下拉框。

实现过程分析：为表单的文本框绑定事件，在该文本框失去焦点时为表单的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,
4000
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ligerUI 表单

相关文章推荐

新的分享

章节导航