ddd

css/base.css

    right: 5px;
    cursor: pointer;
}
.btn {
	display:inline-block;
	padding:5px 12px;
	margin-bottom:4px;
	margin-top: 4px;
	font-size:14px;
	font-weight:400;
	line-height:1.42846154;
	text-align:center;
	white-space:nowrap;
	vertical-align:middle;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	border:1px solid transparent;
	border-radius:4px;
	-webkit-transition:all .4s cubic-bezier(.175,.885,.32,1);
	-o-transition:all .4s cubic-bezier(.175,.885,.32,1);
	transition:all .4s cubic-bezier(.175,.885,.32,1)
    display: inline-block;
    padding: 5px 12px;
    margin-bottom: 4px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42846154;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-transition: all .4s cubic-bezier(.175, .885, .32, 1);
    -o-transition: all .4s cubic-bezier(.175, .885, .32, 1);
    transition: all .4s cubic-bezier(.175, .885, .32, 1)
}
.btn:focus {
	outline:thin dotted #333;
	outline:5px auto -webkit-focus-ring-color;
	outline-offset:-2px
}
.btn:focus,.btn:hover {
	color:#353535;
	text-decoration:none
}
.btn.active,.btn:active {
	background-image:none;
	outline:0;
	-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
	box-shadow:inset 0 3px 5px rgba(0,0,0,.125)
}
.btn.disabled,.btn[disabled],fieldset[disabled] .btn {
	pointer-events:none;
	cursor:not-allowed;
	filter:alpha(opacity=65);
	-webkit-box-shadow:none;
	box-shadow:none;
	opacity:.65
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}
.btn:focus, .btn:hover {
    color: #353535;
    text-decoration: none
}
.btn.active, .btn:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    pointer-events: none;
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65
}
.btn {
	color:#353535;
	text-shadow:0 1px 0 #fff;
	background-color:#f2f2f2;
	border-color:#bfbfbf
}
.btn.active,.btn:active,.btn:focus,.btn:hover,.open .dropdown-toggle.btn {
	color:#353535;
	background-color:#dedede;
	border-color:#a1a1a1;
	-webkit-box-shadow:0 2px 1px rgba(0,0,0,.15);
	box-shadow:0 2px 1px rgba(0,0,0,.1)
}
.btn.active,.btn:active,.open .dropdown-toggle.btn {
	background-color:#ccc;
	background-image:none;
	border-color:#a6a6a6;
	-webkit-box-shadow:inset 0 4px 6px rgba(0,0,0,.15);
	box-shadow:inset 0 4px 6px rgba(0,0,0,.15)
}
.btn.disabled,.btn.disabled.active,.btn.disabled:active,.btn.disabled:focus,.btn.disabled:hover,.btn[disabled],.btn[disabled].active,.btn[disabled]:active,.btn[disabled]:focus,.btn[disabled]:hover,fieldset[disabled] .btn,fieldset[disabled] .btn.active,fieldset[disabled] .btn:active,fieldset[disabled] .btn:focus,fieldset[disabled] .btn:hover {
	background-color:#f2f2f2;
	border-color:#bfbfbf
    color: #353535;
    text-shadow: 0 1px 0 #fff;
    background-color: #f2f2f2;
    border-color: #bfbfbf
}
.btn.active, .btn:active, .btn:focus, .btn:hover, .open .dropdown-toggle.btn {
    color: #353535;
    background-color: #dedede;
    border-color: #a1a1a1;
    -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .1);
    box-shadow: 0 2px 1px rgba(0, 0, 0, .1)
}
.btn.active, .btn:active, .open .dropdown-toggle.btn {
    background-color: #ccc;
    background-image: none;
    border-color: #a6a6a6;
    -webkit-box-shadow: inset 0 4px 6px rgba(0, 0, 0, .15);
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, .15)
}
.btn.disabled, .btn.disabled.active, .btn.disabled:active, .btn.disabled:focus, .btn.disabled:hover, .btn[disabled], .btn[disabled].active, .btn[disabled]:active, .btn[disabled]:focus, .btn[disabled]:hover, fieldset[disabled] .btn, fieldset[disabled] .btn.active, fieldset[disabled] .btn:active, fieldset[disabled] .btn:focus, fieldset[disabled] .btn:hover {
    background-color: #f2f2f2;
    border-color: #bfbfbf
}
/* layout */
.container {
    padding-top: 10px;
    padding-right: 0px;
}
.item-caption.center {
    text-align: center;
}
.item-caption.required:after {
    content: ' *';
    color: red;
    min-height: .01%;
    overflow-x: auto
}
.table td.empty-desc{
	text-align: center;
	font-size: 30px;
.table td.empty-desc {
    text-align: center;
    font-size: 30px;
}
.dt-pager {
    border-color: #ddd;
}
.opt-check .icon-st-check:before{
	 content: '\e68b';
	 cursor: pointer;
.opt-check .icon-st-check:before {
    content: '\e68b';
    cursor: pointer;
}
.opt-check .icon-st-check.checked:before {
    content: '\e642';
}
.modal-dialog {
    position: absolute;
    max-width: 90%;
    max-height: 90%;
    min-width: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.modal-dialog .modal-header {
    min-height: 16.54px;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.opt-check .icon-st-check.checked:before{
	 content: '\e642';
.modal-dialog .modal-header .modal-title {
    margin: 0;
    line-height: 1.53846154;
    font-weight: 700;
}
.modal-dialog .modal-body {
    padding: 15px;
}
.modal-dialog .modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}
.modal-dialog .modal-footer button {
    margin-left: 10px;
}

css/model/sys/org/edit.css

@charset "utf-8";
.sys_org_edit{
	width:800px;
}

css/model/sys/org/new.css

@charset "utf-8";
.sys_org_new{
	width:800px;
}

html/model/sys/org/edit.html

<div class="sys_org_edit centerModal">
	<div class="modal-ctrl">
		<i class="icon icon-times"></i>
	</div>
	<div class="container newForm">
		<div class="row">
			<div class="col-2 item-caption">机构NAME</div>
			<div class="col-10">
				<div class="form-item text" defVal="" name="name"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-2 item-caption">机构类型</div>
			<div class="col-10">
				<div class="form-item select" defVal="" dictCode="bool" name="type"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-2 item-caption">备注</div>
			<div class="col-10">
				<div class="form-item textarea" defVal="" name="descp"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-10"></div>
			<div class="col-2">
				<div class="btn pull-right opt-save">
					<i class="icon-check"></i> SAVE
				</div>
			</div>
		</div>
	</div>
</div>

html/model/sys/org/index.html

<div class="sys_org_index" loadUri="../ajax/sys/org/pq" pageSize="5" pageNo="1">
<div class="sys_org_index" loadUri="../ajax/sys/org/pq" pageSize="7" pageNo="1" pageIndex="pi">
	<div class="modal-ctrl">
		<i class="icon icon-times"></i>
	</div>
				<tr>
					<th class="opt-check" ><i class="icon icon-st-check"></i> </th>
					<th>序号</th>
					<th>PageIndex</th>
					<th>名称</th>
					<th>登记日期</th>
					<th>类型</th>
				<tr>
					<td class="opt-check" ><i class="icon icon-st-check" orgId="{{id}}"></i></td>
					<td>{{any-[]}}</td>
					<td>{{pi}}</td>
					<td>{{name}}</td>
					<td>{{createTime-showDay}}</td>
					<td class="do-dict-display" dict="bool" code="{{type}}"></td>
			</tbody>
			<tbody class="code-tpl code-tag-hold" code-func="data-emptylist">
				<tr>
					<td class="empty-desc" colspan="5">表格暂无数据</td>
					<td class="empty-desc" colspan="6">表格暂无数据</td>
				</tr>
			</tbody>
		</table>

js/base.js

		_g_layer_curr = { index: 5000000, remove: noop, css: noop },
		layer_remove = function() {
			this.shade.remove();
			this.ctn.empty();
			this.ctn.remove();
			this.prev.css("display", "block");
			_g_layer_curr = this.prev;
		/*
		 * 弹出提示信息，不会自动消失    parent is body z - index 5000000 - 9999997
		 */
		alertMsg: function(cnt) {},
		alertMsg: function(title, content,hand) {
			if(content){
				if($.isFunction(content)){
					hand = content;
					content = title;
					title = "提示";
				}
			}else{
				content = title;
				title = "提示";
			}
			hand=hand || noop;
			var ly = util.createModalLayer('<div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title"></h4></div><div class="modal-body"><p></p></div><div class="modal-footer"><button type="button" class="btn">关闭</button></div></div></div>');
			ly.ctn.find(".modal-title").text(title);
			$content = ly.ctn.find("p").text(content);
			ly.ctn.find("button").on("click", function() {
				util.closeModalLayer();
				hand();
			});
		},
		/*
		 *弹出确认信息，不会自动消失    parent is body z - index 1000000 - 4999999 
		 * btns is Array 
		 * btns like [{catpion:"button caption",handler:function(){}},...]
		 */
		boxMsg: function(cnt, btns) {},
		boxMsg: function(obj) {
			var ly = util.createModalLayer('<div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title"></h4></div><div class="modal-body"><p></p></div><div class="modal-footer"></div></div></div>');
			ly.ctn.find(".modal-title").text(obj.title || "确认");
			ly.ctn.find("p").text(obj.content);
			var m_footer = ly.ctn.find(".modal-footer"),
				btnH = function(btn) {
					var $btn = $('<button type="button" class="btn"></button>').appendTo(m_footer);
					var caption = btn.caption || "未命名的",
						handler = btn.hand || noop;
					$btn.text(caption);
					$btn.on("click", function() {
						util.closeModalLayer();
						handler();
					});
				};
			for(var i = 0; i < obj.btns.length; ++i) {
				btnH(obj.btns[i]);
			}
		},
		/*
		 *弹出确认信息，不会自动消失    parent is body z - index 1000000 - 4999999 
				type: method,
				url: pUrl,
				//cache: false,
				traditional:true,
				data: pData,
				contentType: method == "put" ? "application/json" : "application/x-www-form-urlencoded",
			}).done(function(rd) {
			util.ajax("post", url, data, sh, eh);
		},
		put: function(url, data, sh, eh) {
			if(data && ("string"!=$.type(data))){
				data =JSON.stringify(data);
			}
			util.ajax("put", url, data, sh, eh);
		},
		del: function(url, sh, eh) {
			util.showLoading();
			$.ajax({ url: dict_baseUri + dictCode, type: "get", dataType: "json" }).done(function(data) {
				util.hideLoading();
				if(data.success){
				if(data.success) {
					data = data.data;
					dict_dictCache[dictCode] = data;
					var handlers = dict_dictHandleCache[dictCode];
						}
						delete dict_dictHandleCache[dictCode];
					}
				}else{
				} else {
					var m = "load dict[" + dictCode + "] error";
					util.error(m);
				}
			}
			return qs;
		},
		get: function(url, data, eh) {
		get: function(url, data, check, eh) {
			if(CK_FALSE === data) return;
			var self = this;
			util.get(url, data, function(rd) {
				self.reset();
				self.val(rd);
				if(check(rd)) {
					self.reset();
					self.val(rd);
				}
			}, eh);
		},
		post: function(url, data, eh) {
		post: function(url, data, check, eh) {
			if(CK_FALSE === data) return;
			var self = this;
			util.post(url, data, function(rd) {
				self.reset();
				self.val(rd);
				if(check(rd)) {
					self.reset();
					self.val(rd);
				}
			}, eh);
		},
		doGet: function(url, sh, eh) {
					this.pagerEle.children("li.active").on("click", function() {
						self.goPage(parseInt($(this).attr("no")));
					});
				} else {
					this.pagerEle.empty();
				}
			},
			pdt_build_pageIndex = function(data, key, pageSize, pageNo) {
				var bi = pageSize * (pageNo - 1) + 1;
				for(var i = 0; i < data.length; ++i) {
					data[i][key] = bi++;
				}
			},
			PageDataTable = function(ele) {
				this.ph = pdt_pager_builder;
				this.ele.data(DK_PAGE_DATA_TABLE, this);
				this.eh = true;
				this.pageIndex = ele.attr("pageIndex");
			};
		$.extend(PageDataTable.prototype, {
			error: function(eh) { this.eh = eh },
				util.get(self.uri, this.cache, function(data) {
					self.total = data.total;
					data.length = data.data.length;
					if(self.pageIndex) {
						pdt_build_pageIndex(data.data, self.pageIndex, data.pageSize, data.pageNo);
					}
					self.codeRef.val(data);
					self.ph(data);
				}, self.eh);

js/model/sys/org/edit.js

;
spa_define(function(spa) {
	return {
		modal: function(data) {
			var modalCtn = spa.getLastModalCtn();
			var root = modalCtn = modalCtn.children();
			var form = root.find(".newForm").form();
			root.find(".modal-ctrl .icon-times").on("click", function() {
				spa.closeModal();
			});
			var handler = data.hand;
			var closeThis = function() {
				spa.closeModal();
				if(handler) {
					handler();
				}
			};
			form.val(data.data);
			root.find(".opt-save").on("click", function() {
				form.doPut("../ajax/sys/org", closeThis, {});
			});
		}
	};
});

js/model/sys/org/index.js

		main: function() {
			var root = spa.mainEle.children(".sys_org_index");
			var pdg = root.pdg();
			pdg.codeRef.shell("showDay",function(data,key){
				if(data && data[key]){
			pdg.codeRef.shell("showDay", function(data, key) {
				if(data && data[key]) {
					var day = data[key];
					return day.substring(0,4)+"年"+day.substring(4,6)+"月"+day.substring(6,8)+"日";
					return day.substring(0, 4) + "年" + day.substring(4, 6) + "月" + day.substring(6, 8) + "日";
				}
				return "";
			});
			pdg.codeRef.addValueListener($.util.dictDisplay);
			root.find(".opt-query").on("click", function() {
//				console.log("dt load")
				//				console.log("dt load")
				pdg.load();
			});
			//console.log(pdg.formRef.val());
			pdg.load();
			
			root.find(".opt-new").on("click",function(){
				spa.showModal("sys_org_new",function(){pdg.load()});
			root.find(".opt-new").on("click", function() {
				spa.showModal("sys_org_new", function() { pdg.load() });
			});
			root.find(".dt-tpl").on("click","th.opt-check>i.icon-st-check",function(){
			root.find(".dt-tpl").on("click", "th.opt-check>i.icon-st-check", function() {
				var $this = $(this);
				$this.toggleClass("checked");
				if($this.hasClass("checked")){
				if($this.hasClass("checked")) {
					root.find(".dt-tpl td.opt-check>i.icon-st-check").addClass("checked");
				}else{
				} else {
					root.find(".dt-tpl td.opt-check>i.icon-st-check").removeClass("checked");
				}
			});
			root.find(".dt-tpl").on("click","td.opt-check>i.icon-st-check",function(){
			root.find(".dt-tpl").on("click", "td.opt-check>i.icon-st-check", function() {
				var $this = $(this);
				$this.toggleClass("checked");
			});
			root.find(".opt-edit").on("click", function() {
				var $org = root.find("td.opt-check>i.checked");
				if($org.length) {
					if($org.length > 1) {
						$.util.alertMsg("只能选择一个机构");
					} else {
						$.util.get("../ajax/sys/org/id/"+$org.attr("orgId"),null,function(rd){
							if(rd){
								spa.showModal("sys_org_edit", { data:rd, hand: function() { pdg.load() } })								
							}else{
								$.util.alertMsg("机构已不存在", function(){pdg.load();});
							}
						},{});
					}
				} else {
					$.util.alertMsg("请选择一个机构");
				}
			});
			root.find(".opt-del").on("click", function() {
				var $org = root.find("td.opt-check>i.checked");
				if($org.length) {
					var ret =[];
					$org.each(function(){
						ret.push($(this).attr("orgId"));						
					});
					$.util.boxMsg({
						title: "确认删除",
						content: "您是否要删除选中的机构信息,机构信息删除后不可恢复！！！！！！！！！！！！！！！！！！",
						btns: [{ caption: "删除", hand: function() {
							$.util.post("../ajax/sys/org/del",{ids:ret},function(){pdg.load()},{});							
						} },
							{ caption: "取消" }
						]
					});
				} else {
					$.util.alertMsg("请选择一个机构");
				}
			});
		},
		modal: function(data) {
			//console.log(spa.getLastModalCtn())
			//spa.getLastModalCtn().html(" in modal:"+(new Date()).toString());	
//			var modalCtn =spa.getLastModalCtn();
//			var root = modalCtn = modalCtn.children();	
//			root.css("width","80%");
//			root.find(".upload-btn").upload({
//				uri:"/ajax/upload",
//				maxSize:1048576,
//				accept:"image/*",
//				start:function(){console.log("start:"+JSON.stringify(this))},
//				done:function(data){console.log("done:"+JSON.stringify({ref:this,data:data}))},
//				fail:function(type,param){console.log("fail:"+JSON.stringify({ref:this,type:type,param:param}))},
//				notity:function(total,loaded){console.log("notity:"+JSON.stringify({ref:this,total:total,loaded:loaded}))},
//			});
//			root.find(".icon-times").on("click",function(){
//				spa.closeModal();
//			});
//			var pdg =root.pdg();
//			pdg.codeRef.addValueListener($.util.dictDisplay);
//			root.find(".query").on("click", function() {
//				console.log("dt load")
//				pdg.load();
//			});
//			root.find(".reset").on("click", function() {
//				console.log("dt reset")
//				pdg.formRef.reset();
//			});
//			console.log(pdg.formRef.val());
//			pdg.load();
			
			//			var modalCtn =spa.getLastModalCtn();
			//			var root = modalCtn = modalCtn.children();	
			//			root.css("width","80%");
			//			root.find(".upload-btn").upload({
			//				uri:"/ajax/upload",
			//				maxSize:1048576,
			//				accept:"image/*",
			//				start:function(){console.log("start:"+JSON.stringify(this))},
			//				done:function(data){console.log("done:"+JSON.stringify({ref:this,data:data}))},
			//				fail:function(type,param){console.log("fail:"+JSON.stringify({ref:this,type:type,param:param}))},
			//				notity:function(total,loaded){console.log("notity:"+JSON.stringify({ref:this,total:total,loaded:loaded}))},
			//			});
			//			root.find(".icon-times").on("click",function(){
			//				spa.closeModal();
			//			});
			//			var pdg =root.pdg();
			//			pdg.codeRef.addValueListener($.util.dictDisplay);
			//			root.find(".query").on("click", function() {
			//				console.log("dt load")
			//				pdg.load();
			//			});
			//			root.find(".reset").on("click", function() {
			//				console.log("dt reset")
			//				pdg.formRef.reset();
			//			});
			//			console.log(pdg.formRef.val());
			//			pdg.load();
		},
		mainDestory: function() {