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. CentOS7--Firewalld防火墙

    Firewalld服务是红帽RHEL7系统中默认的防火墙管理工具,特点是拥有运行时配置与永久配置选项且能够支持动态更新以及"zone"的区域功能概念,使用图形化工具firewall ...

  2. [SublimeText] Sublime Text 2 运行 Python 脚本中文路径解决方法

    在 SublimeText 中直接运行 Python 脚本,出现以下报错提示: Running python -u C:\Documents and Settings\Administrator\桌面 ...

  3. TableView头视图高度问题

    www.cnblogs.com/ihojin/p/tableHeaderView-resizeheight.html 有这么一种需求,在列表顶端显示一些别样的数据,而这个别样的数据则需要通过一个别样的 ...

  4. django初体验 学习笔记

    django环境搭建     1.安装Python     2.ipython         sudo apt-get install ipython         sudo pip instal ...

  5. JS 数组Array常用方法

    参考网站: http://www.jb51.net/article/60502.htm,作者:junjie 今天在使用js切割字符串"浙江,江苏 , 天津,"...这样字符串的时候 ...

  6. 正则-input控制输入

    大于0的数字:/^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/  这正则看不太懂,先放着 作者:Kevin Yang 使用正则表达式找出不包含特定字符串 ...

  7. springboot---->springboot中的格式化（一）

    这里面我们简单的学习一下springboot中关于数据格式化的使用.我以为你不是个好人,没想到你连个坏人都不是. springboot中的格式化 我们的测试环境是springboot,一个将字符串格式 ...

  8. 告知你不为人知的UDP-疑难杂症和使用

    版权声明:本文由黄日成原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/848077001486437077 来源:腾云阁 h ...

  9. 字符乱码 导致 ORA-12899: value too large

    问题场景: 1.创建测试表 create table t01(name varchar2(30)) 2.插入数据 SQL> insert into t01 (name) values('所有分销 ...

  10. Elasticsearch学习之快速入门案例

    1. document数据格式 面向文档的搜索分析引擎 (1)应用系统的数据结构都是面向对象的,复杂的(2)对象数据存储到数据库中,只能拆解开来,变为扁平的多张表,每次查询的时候还得还原回对象格式,相 ...