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"
}]

 

posted on 2016-07-16 13:08  EthanCoco  阅读(233)  评论(0)  编辑  收藏  举报

导航