EasyUI表单及其控件的jQuery语句设计。

2. EasyUI表单及其控件的jQuery语句设计。

本例利用HTML语句定义一个EasyUI表单控件myForm1，在这个表单中添加多种EasyUI类型控件，其中包括textbox、numberbox、datebox、combobox等。jQuery程序代码在<scipt>…</scipt>之间定义，从$(document).ready(function(){});语句开始。

在本例中，表单及控件的高度、宽度等属性的设置均根据EasyUI规则由jQuery语句定义，而控件在页面中的位置布局则通过HTML的层<div>和<p>标记实现。关于EasyUI控件的属性将在以后实例中详细阐述，详细资料可参见http://www.jEasyUI.com/documentation/index.php、http://www.jEasyUI.com、和中文的http://www.jEasyUI.net/等网址。本实例程序运行界面如图2-2所示，完整程序代码见程序2-2。

图2-2 EasyUI表单及其控件的jQuery程序运行界面

程序2-2：example02_formcontrols.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>

</style>

<head>

</head>

<div class=“easyui-panel" id="myForm1" title=" 学生信息编辑"

style="background:#fafafa;" data-options="iconCls:'panelIcon'" >

<fieldset id="myFieldset1" style="position:relative; top:10px; left:10px; width:300px;

height:230px; padding: 2px 0px 0px 16px; border:1px groove" >

<p>学号：<input class=“easyui-textbox" type="text" id="stuid"

style="padding:0px 2px 0px 4px"></input></p>

<p>姓名：<input class=“easyui-textbox" type="text" id="stuname"

style="padding:0px 2px 0px 4px"></input></p>

<p>拼音：<input class=“easyui-textbox" type="text" id="pycode"

style="padding:0px 2px 0px 4px"></input> </p>

<p>性别：<input class=“easyui-combobox" type="text" id="gender"

style="padding:0px 2px 0px 4px"></input> </p>

<p>出生日期：<input class=“easyui-datebox" type="text" id="birthdate"

style="padding:0px 2px 0px 4px"></input> </p>

<p>体重：<input class=“easyui-numberbox" type="text" id="weight"

style="padding:0px 2px 0px 4px;"></input> </p>

</fieldset>

<fieldset id="myFieldset2" style="position:relative; top:20px; left:10px;

width:300px; height:200px; padding: 2px 0px 0px 16px; border:1px groove" >

<p>家庭地址：<input class=“easyui-textbox" type="text" id="address"

style="padding:0px 2px 0px 4px"></input></p>

<p>手机号码：<input class=“easyui-textbox" type="text" id="mobile"

style="padding:0px 2px 0px 4px"></input></p>

<p>Email：<input class=“easyui-textbox" type="text" id="email"

style="padding:0px 2px 0px 4px"></input> </p>

<p>微信号：<input class=“easyui-textbox" type="text" id="weixin"

style="padding:0px 2px 0px 4px"></input> </p>

</fieldset>

</div>

$(document).ready(function(){ //jQuery从此代码开始

//example02_formcontrols.jsp

var gendersource=[{'gender':'男'},{'gender':'女'}];

$("#myForm1").panel({width:345, height:505});

$("#stuid").textbox({width:120});

$("#birthdate").datebox({width:120});

$("#weight").numberbox({width:120});

$("#gender").combobox({width:120, data:gendersource, valueField:'gender', textField:'gender'});

var items = $('#gender').combobox('getData');

$("#gender").combobox('select', items[0].gender);

$("#stuid").textbox('setValue','20143305001');

$("#stuname").textbox('setValue','诸葛亮');

$("#birthdate").datebox('setValue','2015-9-10');

$("#weight").numberbox({precision:1, max:200, min:30});

$("#weight").numberbox('setValue',65.5);

$("#weight").numberbox('textbox').css('text-align','right');

}); //jQuery代码从此结束

</script>

</body>

</html>

主要知识点：

①表单常用控件的基本类型：textbox、numberbox、datebox、combobox、checkbox、tabs、tree、grid、treegrid、filebox、button、menu等。

②利用jQuery语句设置textbox、datebox、numberbox、combobox的属性，包括宽度、高度等。例如：$("#stuid").textbox({width:120});

③利用jQuery语句设置控件的初值。例如：$("#stuname").textbox('setValue','诸葛亮');

④利用jQuery语句设置numberbox数值框的属性，包括最大值、最小值、小数点位数等。例如：

$("#weight").numberbox({precision:1, max:200, min:30});

⑤利用jQuery语句设置numberbox数值框的右对齐。例如：

$("#weight").numberbox('textbox').css('text-align','right');

⑥利用jQuery语句设置combobox组合框的选项与初值。例如：

var gendersource=[{'gender':'男'},{'gender':'女'}]; //定义数据源

$("#gender").combobox({width:120, data:gendersource, valueField:'gender', textField:'gender'});

var items = $('#gender').combobox('getData'); //提取所有选项

$("#gender").combobox('select', items[0].gender); //将初值设置为第一个选项

⑦datebox控件的日期格式及本地化设置。引入jqEasyUI/EasyUI-lang-zh_CN.js。

⑧HTML中Fieldset的定义与使用。

⑨jQuery判断控件是否存在方法： if ($('#id').length>0)

思考题：

①不同控件在页面中的上下对齐问题，即如何设置文字与编辑框之间的距离。

②在页面中一行显示多列问题。例如：如何在“体重”文本框的右侧显示“KG”这个字符。

EasyUI表单及其控件的jQuery语句设计。

2. EasyUI表单及其控件的jQuery语句设计。

猜你喜欢