7、easyui 表单
这是最后一个小节了,后面将会使用一个小项目来进一步实用讲解;
在之前的什么相关只是点都以及讲过了或者说涉及到过,如datagrid表格,树形菜单,布局面板panel,页签,拖放功能,只是在表格的属性细节没有讲,后面用到将会进一步讲解,好了这一小节,主要是form表单一些属性使用,后续将会以“文章管理系统“这个项目实战,结合php和easyui来细讲;
这节很简单的 ,直接贴出代码:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>7、easyui 表单</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script>
$(function(){
$("#form1").form({
url:'formdemo.php',
onSubmit:function(){
return $(this).form('validate');
},
success:function(data){
$.messager.alert('Info', data, 'info');
$("#form1").form('clear');
}
});
$("#cb").combobox({
formatter:function(row){
var imagefile = '../../../img/'+row.icon;
return '<img class="item-img" src="'+imagefile+'"/><span class="item-text">'+row.text+'</span>';
}
});
$('#cc').combo({
url:'combobox_data.json',
required:true,
multiple:true
});
$('#cg').combogrid({
panelWidth:450,
value:'006', idField:'code',
textField:'name',
url:'combobox_data.json',
columns:[[
{field:'code',title:'Code',width:60},
{field:'name',title:'Name',width:100},
{field:'addr',title:'Address',width:120},
{field:'col4',title:'Col41',width:100}
]]
}); });
</script>
</head>
<body>
<!-- 表单异步以及验证-->
<div>
<form id="form1" method="post">
<p><label for="name">name</label>
<input class="easyui-validatebox" required="true" name="name" type="text"/></p>
<p><label for="sex">sex</label>
<input name="sex" type="text"/></p>
<p><label for="age">age</label>
<input name="age" type="text"/></p>
<p>
<input value="submit" type="submit"/></p>
</form>
</div> <!--树形下拉框-->
<div id="dlg" style="width:500px;height:250px;padding:10px 30px;"
title="Register" buttons="#dlg-buttons">
<h2>Account Information</h2>
<form id="ff" method="post">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name" style="width:350px;"/></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name="address" style="width:350px;"/></td>
</tr>
<tr>
<td>City:</td>
<td><select class="easyui-combotree" url="city_data.json" name="city" style="width:156px;"/></td>
</tr>
</table>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="savereg()">Submit</a>
<!--<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>-->
</div> <!--格式化下拉框-->
<div>
<input id="cb" valueField="id" textFiled="text" url="combobox_data.json" >
</div>
<!--文本框-->
<div>
<p>文本框:<input class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px"> </p>
<p><input id="tb" class="easyui-textbox" type="text" style="width:300px" buttonText="Serach" iconCls="icon-man" iconAlign="left"></p>
</div>
<!--自定义下拉框-->
<div>
<input id="cc" value="001">
</div>
<!--数值输入框-->
<div>
<input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"></input>
</div>
<!--日期输入框-->
<div>
<input id="dd" type="text" class="easyui-datebox" required="required"></input>
</div>
<!--数据表格下拉框-->
<div>
<input id="cg" name="dept" value="01" />
</div> </body>
</html>
city_data.json
[{
"id":1,
"text":"City",
"children":[{
"id":11,
"text":"Wyoming",
"children":[{
"id":111,
"text":"Albin"
},{
"id":112,
"text":"Canon"
},{
"id":113,
"text":"Egbert"
}]
},{
"id":12,
"text":"Washington",
"state":"closed",
"children":[{
"id":121,
"text":"Bellingham"
},{
"id":122,
"text":"Chehalis"
},{
"id":123,
"text":"Ellensburg"
},{
"id":124,
"text":"Monroe"
}]
}]
}]
combobox_data.json
[{
"id":1,
"text":"Word",
"icon":"doc.png"
},{
"id":2,
"text":"Excel",
"icon":"xls.png"
},{
"id":3,
"text":"Zip",
"icon":"zip.png",
"selected":true
},{
"id":4,
"text":"Html",
"icon":"html.png"
},{
"id":5,
"text":"Css",
"icon":"css.png"
},{
"id":6,
"text":"Text",
"icon":"txt.png"
},{
"id":7,
"text":"PowerPoint",
"icon":"ppt.png"
}]
7、easyui 表单的更多相关文章
- easyui表单插件-包括日期时控件-列表
← jQuery EasyUI 表单插件 – Numberspinner 数值微调器 jQuery EasyUI 表单插件 - Timespinner 时间微调器 jQuery EasyUI 插件 ...
- easyui表单提交,后台获取不到值
J2ee开发,使用easyui表单提交,在ie中可以正常将参数传递到后台,但使用firefox,chrome都无法将easyui的combobox值传递到后台,使用alert($('#form').s ...
- easyUI表单基础知识
easyUI创建异步提交表单 我们创建一个带有 name.email 和 phone 字段的表单.通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form).表单 ...
- EasyUI表单验证,自定义插件验证,自定义js插件验证,远程验证,常见手机号,中英文,qq等验证规则验证
{ field : 'startPort', title : "起始端口", editor: "text", width : 50, editor: { ...
- JQuery EasyUI 表单
EasyUI 创建异步提交表单 ♦ 通过使用 easyui 表单插件来改变表单为 ajax表单. 表单提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面.我们接收返回数据,并将它显示出来 ...
- 雷林鹏分享:jQuery EasyUI 表单 - 创建异步提交表单
jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...
- 雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框
jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
- 雷林鹏分享:jQuery EasyUI 表单 - 表单验证
jQuery EasyUI 表单 - 表单验证 本教程将向您展示如何验证一个表单.easyui 框架提供一个 validatebox 插件来验证一个表单.在本教程中,我们将创建一个联系表单,并应用 v ...
- 雷林鹏分享:jQuery EasyUI 表单 - 过滤下拉数据网格
jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...
- 雷林鹏分享:jQuery EasyUI 表单 - 格式化下拉框
jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项.您可以在下拉框(combobox)上使用 formatter ...
随机推荐
- es6 中的 模板字符串
Template literals are string literals allowing embedded expressions. You can use multi-line strings ...
- 深入NIO Socket实现机制(转)
http://www.jianshu.com/p/0d497fe5484a# 前言 Java NIO 由以下几个核心部分组成: Buffer Channel Selector 以前基于net包进行so ...
- python获取当前文件路径
python获取当前文件路径 学习了:https://www.cnblogs.com/strongYaYa/p/7200357.html https://blog.csdn.net/heatdeath ...
- C语言经典算法五个人问岁数!——————【Badboy】
有5 个人坐在一起,问第五个人多少岁?他说比第4 个人大2 岁.问第4 个人岁数.他说比第3 个人大2 岁.问第三个人,又说比第2 人大两岁.问第2 个人.说比第一个人大两岁.最后问第一个人.他说是1 ...
- 小程序flex属性两边边距自适应
使用flex属性两边边距自适应解决方案 Justify-content:center 文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有 ...
- javascript 清空数组的方法
1,splice var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary); // 输出 [],空数组,即被清空了 2,lengt ...
- swift user guide.pdf下载
日志以便日后查找.谢谢 1 Swift User Guide.pdf下载 http://download.csdn.net/detail/swifttrain/7442921 2 The Swift ...
- java之super关键字
super关键字: 在java中使用super来引用基类的成分. 程序code: class FatherClass{ public int value; public void f(){ value ...
- Android apktool反编译资源文件为空解决办法(测试天猫、淘宝等apk成功)
1 Exception in thread main brut.androlib.androlibexception multiple resources 解决办法:下载最新的apktool,在goo ...
- spring事务管理源码解析--加了@Transactional注解后Spring究竟为我们做了哪些事情?
大家都知道事务管理是基于AOP的,对AOP还不了解的请自行百度. 实现一个事务需要以下几步:1.获取数据库连接 2.执行数据库操作 3.如果2步骤发生异常就回滚,否则就提交 4.释放资源. 然后 ...