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

随机推荐

【codeforces #282(div 1)】AB题解
A. Treasure time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...
Managed Media Aggregation using Rtsp and Rtp
his article was written almost 2 years ago, it's content may not reflect the latest state of the cod ...
Selenium webdriver Java 高级应用
对于这一段还蛮有感慨的,只想说,代码还是需要自己去敲的. 1. 改变用户代理 import org.junit.AfterClass; import org.junit.BeforeClass; im ...
Crontab命令--Linux
Crontab命令--定时任务命令格式 Example:
解决 XMLHttpRequest status = 0 问题及返回值为null问题
1.XMLHttpRequest status = 0 问题 XMLHttpRequest的说明:http://www.w3.org/TR/XMLHttpRequest/ . The status a ...
Linq的日期比较
在一个项目中要进行linq的日期比较,从一个表的时间类型字段中取出日期,比较是否为当天日期.语句如下: epark_middlelayerEntities eparkMiddle = new epar ...
在github上建立jekyll blog
1.git常用命令(简易介绍见http://rogerdudler.github.io/git-guide/index.zh.html) git init #创建新的git仓库 git clo ...
Spring Sleuth和Zipkin跟踪微服务
原文地址:http://www.cnblogs.com/skyblog/p/6213683.html 随着微服务数量不断增长,需要跟踪一个请求从一个微服务到下一个微服务的传播过程, Spring Cl ...
ImageBox Control with Zoom/Pan Capability
Download source files - 10.8 Kb Download demo project - 6.81 Kb Introduction This control extends th ...
从零開始学Java之线程具体解释（1）：原理、创建
Java线程:概念与原理一.操作系统中线程和进程的概念如今的操作系统是多任务操作系统.多线程是实现多任务的一种方式. 进程是指一个内存中执行的应用程序.每一个进程都有自己独立的一块内存空间.一个进 ...

7、easyui 表单

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

随机推荐

热门专题