1.今天用了dhmtl做了一个增删改查的功能。
之前都只是做了一个展示的功能。对于这个东西的运用也不算特别的熟悉,在网上找的例子我也不是看的特别的懂。所以现在的话记录一下
2.java action 代码
public class ScheduleinfoAction extends BaseAction {
private BaseDao baseDao;
private ScheduleinfoDao scheduleinfoDao;
private Scheduleinfo scheduleinfo;
private String str;
public void delete() throws IOException {
scheduleinfo=baseDao.getPoById(Scheduleinfo.class, id, true);
scheduleinfo.setIsDelete(1);
baseDao.updatePo(scheduleinfo);
}
public void saveOrUpdate() {
if(scheduleinfo==null){
scheduleinfo=new Scheduleinfo();
}
String strs[]=str.split("#");
if(str!=null && !str.equals("")){
//3个参数是做保存操作
if(strs.length==3){
scheduleinfo.setStartTime(strs[0]);
scheduleinfo.setEndTime(strs[1]);
scheduleinfo.setText(strs[2]);
}
//4个参数是做修改操作
else if(strs.length==4){
scheduleinfo.setStartTime(strs[0]);
scheduleinfo.setEndTime(strs[1]);
scheduleinfo.setText(strs[2]);
scheduleinfo.setId(strs[3]);
}
}
if(scheduleinfo!=null && scheduleinfo.getId()!=null && !scheduleinfo.getId().equals("")){
Scheduleinfo notice1=baseDao.getPoById(Scheduleinfo.class, scheduleinfo.getId(), false);
TTBeanUtils.copyProperties(scheduleinfo, notice1);
notice1.setUpdateDate(new Date());
notice1.setUpdater(this.getUserId());
baseDao.updatePo(notice1);
}else{
scheduleinfo.setPublishDate(new Date());
Employee e=new Employee();
e.setId(this.getUserId());
scheduleinfo.setEmployee(e);
scheduleinfo.setCode(this.getEmployeeCode());
scheduleinfo.setSubmitDate(new Date());
scheduleinfo.setIsDelete(0);
scheduleinfo.setStatus(1);
baseDao.savePo(scheduleinfo);
}
}
<span style="white-space:pre"> </span>//这里是做数据查询展示的
public void showList() throws IOException {
if(scheduleinfo==null){
scheduleinfo=new Scheduleinfo();
}
HttpServletRequest request = ServletActionContext.getRequest();
List<Scheduleinfo> list=baseDao.findPos(scheduleinfoDao.getHql(scheduleinfo, getEmployeeCode()));
List<Map<String, String>> listjson = new ArrayList<Map<String, String>>();
for(Scheduleinfo t : list){
Map<String, String> map = new HashMap<String, String>();
map.put("id", t.getId());
map.put("start_date", t.getStartTime());
map.put("end_date", t.getEndTime());
map.put("text", t.getText());
listjson.add(map);
}
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("data", listjson);
JSONObject json = JSONObject.fromObject(map);
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
response.getWriter().write(json.toString());
}
public String listCA(){
return "listCA";
}
public BaseDao getBaseDao() {
return baseDao;
}
public void setBaseDao(BaseDao baseDao) {
this.baseDao = baseDao;
}
public void setScheduleinfoDao(ScheduleinfoDao scheduleinfoDao) {
this.scheduleinfoDao = scheduleinfoDao;
}
public void setScheduleinfo(Scheduleinfo scheduleinfo) {
this.scheduleinfo = scheduleinfo;
}
public String getStr() {
return str;
}
public void setStr(String str) {
this.str = str;
}
}
我这边的话。大概展示了一些方法。大概就是增加修改删除,数据查询然后返回jsonzif
showList()这个方法:里面返回的map名字,要跟那个Scheduler默认的名字一样。
我这里大概设置了id 开始时间 结束时间 展示的内容这四个 id的话。主要是做修改和删除功能的。
现在来展示页面的代码
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.multi_day = true;
scheduler.config.event_duration = 35;
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
/**
删除事件
**/
scheduler.attachEvent("onBeforeEventDelete", function(event_id,
event_object) {
var url = "${pageContext.request.contextPath}/manager/scheduleinfo/delete.action";
var id = event_object.id;
var text = event_object.text;
var convert = scheduler.date.date_to_str("%Y-%m-%d %H:%i");
$.ajax({
type : "POST",
url : url,
dataType:"text",
data:{"id":id},
success : function(data) { location.href="${pageContext.request.contextPath}/manager/scheduleinfo/listCA.action";}
});
});
/**
修改事件
**/
scheduler.attachEvent("onEventChanged",
function(event_id, event_object) {
var url = "${pageContext.request.contextPath}/manager/scheduleinfo/saveOrUpdate.action";
var id = event_object.id;
var text = event_object.text;
// date 需要实现格式化
var convert = scheduler.date.date_to_str("%Y-%m-%d %H:%i");
var start_date = convert(event_object.start_date);
var end_date = convert(event_object.end_date);
var details = event_object.details;
var pars = "id=" + id + "&start_date=" + start_date
+ "&end_date=" + end_date + "&text=" + text
+ "&details=" + details;
var str=start_date+"#"+end_date+"#"+text+"#"+id;
alert(str);
$.ajax({
type : "POST",
url : url,
dataType:"text",
data:{"str":str},
success : function(data) { location.href="${pageContext.request.contextPath}/manager/scheduleinfo/listCA.action";}//更新界面event}
});
});
/**
保存事件
**/
scheduler.attachEvent("onEventAdded", function(event_id, event_object) {
var url = "${pageContext.request.contextPath}/manager/scheduleinfo/saveOrUpdate.action";
var id = event_object.id;
var text = event_object.text;
// date 需要实现格式化
var convert = scheduler.date.date_to_str("%Y-%m-%d %H:%i");
var start_date = convert(event_object.start_date);
var end_date = convert(event_object.end_date);
var details = event_object.details;
var str=start_date+"#"+end_date+"#"+text;
$.ajax({
type : "POST",
url : url,
dataType:"text",
data:{"str":str},
success : function(data) { location.href="${pageContext.request.contextPath}/manager/scheduleinfo/listCA.action";}
});
});
scheduler.config.lightbox.sections = [ {
name : "description",
height : 200,
map_to : "text",
type : "textarea",
focus : true
}, {
name : "recurring",
type : "recurring",
map_to : "rec_type",
button : "recurring"
}, {
name : "time",
height : 72,
type : "calendar_time",
map_to : "auto"
} ];
scheduler.init('scheduler_here', new Date(), "week");
scheduler.load("${pageContext.request.contextPath}/manager/scheduleinfo/showList.action","json");
}
</script>
</head>
<body οnlοad="init();">
<div id="scheduler_here" class="dhx_cal_container"
style='width: 100%; height: 100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button">
</div>
<div class="dhx_cal_next_button">
</div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right: 204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right: 140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right: 76px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</body>
我引入了这些文件
<script src="<%=realpath%>/widget/dhtmlxscheduler/codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=realpath%>/widget/dhtmlxscheduler/codebase/ext/dhtmlxscheduler_limit.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=realpath%>/widget/dhtmlxscheduler/codebase/ext/dhtmlxscheduler_units.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=realpath%>/widget/dhtmlxscheduler/codebase/ext/dhtmlxscheduler_recurring.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=realpath%>/widget/dhtmlxscheduler/codebase/ext/dhtmlxscheduler_minical.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=realpath%>/widget/dhtmlxscheduler/codebase/dhtmlxscheduler_timeline.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="<%=realpath%>/widget/dhtmlxscheduler/codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="<%=realpath%>/widget/dhtmlxscheduler/codebase/locale/locale_cn.js"type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="<%=realpath%>/widget/jquery-1.10.2.min.js"></script>
我这边有个问题。就是页面不能及时更新。我这边的话。也不知道要怎么做。
所以我是当修改增加删除成功以后。重新在请求了一下展示的页面。如果你们有更好的方法。记得评论哟
代码download地址:http://download.csdn.net/detail/rendeyishi/9540698
友情提示:代码不能运行,跟博客差不多。只是做参考。
页面效果