jQuery MiniUI

标题: datagrid [打印本页]
作者: liyang1987ly    时间: 2012-7-4 22:11:50     标题: datagrid

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>员工面板</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="../../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../scripts/miniui/miniui.js" type="text/javascript"></script><link href="../../scripts/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
    <link href="../../scripts/miniui/themes/icons.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
    html, body
    {
        font-size:12px;
        padding:0;
        margin:0;
        border:0;
        height:100%;
        overflow:hidden;
    }
    </style>
</head>
<body>   
    <form id="form1" method="post">
        <input name="id" class="mini-hidden" />
        <div style="padding-left:11px;padding-bottom:5px;">
            <table>
                <tr>
                    <td style="width:70px;">员工帐号：</td>
                    <td style="width:150px;">   
                        <input name="loginname" class="mini-textbox" required="true"/>
                    </td>
                    <td style="width:70px;">所属部门：</td>
                    <td style="width:150px;">   
                        <input name="dept_id" class="mini-combobox" valueField="id" textField="name"
                            url="../data/AjaxService.jsp?method=GetDepartments"
                            required="true"
                            />
                    </td>
                </tr>
                <tr>
                    <td >薪资待遇：</td>
                    <td >   
                        <input name="salary" class="mini-textbox" required="true"/>
                    </td>
                    <td >职位：</td>
                    <td >   
                        <input name="position" class="mini-combobox" valueField="id" textField="name"/>
                    </td>
                </tr>
               
                <tr>
                    <td >学历：</td>
                    <td >   
                        <input name="educational" class="mini-combobox" valueField="id" textField="name" url="../data/AjaxService.jsp?method=GetEducationals" />
                    </td>
                    <td >毕业院校：</td>
                    <td >   
                        <input name="school" class="mini-textbox" />
                    </td>
                </tr>           
            </table>
        </div>
        <fieldset style="border:solid 1px #aaa;padding:3px;">
            <legend >基本信息</legend>
            <div style="padding:5px;">
        <table>
            <tr>
                <td style="width:70px;">姓名</td>
                <td style="width:150px;">   
                    <input name="name" class="mini-textbox" required="true"/>
                </td>
                <td style="width:70px;">性别：</td>
                <td >                        
                    <select name="gender" class="mini-radiobuttonlist">
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </td>
               
            </tr>
            <tr>
                <td >年龄：</td>
                <td >   
                    <input name="age" class="mini-spinner" value="25" minValue="1" maxValue="200" />
                </td>
                <td >出生日期：</td>
                <td >   
                    <input name="birthday" class="mini-datepicker" required="true"/>
                </td>
            </tr>
            <tr>
                <td ></td>
                <td >   
                    <input name="married" class="mini-checkbox" text="已婚？" trueValue="1" falseValue="0" />
                </td>
                <td ></td>
                <td >   
                    
                </td>
            </tr>     
            <tr>
                <td >国家：</td>
                <td >   
                    <input name="country" class="mini-combobox" url="../data/countrys.txt" />
                </td>
                <td >城市：</td>
                <td >   
                    <input name="city" class="mini-combobox"  />
                </td>
            </tr>
            <tr>
                <td >备注：</td>
                <td colspan="3">   
                    <input name="remarks" class="mini-textarea" style="width:350px;" />
                </td>
            </tr>         
        </table>            
            </div>
        </fieldset>
        <div style="text-align:center;padding:10px;">               
            <a class="mini-button" style="width:60px;margin-right:20px;">确定</a>      
            <a class="mini-button" style="width:60px;">取消</a>      
        </div>        
    </form>
    <script type="text/javascript">
        mini.parse();

        var form = new mini.Form("form1");

        function SaveData() {
            var o = form.getData();            

            form.validate();
            if (form.isValid() == false) return;

            var json = mini.encode([o]);
            $.ajax({
                url: "../data/AjaxService.jsp?method=SaveEmployees",
                data: { employees: json },
                cache: false,
                success: function (text) {
                    CloseWindow("save");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.responseText);
                    CloseWindow();
                }
            });
        }

        ////////////////////
        //标准方法接口定义
        function SetData(data) {
            if (data.action == "edit") {
                //跨页面传递的数据对象，克隆后才可以安全使用
                data = mini.clone(data);

                $.ajax({
                    url: "../data/AjaxService.jsp?method=GetEmployee&id=" + data.id,
                    cache: false,
                    success: function (text) {
                        var o = mini.decode(text);
                        form.setData(o);
                        onDeptChanged();
                        mini.getbyName("position").setValue(o.position);
                    }
                });
            }
        }

        function GetData() {
            var o = form.getData();
            return o;
        }
        function CloseWindow(action) {
            if (window.CloseOwnerWindow) window.CloseOwnerWindow(action);
            else window.close();
        
        }
        function onOk(e) {
            SaveData();
        }
        function onCancel(e) {
            CloseWindow("cancel");
        }
        //////////////////////////////////
        function onDeptChanged(e) {
            var deptCombo = mini.getbyName("dept_id");
            var positionCombo = mini.getbyName("position");
            var dept_id = deptCombo.getValue();

            positionCombo.load("../data/AjaxService.jsp?method=GetPositionsByDepartmenId&id=" + dept_id);
            positionCombo.setValue("");
        }



    </script>
</body>
</html>
点击页面的修改 你们是怎么把值赋值到这个页面的？../data/AjaxService.jsp?method=GetEmployee&id=" + data.id,这个方法？


作者: factory    时间: 2012-7-5 09:31:42

在SetData里面，表格页面会调用到这个方法，把选择行的id传递到EmployeeWindow页面，然后通过"../data/AjaxService.jsp?method=GetEmployee&id=" + data.id,找到对应的数据，赋给这个页面



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2