Formset表单设置函数库

Formset表单设置函数库

一、从基本说起
B/S开发，最基础的人机交互是什么？数据来自哪里？（产生的和输入的[废话...此处省略N万字....]）。是表单。常规的软件都必不可少的过程是 用户输入--》处理--》存储--》读取修改。数据存在数据库里木用，要动起来，就要交互。于是..........

二、过程

1.用户输入
通过以下几种表单元素，展示给用户，通过输入、点击、拖曳等形式操作，然后获取用户的动作。
文本框、多行文本域、下拉菜单、单选按钮、复选按钮、隐藏域。

2.处理存储

3.读取修改
把现有的数据读出来，再以表单形式展示。恰恰是这一步，让程序员头疼，明明和添加过程相似，还要机械性的写一遍，简直是浪费人力。根据不同的表单元素，还要损耗脑细胞啊。

文本框：以 value = 形式设值
多行文本：在textarea之间输出值
下拉菜单：这个怎么办？获取值，用编程判断选项的值，在值符合的一项，多输出一个selected，要重新输出一次菜单。
单选按钮：这个呢？判断符合的值，输出checked。
复选按钮：判断是否空值，然后决定是否checked。
要调用页面元素：document.getElementById ，汗偶英文不好，总记不住这长的一串单词。。。。
还有些元素属性的设置，元素的隐藏与显示。。。。。。

明明是很简单的问题，非要用编程实现，有时间容许这样挥霍么？

三、解决方法
现在你不必要编程来解决很白痴又浪费时间的问题了，之需要引用一个js，读取值输出就可了。

Formset.js


CODE:[Copy to clipboard]var Radiov = 'null';
var Rarray = 'null';
var EType;
//DreamEcm Formset
//Date: Jul 13, 2006
//Copyright: DreamSoft Co.,Ltd.
//Mail: [email protected]
//Author: Egmax
/***
Input('Element_id','value');
***/
function Input(Eid, v)
{
$(Eid).value = v;
}

/***
Select('Element_id','value');
***/
function Select(Eid,v)
{
var _obj = $(Eid);
for(var i=0; i<_obj.options.length; i++)
if(_obj.options.value == v) { _obj.selectedIndex = i; break; }
}

/***
Checkbox('Element_id','value');
***/
function Checkbox(Eid,v)
{
if(v != 0) $(Eid).click();
}

/***
Radio('Element_name', 'value');
***/
function Radio(Ename, Evalue)
{
if(typeof(Radiov) == 'string') Rarray = _GetRadio();
if(typeof(Rarray) == 'string') return false;
for (var i=0; i<Rarray.length; i++){
if (Rarray.name == Ename && Rarray.value == Evalue) { Rarray.click(); break; }
}
}

/***
Set(Fid, v);
***/
function Set(Fid, v)
{
EType = $(Fid).type;
switch(EType) {
case 'text' : Input(Fid, v); break;
case 'select-one' : Select(Fid, v); break;
case 'checkbox' : Checkbox(Fid, v); break;
case 'hidden' : Input(Fid, v); break;
case 'radio' : Radio(Fid, v); break;
case 'textarea' : Input(Fid, v); break;
default : return false;
}
}

/***
$('Element_id','Element_id',..........);
return : obj array
***/
function Submit(Fname)
{
document.forms[Fname].submit();
}

/***
Dis('Element_id','Element_id',..........);
***/
function Dis(Eid)
{
if(arguments.length == 1) { $(Eid).disabled = true; return; }
var i;
for (i=0; i<arguments.length; i++)
if(typeof(arguments) == 'string') $(arguments).disabled = true;
}

/***
$('Element_id','Element_id',..........);
return : obj array
***/
function $(EId)
{
if(arguments.length == 1) return document.getElementById(EId);
var i,Es = new Array();
for (i=0; i<arguments.length; i++)
if(typeof(arguments) == 'string') Es.push(document.getElementById(arguments));
return Es;
}

/***
_GetRadio();
return : obj array
***/
function _GetRadio()
{
var _input = document.getElementsByTagName('input');
if(_input.length < 1) return 'null';
var i,Is = new Array();
for (i=0; i<_input.length; i++) if(_input.type=="radio") Is.push(_input);
Radiov = Is;
return Is;
}
示例：


CODE:[Copy to clipboard]<script src='Formset.js'></script>

Input演示：<input id='t_input' name='test'>
<br>Input('t_input','123456');
<br><br>

Select演示：
<select id='t_select' name='t_select'>
<option value='aa'>aa001</option>
<option value='bb'>bb002</option>
<option value='cc'>cc003</option>
<option value='dd'>dd004</option>
</select>
<br>Select('t_select','cc');
<br><br>

Checkbox演示：
<input type='checkbox' id='t_box' value=0>已经阅读
<br>Checkbox('t_box', 1);
<br><br>

Radio演示：
<input type='radio' id='t_radio1' name='f_radio' value='aaa'>R1
<input type='radio' id='t_radio2' name='f_radio' value='bbb'>R2
<input type='radio' id='t_radio1' name='f_radio2' value='caaa'>R1
<input type='radio' id='t_radio2' name='f_radio2' value='cbbb'>R2
<br>Radio('f_radio', 'bbb');
<br><br>

Dis演示：<br>
Dis('t_input','t_select','t_box','t_radio1');
<br><br>
Submit演示：<br>
Submit('tf');

<textarea id='t_textarea' name='f_radio'></textarea>

<form action='0' name='tf' target='_blank'></form>

<script>
Set('t_input','123456'); //这个是设置input的值
Set('t_select','cc'); //这个是设置select的值
Set('t_box', 1); //这个是设置checkbox的值
Set('f_radio', 'bbb'); //这个是设置radio的值
Set('f_radio2', 'cbbb');
Set('t_textarea', 'cbbb'); //这个是设置textarea的值
Dis('t_input','t_select','t_box','t_radio1'); //这个是禁用某个元素，可以设置一个或多个参数
Submit('tf'); //这个是提交name为tf的表单
</script>
无论是文本框还是下拉菜单，现在你只需要调用 Set(元素id，元素的值)；
如果需要获取页面的元素，只需要 $('元素id') 就可取得元素，效果同 document.getElementById ，要取得多个元素，则设置多个参数。


四、结束
总之搞程序，就要学会偷懒，尽量一劳永逸。。。。。