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. Selenium 基本用法

    如下,使用 Selenium 打开淘宝首页并获取页面源代码: from selenium import webdriver browser = webdriver.Chrome() # 声明一个浏览器 ...

  2. Ansible的Inventory管理

    Ansible将可管理的服务器集合成为Inventory,Inventory的管理便是服务器的管理. hosts文件的位置: /etc/ansible/hosts 在命令行通过-i参数指定 通过/et ...

  3. 第四篇：MapReduce计算模型

    前言 本文讲解Hadoop中的编程及计算模型MapReduce,并将给出在MapReduce模型下编程的基本套路. 模型架构 在Hadoop中,用于执行计算任务(MapReduce任务)的机器有两个角 ...

  4. C语言中一个字符数组里面的所有元素变成一个字符串

    #include <string.h> int main() // 这里为了方便直接用main函数 {     char array[] = { 'h', 'e', 'l', 'l', ' ...

  5. 【面试题】源石智影科技Python工程师笔试题

    哈哈 上图

  6. WP8.1学习系列(第七章)——应用选项卡Pivot交互UX

    “应用选项卡”模式用于用户经常在中间导航的多个 UI 页面.如果你的应用基于单个主题(例如,电影.棒球等),该模式尤其有用.每页都将为用户显示与该应用呈现的整体数据相关的一些内容.“应用选项卡”模式可 ...

  7. Shell xargs

    from here 简介之所以能用到这个命令,关键是由于很多命令不支持|管道来传递参数,而日常工作中有有这个必要,所以就有了xargs命令,例如: 这个命令是错误的find /sbin -perm + ...

  8. Android NDK学习（3）使用Javah命令生成JNI头文件 .

    转:http://www.cnblogs.com/fww330666557/archive/2012/12/14/2817387.html 第一步: 在Eclipse中创建android项目,并声明N ...

  9. Atom使用插件精选

    小颖之前公司的大哥推荐小颖用的编辑器是atom,之前都是他给小颖了一个atom插件安装列表,小颖电脑出了点问题,所以后来小颖把那弄丢了,小颖重装atom后,就不知道要安装什么插件,所以也百度了很多,今 ...

  10. 【CF662A】Gambling Nim 线性基

    [CF662A]Gambling Nim 题意:n长卡牌,第i张卡牌正面的数字是$a_i$,反面的数字是$b_i$,每张卡牌等概率为正面朝上或反面朝上.现在Alice和Bob要用每张卡牌朝上的数字玩N ...