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 ...

随机推荐

爬虫扒下 bilibili 视频信息
B站算是对爬虫非常非常友好的网站啦! 修改转载已取得腾讯云授权在以上两篇文章中我们已经在腾讯云服务器上搭建好了 Python 爬虫环境了,下一步就是在云服务器上爬上我们的爬虫,抓取我们想要的数据: ...
e.which
e.which is not an event, which is a property of the event object, which most people label as e in th ...
更改Eclipse下Tomcat的部署目录
转自:http://kingxss.iteye.com/blog/1741438 前言今天tomcat启动就报错,后来查原因是因为异常关闭tomcat的原因,需要删除一个sessions.ser的文 ...
Python 类的特殊成员方法详解
class doges(object): """类的描述信息""" def __init__(self,name,food): self.n ...
[转]2年SQL Server DBA调优方面总结
2年SQL Server DBA调优方面总结当2年dba 我觉得,有些东西需要和大家分享探讨,先书单. 书单 1.<深入解析SQL Server 2008 系列> 这个就是mssql ...
（五）Oracle学习笔记—— 视图
1. 视图简介视图是虚表,没有具体物理数据,是通过实体表的一种计算映射逻辑.主要就是为了方便和数据安全. 2. 视图作用简化数据操作:视图可以简化用户处理数据的方式. 着重于特定数据:不必要的数据 ...
架构师-盛大许式伟VS金山张宴
许式伟:作为系统架构师,您一般会从哪些方面来保证网站的高可用性(降低故障时间)? 张宴:很多因素都会导致网站发生故障,从而影响网站的高可用性,比如服务器硬件故障.软件系统故障.IDC机房故障.程序上线 ...
Jpa调用存储过程及参数
public List<Object> findAllEntityListBySearch(Long inputInfoId, int flag) throws Exception { L ...
android 静态和动态设置 Receiver的 android:enabled值
0x 01 前提约束: 0x001 静态检查:指用action限定Intent,并使用包管理器的queryBroadCastReceivers方法,在flags字段置为0时查找ResolveInfo, ...
unity, windows: Unhandled Exception: System.UnauthorizedAccessException: Access to the path "XXX\Temp\Assembly-CSharp.dll.mdb" is denied
的windows上使用unity,修改过脚本或inspector中的数值后运行编辑器报错: Unhandled Exception: System.UnauthorizedAccessExceptio ...

7、easyui 表单

7、easyui 表单的更多相关文章

随机推荐

热门专题