项目经验总结

自己做的测试1

1、时间组件
HTML:

<div class="form-group">
	<label class="col-md-3 control-label" for="date" >时间：&nbsp;</label>
	<div class="col-md-8">
		<div class="input-group">
			<intput id="date" type="text" name="date" class="form-control" readonly>
			<a id="del" class="input-group-addon"><i lass="fa fa-times"></i></a>
		</div>
	</div>
</div>

JS:

var initTIme=function(){
	$("#date").datetimepicker({
		//设置使用语言：cn是自定义的中文版本，还可以扩展其他语言版本
		language:"cn",
		//输出格式化
		format:'yyyy-mm-dd',
		//直接选择‘今天‘
		todayBtn:"linked",
		//设置最精准的时间选择图
		minView:'month',
		//当天日期
		pickerPosition:'top-right',
		//在上面显示
		todayHighlight:true,
		//显示上午下午
		showMeridian:true,
		//选择完毕后自动关闭
		autoclose:true
	});
	
	$("#del").on("click",function(){
		$("#del").val("");
	});
}

2、界面初始化

/**
*初始页面
*/
var init = finction(){
	//对应首页表单的ID
	SearchBlock.init("searchDiv2");
	//展示列表页
	showBookResourceGrid();
	initTime();
}

3、初始化列表，按照条件查询

/**
*初始化列表，按照条件查询
*/
var showBookResourceGrid = function(){
	var config={
		//接着首页的最后面的id值
		id:"secondResourceGrid",
		multi:true,
		pageSize:10,
		pagination:true,
		//展示的信息字段
		layout:[{
			name:"法学名称"，
			field:"headLine",
			width:"16%",
			click:function(e){
				//展示详情页
				showLiteratureDetail(e.data.row.lawId);
			}
		},{
				name:"法学类型"，
				field:"knowledgeCategory",
				width:"10%"
		},{
				name:"描述",
				field:"courtIntroduction",
				width:"16%"
		}],
		//各种按钮
		toolbar:[
		{
			name:'添加',
			icon:'fa fa-plus-circle',
			//回调函数
			callback:function(){
					showLiteratureDetail(e.data.row.lawId);
			}			
		},{
			name:'重置',
			icon:"fa fa-repeat",
			callback:function(){
				$('#headLine').val('');
				$('#knowledge').val('');
			}
		}],
		data:{
			"type":"URL",
			"value":getServer()+"/sword/注解类/注解方法名"
		},
		queryParam:{
			headLine:$("#headLine").val.replace(/\+/g,"");
			knowledgeCategory:$("#knowledgeCategory").val()
		}
	};
	Grid.init(config);
}

4、打开侧边栏详情页

	var showLiteratureDetail = function(lawId){
	//工具类初始化侧边栏
	var slidebar = Util.slidebar({
		url:getStaticPath()+"/app/collection/SecondManage/views/网页名",
		cache:false,
		close:false,
		width:"500px",
		afterLoad:function(){
			//初始化各种
			initLiteratureDetail(lawId);
			initValidate();
			initTime();
			//绑定保存按钮，点击，实现功能
			$("#saveButton").bind("click",function(){
				if(!$("#literatureForm3").valid()){
					//工具类的alert
					Util.alert("请完善必填信息");
					return false;
				}
				loading.show();
				//获取表单数据
				var literatureInfo = Tool.serialize("literatureForm3");
				//向控制台输出信息
				console.info(literatureInfo );
				$.ajax({
					url:getServer()+"/sword/注释类名/注释方法名",
					dataType:"json",
					data:literatureInfo,
					success:function(data){
						//关闭遮罩层
						loading.close();
						//关闭侧边栏
						slidebar.close();
						Util.alert(data.message);
						//关闭之后，展示列表页
						showBookResourceGrid();
					}
				});
			});
		}
	});
}

5、删除选中项

	var deleteBookResource = function(){
		//id为下面页面的id值，获取勾选的内容
		var rows = Grid.getGrid("videoResourceGrid1").getSelectedRow();
		if(rows&&rows.length>0){
			//工具类的确定
			Util.confirm("确定要删除指定的记录么?",function(){
				var lawIds = [];
				//遍历选中的ID值，然后存进数组
				for(var i = 0;i<rows.length;i++){
					lawIds.push(rows[i].lawId);
				}
				$.ajax({
					url:getServer()+"/sword/注释类名/注释方法名",
					//传到后台的数据变成json字符串形式，后台用List<String> lawIds = JSONArray.parseArray(req.getData("lawIds"),String.class);接受
					data:{lawIds:JSON.stringify(lawIds)},
					success:function(data){
						Util.alert(data.message);
						//删除之后显示列表页
						showBookResourceGrid();
					}
				})
			});
		}else{
			Util.alert("请选择要删除的行记录");
		}
	}

6、添加功能

var addLiteratureDetail = function(){
	var buttons = [];
	var temp = [];
	buttons.push({
		name:"确定”,
		callback:function(e){
			//添加的如果是法院，展示法院的详情页
			temp=Tool.serialize("addForm");
			if(temp.knowledgeCategory==2){
				//隐藏对话框
				dialog.hide();
				dialog.null;
				var slidebar1 = Util.slidebar({
					url:getStaticPath()+"/app/collecction/*******.html"
					cache:false,
					close:false,
					width:"500px",
					afterLoadFfuntcion(){
						initValidate2();
						initTime();
						initSourceListGrid();
						//绑定保存按钮
						$("#saveButton").bind("click",function){
							if(!$("#lawLi").hasClass('active')){
								Util.alert(”请返回详情页操作！');
								return false;
							}
							if(!$("#literatureForm2").valid()){
								return false;
							}
							var literatureInfo = Tool.serialize("literatureForm2");
							console.info(literatureInfo);
							$.ajax({
								url:getServer()+"sword/***"",
								dataType:"json",
								data:literatureInfo,
								success:function(data){
									loading.cloes();
									slidebar1.close();
									Util.alert(data.message);
									showBookResourceGrid();
								}
							});
						}
					}
				});
			}
		}
	});
}

7、初始化侧边栏详情页面

var initLiteratureDetail = function(lawId){
		if(lawId){
			$.ajax({
				url:getServer()+"*****",
				dataType:"json",
				async:false,
				data:{"lawId":lawId},
				success:function(data){
					if(data.knowledgeCategory=="法律"){
						Tool.deserialize("literatureForm3",data);
					}esle if(data.knowledgeCategory=="法院"){
						Tool.deserialize("literatureForm2",data);
					}
				}else{
					Util.alert("请确定法学类型");
				}
			});
		}
	}

8、`表单验证

var initValidate = function(){
	$('#literatureForm3').validate({
		rules:{
			headLine:{
				required:true,
				maxlength:100
			}
		},
		message:{
			headLine:{
				required:'请填写标题名称'
			}
		}
	});
}