- 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.修改数据保存事件实现（紫色部分）