（四）Web应用开发---新增对象Master类别

UI设计类似如下形式
Copy如下Html代码到新创建的Html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>新增宿舍</title>

    <link href="/Scripts/wrap/themes/icon.css" rel="stylesheet" />
    <link href="/scripts/wrap/themes/default/easyui.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.8.2.min.js"></script>
    <script src="/Scripts/wrap/jquery.easyui.min.js"></script>
    <script src="/scripts/wrap/locale/easyui-lang-zh_CN.js"></script>
    <script src="/Scripts/datasrvrequest.js"></script>
    <script src="/Scripts/json2.js"></script>
    <script src="/Scripts/DateControl/WdatePicker.js"></script>
    <script type="text/javascript" language="javascript">
        var editIndex = undefined;
        function btnchange_click() {
            var ph = new parmHelper();

            var no = getvalue("txtno");
            var name = getvalue("txtname");
            var bno = $.getlistValue("ddlbno");;
            var rmk = getvalue("txtdesr");
            if (no == "") {
                $.showErrorMsg("请输入宿舍编号"); return;
            }
            else if (name == "") {
                $.setValue("txtname", no);
                name = no;
            }
            if (bno == "") {
                $.showErrorMsg("请输入宿舍楼"); return;
            }
            var lg = request("userno");
            $.showWaiting();
            ph.Add("name", name);
            ph.Add("no", no);
            ph.Add("bno", bno);
            ph.Add("desr", rmk);
            ph.Add("flag", 1);
            ph.Add("userno", lg);
            var parm = JSON2.stringify(ph.KeyValueArray);
            $.showConfirm("确定新增？", function (data) { if (data) postJsonData(DCAConfig.MWPPostJsonUrl, parm, DCAConfig.mwpnewdormwritedata, datachange_callback); });

        }
        function ddlbind_callback(data, status) {
            getjquery("ddlbno").combobox("loadData", data);
        }
        function bindBuildingList() {
            var lg = request("userno");
            var ph = new parmHelper();
            ph.Add("userno", lg);
            var parms = JSON2.stringify(ph.KeyValueArray);
            retrieveJsonData(DCAConfig.MWPGetDTJsonUrl, parms, DCAConfig.mwpnewdormbuildinglist, ddlbind_callback);

        }
        $(function () {

            getjquery("btnchange").bind("click", btnchange_click);
            //EnterEvent.InputEnterEventBind(grid_load);
            //grid_load(0, 20);
            bindBuildingList();
        });

    </script>

</head>
<body class="easyui-layout">
    <div data-options="region:'north',border:false,title:'新增宿舍'" style="height: 235px;padding: 10px">
        <table class="grid" data-options="fit:false;" style="margin:2px auto 0 auto; 70%;">

            <tr>
                <td>编号:</td>
                <td>
                    <input class="easyui-validatebox text-left easyui-tooltip" data-options="required:true" type="text" value="" id="txtno" title="请输入宿舍编号" name="cc" />
                </td>
                <td>名称:</td>
                <td>
                    <input class="text-left easyui-tooltip" type="text" value="" id="txtname" title="请输入宿舍名称" name="cc" />
                </td>
              </tr>
            <tr>
                <td>宿舍楼:</td>
                <td>
                    <input class="easyui-validatebox easyui-combobox" id="ddlbno" name="ddlbno" style="210px;" title="请选择宿舍楼" data-options="valueField:'bno',textField:'bno'" />
                </td>
                <td>备注:</td>
                <td>
                    <input class="text-left easyui-tooltip" data-options="required:true,validType:'numberic'" type="text" value="" id="txtdesr" title="宿舍情况描述" name="cc" />
                </td>
            </tr>

            <tr>

                <td colspan="6"><a href="#" id="btnchange" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">保存</a></td>
            </tr>
        </table>
    </div>

</body>
</html>

3.修改UI元素布局（红色部分）

4.修改事件绑定和初始化代码块（蓝色部分）

5.修改初始化实现（绿色部分）

6.修改数据保存事件实现（紫色部分）