这是最后一个小节了，后面将会使用一个小项目来进一步实用讲解；

在之前的什么相关只是点都以及讲过了或者说涉及到过，如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 表单的更多相关文章

  1. easyui表单插件-包括日期时控件-列表

    ← jQuery EasyUI 表单插件 – Numberspinner 数值微调器 jQuery EasyUI 表单插件 - Timespinner 时间微调器  jQuery EasyUI 插件 ...

  2. easyui表单提交，后台获取不到值

    J2ee开发,使用easyui表单提交,在ie中可以正常将参数传递到后台,但使用firefox,chrome都无法将easyui的combobox值传递到后台,使用alert($('#form').s ...

  3. easyUI表单基础知识

    easyUI创建异步提交表单 我们创建一个带有 name.email 和 phone 字段的表单.通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form).表单 ...

  4. EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证

     { field : 'startPort', title : "起始端口", editor: "text", width : 50, editor: { ...

  5. JQuery EasyUI 表单

    EasyUI 创建异步提交表单 ♦ 通过使用 easyui 表单插件来改变表单为 ajax表单. 表单提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面.我们接收返回数据,并将它显示出来 ...

  6. 雷林鹏分享：jQuery EasyUI 表单 - 创建异步提交表单

    jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...

  7. 雷林鹏分享：jQuery EasyUI 表单 - 创建树形下拉框

    jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...

  8. 雷林鹏分享：jQuery EasyUI 表单 - 表单验证

    jQuery EasyUI 表单 - 表单验证 本教程将向您展示如何验证一个表单.easyui 框架提供一个 validatebox 插件来验证一个表单.在本教程中,我们将创建一个联系表单,并应用 v ...

  9. 雷林鹏分享：jQuery EasyUI 表单 - 过滤下拉数据网格

    jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...

  10. 雷林鹏分享：jQuery EasyUI 表单 - 格式化下拉框

    jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项.您可以在下拉框(combobox)上使用 formatter ...

随机推荐

  1. [C++]豆知识(1条)

    术语: ctor:constructor,构造函数 dtor:destructor,析构函数 构造函数/析构函数 如果基类要利用多态,则dtor需要声明为virtual,这样在销毁对象时才可以正确调用 ...

  2. mongodb配置与使用

    mongodb.dll文件下载地址 http://pecl.php.net/package/mongodb/ 或者 https://windows.php.net/downloads/pecl/rel ...

  3. testform

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. Hyper-V Tools for win7

    http://download.microsoft.com/download/C/1/C/C1CA233D-CA1A-4C4D-8240-B4AFC0FD3433/Windows6.1-KB95883 ...

  5. Android项目-几种常见的应用架构

    android两种Tab分页的方式:TabActivity和ActivityGroup http://www.fengfly.com/plus/view-209429-1.html 1.单个Activ ...

  6. ros下基于百度语音的，语音识别和语音合成

    代码地址如下:http://www.demodashi.com/demo/13153.html 概述: 本demo是ros下基于百度语音的,语音识别和语音合成,能够实现文字转语音,语音转文字的功能. ...

  7. JPA联合主键@EmbeddedId使用详解附查询例子

    花了2个小时的时间解决这个问题,网上资料太少,记录下     详情看源文件TBicPrmCompute,TBicPrmComputePK package com.isoftstone.core.dom ...

  8. .NET 环境中使用RabbitMQ RabbitMQ与Redis队列对比 RabbitMQ入门与使用篇

    .NET 环境中使用RabbitMQ   在企业应用系统领域,会面对不同系统之间的通信.集成与整合,尤其当面临异构系统时,这种分布式的调用与通信变得越发重要.其次,系统中一般会有很多对实时性要求不高的 ...

  9. 用Darwin开发RTSP级联server(拉模式转发)(附源代码)

    源代码下载地址:https://github.com/EasyDarwin orwww.easydarwin.org 在博客 在Darwin进行实时视频转发的两种模式 中,我们描写叙述了流媒体serv ...

  10. Silverlight实例教程 - Validation数据验证DataAnnotation机制和调试技巧（转载）

    Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础 ...