1.html代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加任務</title>
<script type="text/javascript">
var path = '<%=path%>';
</script>
<link rel="stylesheet" type="text/css"
href="<%=path%>/js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css"
href="<%=path%>/js/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css"
href="<%=path%>/style/demo.css" />
<script type="text/javascript" src="<%=path%>/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript"
src="<%=path%>/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$.extend($.fn.validatebox.defaults.rules, {
myminLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});
</script>
</head>
<body scroll="auto">
<fieldset>
<legend>增加的任務</legend>
<table id="pg" class="easyui-propertygrid" style="width:900px;" data-options="
url:'<%=path%>/style/propertygrid_data1.json',
method:'get',
showGroup:true,
scrollbarSize:0
">
</table>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" οnclick="addTask()">Add</a>
<script>
$.extend($.fn.datagrid.defaults.editors, {
datetimebox: {//datetimebox就是你要自定義editor的名稱
init: function(container, options){
var input = $('<input class="easyuidatetimebox">').appendTo(container);
return input.datetimebox({
formatter:function(date){
//return date;
return new Date(date).format("yyyy-MM-dd hh:mm");
}
});
},
getValue: function(target){
return $(target).parent().find('input.combo-value').val();
},
setValue: function(target, value){
$(target).datetimebox("setValue",value);
},
resize: function(target, width){
var input = $(target);
if ($.boxModel == true){
input.width(width - (input.outerWidth() - input.width()));
} else {
input.width(width);
}
}
}
});
//時間格式化
Date.prototype.format = function(format){
/*
* eg:format="yyyy-MM-dd hh:mm:ss";
*/
if(!format){
format = "yyyy-MM-dd hh:mm:ss";
}
var o = {
"M+": this.getMonth() + 1, // month
"d+": this.getDate(), // day
"h+": this.getHours(), // hour
"m+": this.getMinutes(), // minute
"s+": this.getSeconds(), // second
"q+": Math.floor((this.getMonth() + 3) / 3), // quarter
"S": this.getMilliseconds()
// millisecond
};
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" +o[k]).length));
}
}
return format;
};
var mycolumns = [[
{field:'name',title:'MyName',width:100,sortable:true},
{field:'value',title:'MyValue',width:100,resizable:true}
]];
function addTask(){
//var a = $('#pg').propertygrid('getChanges');
//console.log(a);
var b = $('#pg').propertygrid('getData');
$.post("addtask.htm", {
data : JSON.stringify(b)
}, function() {
console.log(JSON.stringify(b));
});
}
//getData
</script>
</fieldset>
</body>
</html>
2.json文件
{"total":7,"rows":[
{"name":"任務系統","value":"ETL1","group":"Settings","editor":"text"},
{"name":"任務名稱","value":"","group":"Settings","editor":"text"},
{"name":"任務描述","value":"","group":"Settings","editor":"text"},
{"name":"任務類型","value":"D","group":"Settings","editor":{
"type":"combobox",
"options":{
"data":[{"value":"D","text":"D"},{"value":"W","text":"W"},{"value":"M","text":"M"},{"value":"Q","text":"Q"},{"value":"I","text":"I"}],
"panelHeight":"auto"
}
}},
{"name":"任務頻次","value":"","group":"Settings","editor":"text"},
{"name":"觸發任務","value":"","group":"Settings","editor":"text"},
{"name":"依賴任務","value":"","group":"Settings","editor":"text"},
{"name":"任務執行腳本","value":"","group":"Settings","editor":"text"},
{"name":"時間觸發","value":"true","group":"Settings","editor":{
"type":"checkbox",
"options":{
"on":true,
"off":false
}
}},
{"name":"開始時間","value":"","group":"Settings","editor":"text"},
{"name":"啓動任務的機器 ","value":"","group":"Settings","editor":{
"type":"combobox",
"options":{
"data":[{"value":"1","text":"1"},{"value":"2","text":"2"},{"value":"3","text":"3"}],
"panelHeight":"auto"
}
}},
{"name":"任務創建人 ","value":"","group":"Settings","editor":"text"},
{"name":"name","value":"","group":"Settings","editor":{
"type":"validatebox",
"options":{
"required":"true",
"validType":"remote['testRepetition.htm','name']",
"invalidMessage":"this user is existed"
}
}},
{"name":"name","value":"","group":"Settings","editor":{
"type":"validatebox",
"options":{
"required":"true",
"validType":"remote['testRepetition.htm','name']",
"invalidMessage":"this user is existed"
}
}}
]}3.java代碼:
@RequestMapping("/testRepetition")
public void testRepetition(HttpServletRequest request,HttpServletResponse response) {
String name = request.getParameter("name");
logger.info("name:" + name);
try {
if(name.length() > 10){
logger.info("return true");
response.getWriter().print("true");
}
else {
response.getWriter().print("false");
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return;
}4.參考網站:http://www.cnblogs.com/zhxhdean/archive/2011/09/21/2184153.html