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. SpringBoot（八）-- 日志

    一.介绍 SpringBoot内部使用Commons Logging来记录日志,但也保留外部接口可以让一些日志框架来进行实现,例如Java Util Logging,Log4J2还有Logback.如 ...

  2. proxy chains 试用

    我的机子是通过一台windows机器上的CCProxy代理上网.可是在设置了系统代理以后,发现在终端下若要进行ftp或者ssh等操作,并不能使用代理(但是wget是可以的). 期间试过一些方法,比如在 ...

  3. Django SimpleCMDB 项目

    创建 SimpleCMDB 项目: [root@localhost ~]$ django-admin.py startproject SimpleCMDB 创建应用,收集主机信息: [root@loc ...

  4. 学习下新塘M0芯片的下载方法

    编程方式多种多样,解释这几种方式的原理,方便做后续的回答: 一.脱机 脱机的意思就是脱离PC机,有很多芯片必须连接PC才能烧录,比如某些FPGA芯片.MCU芯片.NAND Flash芯片等.脱机和在线 ...

  5. linux CentOS 7 安装 RabbitMQ 3.6.3, Erlang 19.0

    1. 安装erlang 安装依赖环境 yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel unixO ...

  6. POJ 2456 Aggressive cows(二分答案)

    Aggressive cows Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 22674 Accepted: 10636 Des ...

  7. Apache Shiro 反序列化RCE漏洞

    漏洞介绍 漏洞类型 :JAVA反序列化(RCE) 影响版本 :Apache Shiro 1.2.4及其之前版本 漏洞评级 :高危 漏洞分析 #: 下载漏洞环境: git clone https://g ...

  8. pycharm 里面引用pymysql

    import pymysql db =pymysql.connect(host ='192.168.1.131',port=3306,user='jack',password ='jack',db = ...

  9. 一个lucene源码分析的博客

    ITpub上的一个lucene源码分析的博客,写的比较全面:http://blog.itpub.net/28624388/cid-93356-list-1/

  10. 简单ORM工具的设计和编写，自己项目中曾经用过的

    http://www.cnblogs.com/szp1118/archive/2011/03/30/ORM.html 在之前的一个项目中自己编写了一个简单的ORM小工具,这次重新整理和重构了一下代码, ...