1. UI设计类似如下形式
  2. 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; width: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="width: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.修改数据保存事件实现（紫色部分）

（四）Web应用开发---新增对象Master类别的更多相关文章

  1. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

  2. Web前端开发的四个阶段（小白必看）

    第一阶段:HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终返回到浏览器端的都是HTML代码,浏览器 ...

  3. 1+x 证书 web 前端开发 HTML5 - 新增的元素，删除的元素

    官方QQ群 1+x 证书 web 前端开发 HTML5 - 新增的元素,删除的元素 http://blog.zh66.club/index.php/archives/197/

  4. 第十四章 web前端开发小白学爬虫

    老猿从事IT开发快三十年了,接触互联网也很久了,但自己没有做过web前端开发,只知道与前端开发相关的一些基本概念,如B/S架构.html标签.js脚本.css样式.xml解析.cookies.http ...

  5. Web前端开发必备

    前端学习相关书籍 关于书籍 HTML.CSS 类别书籍,都是大同小异,在当当网.卓越网搜索一下很多推荐.如果感觉学的差不多了,可以关注一下<CSS禅意花园>,这个很有影响力. Javasc ...

  6. web前端开发CSS命名规范参考

    做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...

  7. 大规模web服务开发技术

    大规模web服务开发技术 总评        这本书是日本一个叫hatena的大型网站的CTO写的,通过hatena网站从小到大的演进来反应一个web系统从小到大过程中的各种系统和技术架构变迁,比较接 ...

  8. OSGI企业应用开发（十三）OSGI Web应用开发（二）

    上篇文章介绍了OSGI Web应用的两种开发模式,并把Jetty应用服务器以Bundle的形式整合到Equinox容器中,已这种模式开发Web应用,所有的应用程序资源,例如Servlet.JSP.HT ...

  9. 循序渐进学.Net Core Web Api开发系列【5】：文件上传

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍通 ...

随机推荐

  1. Spring Mvc 页面传递数组到后台接收

    1.定义一个简单的类 User.java public class User { private Integer id; private String name; public Integer get ...

  2. JS - 二叉树算法实现与遍历 (更新中...)

    一.关于二叉树: 截图来自:https://segmentfault.com/a/1190000000740261 温馨提示:学习以及使用二叉树概念,心中永远有这么一个图,对于理解和接受二叉树有很大的 ...

  3. slideout

    这里在原有slideout.js增加了shade的遮罩功能 核心: 1,此插件的使用需要配合dom来用: <!-- 左边 --> <nav id="menu" c ...

  4. sencha touch routes(路由) 传递中文参数

    使用路由的时候可以传递参数 如下: index.html#eaterylist/335/61/61/61/B/商户名称 其中6个参数依次是:商户编号/公众账号/微信号/校验号/服务类型/商户名称 因为 ...

  5. URI Scheme注册伪协议实现远程命令执行

    Windows配置注册表注册伪协议 1.新建伪协议项 WIN+R 输入regedit 打开注册表,在注册表HKEY_CLASSES_ROOT键中新建一个项,项的名字就是你伪协议的名字,例如我注册一个c ...

  6. async 与await

    一. async 与await (https://segmentfault.com/a/1190000007535316) 1.async 是“异步”的简写,而 await 可以认为是 async w ...

  7. 数组和字符串的基础题目学习（EPI）

    学习的速度有些慢,脑袋转动的频率有些不是很高.不过今天的效率我觉得还是可以,应该不能称效率吧,就是整个感觉不错,感觉自己补充了很多的知识.其实G家和F家败了之后不知道看看算法题对接下来的找工作帮助是否 ...

  8. phantomjs试玩

    简单来说,phantomjs就是一个运行在node上的webkit内核,支持DOM渲染,css选择器,Canvas,SVG等,在浏览器上能做的事情,理论上,phantomjs 都能模拟做到. phan ...

  9. Python多线程应用示例

    实现任务描述如下: 创建多个子线程,共同访问一个队列中的元素,并执行相应操作.要求要按照元素的执行要按照队列顺序,并且元素的执行不能有重复. 示例代码如下: #simple sample to sho ...

  10. python3查询数据库并生成excel报表

    #!/usr/bin/env python3 #encoding=UTF- import os import time import xlwt hostIp = 'xxx.xxx.xxx.xx' us ...