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

在之前的什么相关只是点都以及讲过了或者说涉及到过，如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. non-compatible bean definition of same name and class

    在整合struts2.1.6+spring2.5.6开发中,使用了注解和struts-convention来实现零配置管理.spring也使用注解annotation方式.现在的问题是:我在连个个不同 ...

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

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

  3. 手机SD卡损坏补救措施

    现在的应用程序越来越重,比如微信.来往之类的,稍微用一段时间,就会占用几十MB甚至上百MB的空间.而有时候甚至手机会出现"无响应"的现象,需要你选择"继续等待" ...

  4. 用聚合数据API（苏州实时公交API）快速写出小程序

    利用聚合数据API快速写出小程序,过程简单. 1.申请小程序账号 2.进入开发 3.调用API.比如“苏州实时公交”小程序,选择的是苏州实时公交API. 苏州实时公交API文档:https://www ...

  5. 网页视频播放方案chimee 组件使用

    1.概述 鉴于目前 H5-Video 在 Web 生态环境中存在较大差异化(兼容性)的表现,本文主要介绍使用奇舞团开发chimee 组件进行视频播放的用法. chimee 组件地址: http://c ...

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

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

  7. src和href使用总结

    src img 图片 <img src="/img/1.png" alt="1" /> rame iframe 框架集 <iframe src ...

  8. redis bgsave 内存不够

    客户反应很慢,程序玩不了,登录服务器,查看,发现cpu/io正常,内存也还有,但是负载很离谱的飙高到了30多,查原因: 因为用了redis,最近redis数据增长量很大,而且优化过,怀疑是redis问 ...

  9. cassandra的primary key, partition key, cluster key,

    https://stackoverflow.com/questions/24949676/difference-between-partition-key-composite-key-and-clus ...

  10. 【LeetCode OJ 016】3Sum Closest

    题目链接:https://leetcode.com/problems/3sum-closest/ 题目:Given an array S of n integers, find three integ ...