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

在之前的什么相关只是点都以及讲过了或者说涉及到过，如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. Private strand flush not complete错误

    Private strand flush not complete错误 (2013-10-22 11:04:58) 转载▼   分类: FAQ 最近的一个报表系统数据库,总是出现checkpoint ...

  2. SQL Server 2016 Community Technology Preview 3.3

    https://www.microsoft.com/en-us/evalcenter/evaluate-sql-server-2016 SQL Server 2016 Community Techno ...

  3. ZT:有些人，活了一辈子，其实不过是认真过了一天，其余时间都在重复这一天而已

    出处:http://news.163.com/17/1011/19/D0G7UEDS0001982T.html 有些人,活了一辈子,其实不过是认真过了一天,其余时间都在重复这一天而已,也有人每天不重样 ...

  4. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何让不同的PLC程序分线程运行 TC3

    右击Tasks,添加一个新的Task   可以为这个线程设置自定义的扫描周期   然后在项目上右击添加Referenced Task   在TaskSub1上右击添加现有项,把之气写好的PRG程序绑定 ...

  5. Unity 提取游戏资源之ktx转换

    http://blog.csdn.net/akof1314/article/details/38022263 从雨松的博文<Unity3D研究院之mac上从.ipa中提取unity3D游戏资源( ...

  6. Django—— 缓存框架

    译者注:1.无用的,吹嘘的说辞不翻译:2.意译,很多地方不准确. 动态网站最为重要的一点就是好,网页是动态的.每一次用户请求页面,网站就要进行各种计算——从数据库查询,到render模板,到各种逻辑运 ...

  7. Nginx开发从入门到精通 nginx平台初探

    初探nginx架构(100%) 众所周知,nginx性能高,而nginx的高性能与其架构是分不开的.那么nginx究竟是怎么样的呢?这一节我们先来初识一下nginx框架吧. nginx在启动后,在un ...

  8. redis实践一些要注意的事项

    不要放垃圾数据,及时清理无用数据实验性的数据和下线的业务数据及时删除; key尽量都设置过期时间对具有时效性的key设置过期时间,通过redis自身的过期key清理策略来降低过期key对于内存的占用, ...

  9. unity, 自定义类中使用print

    在unity脚本中自定义c#类,而且不继承MonoBehaviour的话,若还想在其中使用print函数,可以用MonoBehaviour.print(...).

  10. FMDB（一）— 简单介绍

    在iOS开发过程中常常会用到数据库方面的操作,但是iOS原生的SQLite API使用起来并不十分友好,对于C语言基础较薄弱的朋友来说.使用起来可能会认为比較不便.于是,一些第三方的对SQLite A ...